Develop HTML5 chart applications for Android and Win8 devices

Abstract

Presenting charts is one of the key components in business applications, and many of customers trend to use them in mobile devices. Therefore, how to make the charts application keep same performance in both desktop and mobile platform is important. In this article, we will introduce a cross-platform HTML5 library called ichartjs, which could build charts applications easily on both Android devices and Windows 8 ultrabooks/tablets. It supports most of popular charts and graphics, such as pie charts, line graph, area chart, column diagram, bar chart, etc. Besides, all of them could be developed and packaged to hybrid applications (Android, iOS, WP, Win8, Web) with Intel XDK Tools.

 

iChartJS architecture

iChartJS is a popular charts library to build HTML5 charts application, it supports Android, iOS and Windows. Besides, the application could keep same layout among different platforms. It is licensed under Apache 2.0.

Elelemt: the root class, it defines some configure information

Painter: Root class of graph, all canvas painting functions are defined in this class.

Chart: All configureations about charts are defined in this class.

Component: Parent class of components in charts.

Html: Including all classes, which are built in html, defined basic css style and animation.

Quick Tutorial of Bar Column

Let’s begin with a quick column diagram to know the basic usage of iChartJS

1.    include iChartJS in your html file.

<script type="text/javascript" src="ichart-1.2.min.js"></script>

2.    Define your source data in JavaScript, in this demo, we defined 10 sets of source data.

var data = [

{name : 'H',value : 7,color:'#a5c2d5'},

{name : 'E',value : 5,color:'#cbab4f'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'O',value : 15,color:'#a56f8f'},

{name : 'W',value : 13,color:'#c12c44'},

{name : 'O',value : 15,color:'#a56f8f'},

{name : 'R',value : 18,color:'#9f7961'},

{name : 'L',value : 12,color:'#76a871'},

{name : 'D',value : 4,color:'#6f83a5'}

];

$(function(){

new iChart.Column2D({

render : 'canvasDiv', //Render object

data: data,//Binding source data

title :{ text:'Hello World\'s Height In Alphabet'}, //set header

width : 800, //set width

height : 400, //set height

coordinate:{ //set coordinate

scale:[{

position:'left', //values on the left

start_scale:0, //start value

end_scale:26, //end value

scale_space:2, //separation distance

listeners:{

parseText:function(t,x,y){

return {text:t+" CM"}//customized value

}

}

}]

}

}).draw();//render the graph

});

4.    The last step is create a Canvas object in HTML .

<div id=”canvasDiv”></div>

Open your browser, the bar diagram is ready as below.

If you need the chart to auto fit the screen, you need to change the height and with value line to fit: true. And then open it in you mobile devices, it could auto fit your devices’ screen resolution.

Build Pie Chart

Pie charts are mostly used to display part and the overall relationship. It could highlight the proportion of data, but not suit to display large amount of data.

In the pie chart, three o’clock direction is set as default direction. However, user could also modify them from the parameter offset_angle. The positive value represents clockwise migration, while the negative value represents anticlockwise migration.

For example, if we want to set the starting angle at 12 o 'clock direction, source codes are set as follows:

new iChart.Pie2D({

offset_angle :-90

});

In some special situation, you may also want to set an appropriate radius. Don’t worry; radius setting is available at all situation. Let’s try to set the radius to 120px by the following codes:

new iChart.Pie2D({

radius:120

});

The next one is about setting label to meet the special needs in visual. For example, in some cases, we may need to remove extended label in small chart. Mini label is the right choice, you just need to open the switch of mini label by setting true:

mini_label: true.

mini_label _threshold_angle is designed to settting the minimum angle of mini label in case of display conflicts.

A sample pie chart with mini label source codes:

new iChart.Pie2D({

sub_option:{

mini_label : true,

mini_label_threshold_angle : 30 ,

label:{

fontsize:16,

color:'#FFFFFF'

}

}

});

The event in the pie chart is determined by components in this graph, such as fan, illustrations, and labels. A sample of setting events in fan area is showed as below:

new iChart.Pie2D({

sub_option:{

listeners:{

click:function(c,e){

// …

}

}

}

});

Maybe you also need to separate the distance of each item, modifying the separate_angle parameter could achieve your goal. The range of angle could be set form 0 to 90, with default value of 30. 

If we set the angle to 60 by the below source codes, and the visual effect is showed as below:

new iChart.Pie2D({

separate_angle:60

});

 

Build Line Graph

If you want to build line graph, it is also piece of cake with iChartJS and not need to worry about cross-platform performance distance. Firstly, you need to include iChartJS in HTML file as below:

<script type="text/javascript" src="ichart-1.2.min.js"></script>

And then set your data source in format:

var data = [

{name : 'H',value : 7,color:'#a5c2d5'},

{name : 'E',value : 5,color:'#cbab4f'},

……

];

The next step is create a line graph object in JavaScript:

new iChart.LineBasic2D ({

sub_option{

// …

}

});

You may have found that there are plenty of parameters setting in sub_option. In this example, we set the point_size to 8, hollow to false, smooth to true. The source codes are showed as below:

new iChart.LineBasic2D ({

sub_option:{

smooth : true,

point_size:8,

hollow: false

}

});

Now, let’s see the visual effect of line graph:

There are still many other fancy charts could be built with iChartJS, which are fully support both Android and Windows platform. At the last , I would like to show some examples, which are built with iChartJS.

Summary

In this article, we introduced a popular cross-platform HTML5 charts library called ichartjs, presented quick tutorials about how to build column diagram, pie chart and line graph. There are still many other types of charts in this library, you could find them from www.icharjs.com. Besides, if you want to develop android or windows 8 chart applications, Intel XDK is a good option for you. ichartjs run perfect with Intel XDK. Go to xdk-software.intel.com, there are plenty of demos and tutorials about building HTML5 applications with external libraries.

Reference

1.    www.ichartjs.com

2.    xdk-software.intel.com

3.    http://www.ichartjs.com/docs/en/

4.    http://www.ichartjs.com/samples/index.html