The jschart online chart library
Let's start talking a bit about jschart before trying it...
First, jschart is not free even if a demo version is available. That's not cool, and if you want to know what I think, I would say that google chart api or highcharts seems better and free... But I will test it for you and show how you can play with it and how to quickly create online charts with it. Ok first download the demo version. |
Create bar chart using jschart library
This is the code to genrate a bar chart :
var myData = new Array(['Mon', 2], ['Tue', 6], ['Wed', 3], ['Thu', 4], ['Fri', 2]);
var myChart = new JSChart('bar-graph', 'bar');
myChart.setDataArray(myData);
myChart.setBarColor('#42aBdB');
myChart.setBarOpacity(0.8);
myChart.setBarBorderColor('#D9EDF7');
myChart.setBarValues(false);
myChart.setTitleColor('#8C8383');
myChart.setAxisColor('#777E81');
myChart.setAxisValuesColor('#777E81');
myChart.draw();
You need to define a div with an id calling bar-graph Here's what you get : Loading graph...
|
Create line chart using jschart library
This is the code to genrate a line chart :
var myData = new Array([10, 2], [15, 0], [20, 2], [22, 6], [24, 8], [25, 11], [30, 19], [35, 8]);
var myChart = new JSChart('line-graph', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();
You need to define a div with an id calling line-graph Here's what you get : Loading graph...
|
Create pie chart using jschart library
This is the code to genrate a line chart :
var myData = new Array(['Share 1', 2], ['Share 2', 1], ['Share 3', 6], ['Share 4', 2]);
var colors = ['#FACC00', '#FB1100', '#FB2200', '#FB4822'];
var myChart = new JSChart('pie-graph', 'pie');
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setTitleColor('#857D7D');
myChart.setPieUnitsColor('#9B9B9B');
myChart.setPieValuesColor('#6A0000');
myChart.draw();
You need to define a div with an id calling pie-graph Here's what you get : Loading graph...
|