SHARE

Chartli – Interactive Chart Free Download

Chartli – Jquery Interactive Charts Plugin

Create your own interactive line,bar,pie,radar,map,cone,chord e.t.c. chart easily

  • Power Customizable
  • Greatly Examples
  • Save as PNG Images all charts
  • Change chart type easily
  • Change color easily
  • Customizable Map Charts
  • Interactive Chart Elements
  • Included documentation file
      <script type="text/javascript">                  var lineChart= chartli.init(document.getElementById('lineID'));                 var option = {                     ...                 }                 lineChart.setOption(option);      </script>  
  • Chart Datas is only jquery code
 series: [//data options                 {                     name: 'Yahoo',                     type: 'bar',                     stack: 'sum',                     barCategoryGap: '50%',                     itemStyle: {                         normal: {                             color: 'tomato',                             barBorderColor: 'tomato',                             barBorderWidth: 6,                             barBorderRadius: 0,                             label: {                                 show: true, position: 'insideTop'                             }                         }                     },                     data: [260, 200, 220, 120, 100, 80]                 },                 {                     name: 'Forecast',                     type: 'bar',                     stack: 'sum',                     itemStyle: {                         normal: {                             color: '#fff',                             barBorderColor: 'tomato',                             barBorderWidth: 6,                             barBorderRadius: 0,                             label: {                                 show: true,                                 position: 'top',                                 formatter: function (params) {                                     for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {                                         if (option.xAxis[0].data[i] == params.name) {                                             return option.series[0].data[i] + params.value;                                         }                                     }                                 },                                 textStyle: {                                     color: 'tomato'                                 }                             }                         }                     },                     data: [40, 80, 50, 80, 80, 70]                 }             ] 
  • Easily change data values

 
   View Demo     Download

NO COMMENTS

LEAVE A REPLY