Author: | bigbird231 |
---|---|
Views Total: | 704 views |
Official Page: | Go to website |
Last Update: | February 23, 2017 |
License: | MIT |
Preview:

Description:
moChart is a handy yet highly customizable chart library that lets you render line chart, bar chart, circle chart and triangle chart on HTML5 canvas element.
How to use it:
Just load the moChart JS library into the document and we’re ready to go.
<script src="moChart.js"></script>
Render line and circle chart in the same container element.
<div id="main"></div>
var painter=moChart.getPainter(document.getElementById("main"),["line","circle"]); value1=[-9,-12,-8,-14,17,20,20,19,17,20,14,9,12,8,14,17,20,20,19,17,20,14,20,14,17,20,20,19]; value2=[-12,14,-13,5,-40,-11,15,20,4,5,12,3,14,0]; value3=[-1,-3,-8,24,35,22,17,6,-2,0,15,23]; value4=[-2,-4,-3,-1,9,12,8,13,-4,5,6,7,4,2,-3,-9,-12,0,2,4,6,7]; var lineOption={ layout:{a:0.1,b:0.45,c:0.2,d:0.05}, animate:"flow", xLabel:{ start:"20160101", end:"20160101" }, items:[ {value:value1,color:"red"}, {value:value2,color:"blue"}, {value:value3,color:"yellow"}, {value:value4,color:"black"} ], }; painter.lineControl.setOption(lineOption); var circleOption={ layout:{a:0,b:0,c:0,d:0.5}, animate:"flow", items:[ [{ showText:[{value:"786",fontColor:"#000",fontSize:"36"}, {value:"abcd",fontColor:"#000",fontSize:"36"}], type:"stroke", color:"#abc", lineWidth:20, r:0.15, startAngle:0, endAngle:360 },{ type:"fill", color:"#def", r:0.1, startAngle:0, endAngle:360 }],[{ showText:[{value:"87%"}], type:"stroke", color:"#7bd", lineWidth:20, r:0.15, startAngle:0, endAngle:90 },{ type:"stroke", lineWidth:20, color:"#fea", r:0.15, startAngle:90, endAngle:180 },{ lineWidth:20, color:"#fdf", r:0.15, startAngle:180, endAngle:270 },{ lineWidth:20, color:"#787", r:0.15, startAngle:270, endAngle:360 }] ] }; painter.circleControl.setOption(circleOption);
Render a triangle chart in a given element.
<div id="bar"></div>
var barValue=[-1,-3,8,-6,7,-5,2,-4]; var xValue=["Text 1","Text 2","Text 3","Text 4","Text 5","Text 6","Text 7","Text 8"]; var barPainter=moChart.getPainter(document.getElementById("bar"),["bar"]); var barOption={ layout:{a:0.1,b:0.1,c:0.2,d:0.05}, animate:"flow", xLabel:{ value:xValue }, yLabel:{ mark:"%" }, grid:"dotted", items:[ { showValue:{show:true}, //switch type to "bar" type:"triangle", colorList:["#fa5d5d","#4a90e2","#35c2db","#f2c068"], value:barValue } ] }; barPainter.barControl.setOption(barOption);
Draw the charts:
moChart.draw();