simpleGraph.js
Simple Javascript Graph Module
Sample
simpleGraph.js samples
GitHub
Bar Graph
<![CDATA[<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id='BarGraph' style="max-width:500px;width:100%;height:300px;"></div>
<p id='tblBarGraph'></p>
<script>
var gr = new simpleGraph();
var vals = [723, 37, 127, 25, 809, 610];
var lbls = ['label1', 'label2', 'label3', 'label4', 'label5', 'label6'];
gr.drawBarGraph("BarGraph", lbls, vals);
gr.showColorLabelValueTable("tblBarGraph", lbls, 30, vals);
</script>]]>
Line Graph
<![CDATA[<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id='LineGraph' style="max-width:500px;width:100%;height:300px;"></div>
<p id='tblLineGraph'></p>
<script>
var gr = new simpleGraph();
var lbl_hour = [ '1', '2', '3', '4', '5', '6',];
var vals = [ 56, 56, 54, 55, 55, 51,
56, 83, 71, 33, 2, 18,
0, 0, 0, 0, 0, 3,
0, 0, 0, 0, 15, 0,];
var lbls = [ 'Label1.', 'Label2', 'Label3', 'Label4',];
gr.drawLineGraph("LineGraph", lbl_hour, vals);
gr.showColorLabelTable("tblLineGraph", lbls, 30);
</script>]]>
<![CDATA[<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id='LineGraph2' style="max-width:500px;width:100%;height:300px;"></div>
<p id='tblLineGraph2'></p>
<script>
var gr = new simpleGraph();
var lbl_day = [ '20171201', '20171202', '20171203', '20171204',
'20171205', '20171206', '20171207', '20171208',];
var vals = [ 61, 23, 21, 36, 66, 50, 35, 7,
44, 2, 0, 34, 51, 31, 20, 12,
7, 1, 5, 2, 11, 5, 1, 0,
87, 27, 24, 60,103, 77, 52, 10, ];
var lbls = [ 'Label1.', 'Label2', 'Label3', 'Label4',];
gr.drawLineGraph("LineGraph2", lbl_day, vals,
{rotate : -30, w : 45, h : 40});
gr.showColorLabelTable("tblLineGraph2", lbls, 30);
</script>]]>
Pie Graph
<![CDATA[<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id='PieGraph' style="width:300px;height:300px;"></div>
<p id='tblPieGraph'></p>
<script>
var gr = new simpleGraph();
var vals = [163, 21, 3, 15, 25, 55, ];
var lbls = ['label1', 'label2', 'label3', 'label4', 'label5', 'label6'];
gr.drawPieGraph("PieGraph", vals);
gr.showColorLabelValueTable("tblPieGraph", lbls, 30, vals);
</script>]]>