Tuesday, February 21, 2017

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 - 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 - Configuration Syntax

In this chapter we'll showcase the comfiguration required to draw a chart using Highcharts API.

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
1Scatter 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 archive

JUnit Official Site: http://www.junit.org
Download 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 - 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 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.

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 −

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.