Simple Lightweight HTML5 Chart JavaScript Library – moChart

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();