Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
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="trolley-turning-graph" style="height: 360px; width: 100%;"></div>
JavaScript
chartTurning = new CanvasJS.Chart("trolley-turning-graph", {
title: {
text: "Turning"
},
zoomEnabled: true,
zoomType: "xy",
exportEnabled: true,
axisY: {
minimum: -50,
maximum: 50,
title: 'Turning',
titleFontSize: 20,
stripLines: [
{
value: 38,
color: '#222'
},
{
value: 45,
color: '#222'
},
{
value: -38,
color: '#222'
},
{
value: -45,
color: '#222'
}
],
gridThickness: 1
},
axisX: {
title: 'Time [Days|Hours]',
titleFontSize: 20,
labelFormatter: function (e) {
return "";
}
},
toolTip: {
contentFormatter: function (e) {
return "";
}
},
data: [
{
type: "line",
markerSize: 7,
dataPoints: [
{"SampleTime":"21.12.2017 11:23","Label":"00|13|23","y":-2.0,"x":13.389999999999999},{"SampleTime":"21.12.2017 14:10","Label":"00|16|10","y":42.0,"x":16.167777777777776},{"SampleTime":"21.12.2017 16:56","Label":"00|18|56","y":-41.0,"x":18.9425},{"SampleTime":"21.12.2017 20:00","Label":"00|22|00","y":41.0,"x":22.001111111111111},{"SampleTime":"21.12.2017 21:00","Label":"00|23|00","y":-42.0,"x":23.016111111111112},{"SampleTime":"22.12.2017 00:36","Label":"01|02|36","y":39.0,"x":26.607777777777777},{"SampleTime":"22.12.2017 01:44","Label":"01|03|44","y":-40.0,"x":27.744999999999997},{"SampleTime":"22.12.2017...