This Javascript module is a chart related library.
It was originally created for business needs,
but has been extended for general use.
Samples
The source is in my github repository.
GITHUB
MIT license.
------------
Bar Graph
<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id="BarGraph" style="height: 300; width: 500;">
</div>
<div id="tblBarGraph">
</div>
<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>
label1 723 label2 37 label3 127 label4 25 label5 809 label6 610
| label1 | 723 | ||
| label2 | 37 | ||
| label3 | 127 | ||
| label4 | 25 | ||
| label5 | 809 | ||
| label6 | 610 |
Line Graph
<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id="LineGraph" style="height: 300; width: 500;">
</div>
<div id="tblLineGraph">
</div>
<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>
Label1. Label2 Label3 Label4
<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id="LineGraph2" style="height: 300; width: 500;">
</div>
<div id="tblLineGraph2">
</div>
<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>
Label1. Label2 Label3 Label4
| Label1. | ||
| Label2 | ||
| Label3 | ||
| Label4 |
| Label1. | ||
| Label2 | ||
| Label3 | ||
| Label4 |
Pie Graph
<script src="https://truemaxdh.github.io/simpleGraph.js/simpleGraph.js">
</script>
<div id='PieGraph' style="width:300; height:300;"></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>
label1 163 label2 21 label3 3 label4 15 label5 25 label6 55
| label1 | 163 | ||
| label2 | 21 | ||
| label3 | 3 | ||
| label4 | 15 | ||
| label5 | 25 | ||
| label6 | 55 |
댓글 없음:
댓글 쓰기