Highcharts is a pure JavaScript based charting library meant
to enhance web applications by adding interactive charting capability.
It supports a wide range of charts. Charts are drawn using SVG in
standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE).
In legacy IE 6, VML is used to draw the graphics.
Labels
.
Search Your Article
Total Pageviews
Tuesday, February 21, 2017
Highcharts - Environment Setup
In this chapter we will discuss about how to set up Highcharts library to be used in web application development.
Highcharts requires jQuery as a dependency. So first we'll install jQuery library and then HighChart library.
Highcharts requires jQuery as a dependency. So first we'll install jQuery library and then HighChart library.
Highcharts - Configuration Syntax
In this chapter we'll showcase the comfiguration required to draw a chart using Highcharts API.
HighchartsTestHarness.htm
Step 1: Create HTML Page
Create an HTML page with the jQuery and highchart javascript libraries.HighchartsTestHarness.htm
Highcharts - Line Charts
Line charts are used to draw line/spline based charts. In this
section we're going to discuss following types of line and spline based
charts.
Highcharts - Area Charts
area charts are used to draw area based charts. In this section we're going to discuss following types of area based charts.
Highcharts - Bar Charts
Bar charts are used to draw area based charts. In this section we're going to discuss following types of bar based charts.
Highcharts - Column Charts
Column charts are used to draw column based charts. In this section
we're going to discuss following types of column based charts.
Highcharts - Pie Charts
pie charts are used to draw pie based charts. In this section we're going to discuss following types of pie based charts.
Highcharts - Scatter Charts
Scatter charts are used to draw scatter based charts. In this section
we're going to discuss following types of scatter based chart(s).
Sr. No. | Chart Type / Description |
---|---|
1 | Scatter Chart Scatter Chart |
Highcharts - Bubble Charts
Bubble charts are used to draw bubble based charts. In this section
we're going to discuss following types of bubble based chart(s).
Highcharts - Dynamic Charts
Dynamic charts are used to draw data based charts where data can
change after rendering of chart. In this section we're going to discuss
following types of dynamic chart.
Highcharts - Combinations
Combination charts are used to draw mixed charts, for example bar
chart with pie chart. In this section we're going to discuss following
types of combinations charts.
Highcharts - 3D Charts
3D charts are used to draw 3-Dimentional charts. In this section we're going to discuss following types of 3D charts.
Highcharts - Angular Gauges
Angular Gauges charts are used to draw meter/gauge type charts. In
this section we're going to discuss following types of Angular Gauges
charts.
Highcharts - Heat Maps
Heat Map charts are used to draw heat map type charts. In this section we're going to discuss following types of Heat Maps.
Highcharts - Tree Maps
Tree Map charts are used to draw tree map type charts. In this section we're going to discuss following types of Tree Maps.
Highcharts - Quick Guide
Highcharts - Overview
Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics.Highcharts - Useful Resources
If you want to list down your website, book or any other resource on
this page then please contact at webmaster@tutorialspoint.com
GWT - Overview
What is GWT?
- Google Web Toolkit (GWT) is a development toolkit to create RICH Internet Application(RIA).
- GWT provides developers option to write client side application in JAVA.
- GWT compiles the code written in JAVA to JavaScript code.
GWT - Environment Setup
This tutorial will guide you on how to prepare a development
environment to start your work with GWT Framework. This tutorial will
also teach you how to setup JDK, Tomcat and Eclipse on your machine
before you setup GWT Framework:
GWT - Applications
Before we start with creating actual HelloWorld application
using GWT, let us see what are the actual parts of a GWT application. A
GWT application consists of following four important parts out of which
last part is optional but first three parts are mandatory:
GWT - Create Application
As power of GWT lies in Write in Java, Run in JavaScript, we'll be using Java IDE Eclipse to demonstrate our examples. Let's start with a simple HelloWorld application:
GWT - Deploy Application
This tutorial will explain you how to create an application war
file and how to deploy that in Apache Tomcat Websever root. If you
understood this simple example then you will also be able to deploy a
complex GWT application following the same steps.
GWT - Style with CSS
GWT widgets rely on cascading style sheets (CSS) for visual styling. By default, the class name for each component is gwt-<classname>. For example, the Button widget has a default style of gwt-Button and similar way TextBox widgest has a default style of gwt-TextBox. In order to give all buttons and text boxes a larger font, you could put the following rule in your application's CSS file:
GWT - Basic Widgets
Every user interface considers the following three main aspects:
- UI elements : Thes are the core visual elements the user
eventually sees and interacts with. GWT provides a huge list of widely
used and common elements varying from basic to complex which we will
cover in this tutorial.
GWT - Form Widgets
Form widgets allows users to input data and provides them interaction
capability with the application. Every Form widget inherits properties
from Widget class which in turn inherits properties from UIObject and
Wigdet classes.
GWT - Complex Widgets
Complex widgets allows users to advanced interaction capability with
the application. Every Complex widget inherits properties from Widget
class which in turn inherits properties from UIObject.
GWT - Layout Panels
Layout Panels can contain other widgets. These panels controls the
way widgets to be shown on User Interface. Every Panel widget inherits
properties from Panel class which in turn inherits properties from
Widget class and which in turn inherits properties from UIObject class.
GWT - Event Handling
GWT provides a event handler model similar to Java AWT or SWING User Interface frameworks.
- A listener interface defines one or more methods that the widget
calls to announce an event. GWT provides a list of interfaces
corresponding to various possible events.
GWT - Custom Widgets
GWT provides three ways to create custom user interface elements. There are three general strategies to follow:
- Create a widget by extending Composite Class: This is the
most common and easiest way to create custom widgets. Here you can use
existing widgets to create composite view with custom properties.
GWT - UiBinder
Introduction
- The UiBinder is a framework designed to separate Functionality and View of User Interface.
- The UiBinder framework allows developers to build gwt applications as HTML pages with GWT widgets configured throughout them.
GWT - RPC Communication
A GWT based application is generally consists of a client side module
and server side module. Client side code runs in browser and server
side code runs in web server. Client side code has to make an HTTP
request accross the network to access server side data.
GWT - JUnit Integration
GWT provides execellent support for automated testing of client side
code using JUnit testing framework. In this article we'll demonstrate
GWT and JUNIT integration.
Download Junit-4.10.jar
Download Junit archive
JUnit Official Site: http://www.junit.orgDownload Junit-4.10.jar
GWT - Debugging Application
GWT provides execellent capability of debugging client side as well as server side code.
- During development mode, GWT Application is in Java code based and is not translated to JavaScript.
GWT - Internationalization
GWT provides three ways to internationalize a GWT application, We'll
demonstrate use of Static String Internationalization being most
commonly used among projects.
GWT - History Class
GWT applications are normally single page application running
JavaScripts and do not contains lot of pages thus browser do not keep
track of user interaction with Application.
To use browser's history functionality, application should generate a
unique URL fragment for each navigable page.
GWT - Bookmark Support
GWT supports browser history management using a History class for which you can reference GWT - History Class chapter.
GWT uses a term token which is simply a string that the application can parse to return to a particular state. Application will save this token in browser's history as URL fragment.
GWT uses a term token which is simply a string that the application can parse to return to a particular state. Application will save this token in browser's history as URL fragment.
GWT - Logging Framework
The logging framework emulates java.util.logging, so it uses the same
syntax and has the same behavior as server side logging code
GWT logging is configured using .gwt.xml files.
GWT logging is configured using .gwt.xml files.
GWT Questions and Answers
GWT Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews.
This section provides a useful collection of sample Interview Questions
and Multiple Choice Questions (MCQs) and their answers with
appropriate explanations.
GWT - Quick Guide
What is GWT?
- Google Web Toolkit (GWT) is a development toolkit to create RICH Internet Application(RIA).
- GWT provides developers option to write client side application in JAVA.
- GWT compiles the code written in JAVA to JavaScript code.
GWT - Useful Resources
The following resources contain additional information on GWT Please use them to get more in-depth knowledge on this topic.
Discuss GWT
Google Web Toolkit (GWT) is a development toolkit for building and
optimizing complex browser-based applications. GWT is used by many
products at Google, including Google AdWords and Orkut.
Gulp - Overview
What is Gulp?
Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.Gulp - Installation
This article provides a step-by-step procedure of Gulp installation.
System Requirements for Gulp
- Operating System − Cross-platform
- Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera
Gulp - Basics
In this chapter, you will get acquainted with some basics related to Gulp.
Following is a list of some of the tasks that can be handled using the build system −
What is a Build System?
A Build System is referred to as collection of tasks (collectively called as task runners), which automate the repetitive work.Following is a list of some of the tasks that can be handled using the build system −
Gulp - Developing An Application
In the previous chapters, you have studied about Gulp installation and Gulp basics which includes build system of Gulp, package manager, task runner, structure of Gulp, etc.
In this chapter, we will see the basics for developing an application, which includes the following −
In this chapter, we will see the basics for developing an application, which includes the following −
Gulp - Combining Tasks
Task enables a modular approach to configure Gulp. We need to create
task for each dependency, which we would add up as we find and install
other plugins. The Gulp task will have following structure −
gulp.task('task-name', function() { //do stuff here });
Gulp - Watch
The Watch method is used to monitor your source files. When any
changes to the source file is made, the watch will run an appropriate
task. You can use the ‘default’ task to watch for changes to HTML, CSS,
and JavaScript files.
Gulp - Live Reload
Live Reload specifies the changes in the file system. BrowserSync
is used to watch all HTML and CSS files in the CSS directory and
perform live reload to the page in all browsers, whenever files are
changed. BrowserSync makes the workflow faster by synchronizing URLs,
interactions, and code changes across multiple devices.
Gulp - Optimizing CSS and JavaScript
In this chapter, you will learn how to optimize CSS and JavaScript.
Optimizing is required to remove unnecessary data (for e.g. spaces and
unused characters) from the source files. It reduces the size of the
files and allows them to load faster
Gulp - Optimizing Images
In this chapter, you will learn how to optimize images. Optimizing will reduce the size of the images and assist in faster loading.
Gulp - Useful Plugins
Gulp provides some useful plugins to work with HTML & CSS, JavaScript, Graphics and some other things as described in the following tables.
Gulp - Cleaning Unwanted Files
In this chapter, you will learn how to clean generated files. As we are automatically generating the files, make sure that unnecessary files should be deleted before running your build. This procedure is called cleaning. The del plugin can be used for this purpose.
Gulp - Quick Guide
What is Gulp?
Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.Gulp - Useful Resources
The following resources contain additional information on Gulp. Please use them to get more in-depth knowledge on this.
Discuss Gulp
Gulp is a task runner that uses Node.js as a platform. It purely uses
the JavaScript code and helps to run front-end tasks and large-scale
web applications. Gulp builds system automated tasks like CSS and HTML
minification, concatenating library files, and compiling the SASS files.
These tasks can be run using Shell or Bash scripts on the command line.
Subscribe to:
Posts (Atom)