Share your knowledge
One Minute Guide
1.Installation

Working with ichartjs is purposefully easy, You need to include the following files in your web page.yes,that's all.

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

2.Overview

This is a simple example,show a Hello world in my way.the height of each letter is the position itself in alphabet.so,show it.

3.Preview

Let's see the impression drawing we do,hoping to attract you.following image show the final chart.

hello world

4.JavaScript code
	//define 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(){	
		var chart = new iChart.Column2D({
			render : 'canvasDiv',//render to a div that id is 'canvasDiv'
			data: data,//binding data
			title : 'Hello World\'s Height In Alphabet',//setting title
			width : 800,//setting width in pixels
			height : 400,//setting width in pixels
			coordinate:{//setting customize coordinate
				scale:[{//setting customize value axis
					 position:'left',//	
					 start_scale:0,//setting start scale is 0
					 end_scale:26,//setting end scale is 26
					 scale_space:2,//setting space of scale
					 listeners:{//setting event
						parseText:function(t,x,y){//parse text on axis
							return {text:t+" cm"}
						}
					}
				}]
			}
		});
		//invoke
		chart.draw();
	});
	
	//Html
	<div id='canvasDiv'></div>
 
5.Summarize

As a primary guide document,it just show how to working with ichartjs,For more options you can reference the Api.

6.Related resource

1).Hello World-src

2).ichartjs1.0 User Guide Simplified Chinese

3).Design Online