Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
by katsukino
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var data=[
{
"type": "line",
"showInLegend": true,
"legendText": "AVL_INDEP_TIME(Unknown)",
"name": "AVL_INDEP_TIME(Unknown)",
"toolTipContent": "<span style='\"'color: {color};'\"'>{x}</span>: {y}",yValueFormatString: "#,###.00" + "mm",
"dataPoints": [
{
"x": 0,
"y": 42793.8129591898,
"meaQuantityId": null,
"meaResultId": null,
"nodeName": "AVL_INDEP_TIME",
"nodeType": null,
"y1": null,
"x1": null,
"interval": null,
"yUnitName": null,
"xUnitName": "Unknown",
"isHugeData": null,
"value": null,
"count": 2
},
{
"x": 1,
"y": 42793.8517073958,
"meaQuantityId": null,
"meaResultId": null,
"nodeName": null,
"nodeType": null,
"y1": null,
"x1": null,
"interval": null,
"yUnitName": null,
"xUnitName": null,
"isHugeData": null,
"value": null,
"count": 0
}
],
"color": "#1BCDD1"
},
{
"type": "line",
"showInLegend": true,
"legendText": "AVL_POINT_INFO(Unknown)",
"name": "AVL_POINT_INFO(Unknown)",
"toolTipContent": "<span style='\"'color: {color};'\"'>{name}</span>: {y}",
yValueFormatString: "#,###.00",
"dataPoints": [
{
"x": 0,
"y": 42793.8129558912,
"meaQuantityId": null,
"meaResultId": null,
"nodeName": "AVL_POINT_INFO",
"nodeType": null,
"y1": null,
"x1": null,
"interval": null,
"yUnitName": null,
"xUnitName": "Unknown",
"isHugeData": null,
"value": null,
"count": 2
},
{
"x": 1,
"y": 42793.8129558912,
"meaQuantityId": null,
"meaResultId": null,
"nodeName": null,
"nodeType": null,
"y1": null,
"x1": null,
"interval": null,
"yUnitName": null,
"xUnitName":...