Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by jroberts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.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 dateFormats = {
  BASE_FORMAT: "DD MMM",
  ZOOM_FORMAT: "HH:mm"
};

var vm = {
  scaleInfo: {
    "BlackBeltRate": 5,
    "ZeroSpeed": 10,
    "HighRate": 500,
    "LowRate": 250,
    "DaysRemaning": 65,
    "CustomerId": 1,
    "LocationId": 0,
    "ModemId": 20,
    "ScaleId": 10034,
    "LastMeasurement": {
      "InstantaneousRate": 9.871386,
      "AccumulatedWeight": -37.69999,
      "DailyWeight": 140.9051,
      "Speed": 76.958588,
      "AverageRate": -188.8224,
      "Date": 1492275960000,
      "InstantaneousRateUnits": 301,
      "AccumulatedWeightUnits": 103,
      "DailyWeightUnits": 103,
      "SpeedUnits": 201,
      "AverageRateUnits": 301,
      "AverageRateUnitsUnit": "Min",
      "SpeedUnitsUnit": "M",
      "DailyWeightUnitsUnit": "Kgs",
      "AccumulatedWeightUnitsUnit": "Kgs",
      "InstantaneousRateUnitsUnit": "Min",
      "formattedDate": "04/15 17:06"
    },
    "UserId": null,
    "LocationDescription": "Rock Falls",
    "ModbusSlaveAddress": "247",
    "IpAddress": "192.168.1.176",
    "Nickname": "Maloy 1",
    "ScaleDesignator": ".176/247"
  }
};

var dataPoints = [{
      "x": "2017-04-15T20:57:00.000Z",
      "y": 342.0154
    }, {
      "x": "2017-04-15T20:58:00.000Z",
      "y": 333.4498
    }, {
      "x": "2017-04-15T20:59:00.000Z",
      "y": -134.1279
    }, {
      "x": "2017-04-15T21:00:00.000Z",
      "y": -189.4591
    }, {
      "x": "2017-04-15T21:01:00.000Z",
      "y": -13.9746
    }, {
      "x": "2017-04-15T21:02:00.000Z",
      "y": 279.3058
    }, {
      "x": "2017-04-15T21:03:00.000Z",
      "y": 307.4864
    }, {
      "x": "2017-04-15T21:04:00.000Z",
      "y": 376.7368
    }, {
      "x": "2017-04-15T21:05:00.000Z",
      "y": 273.442
    }, {
      "x": "2017-04-15T21:06:00.000Z",
      "y": -188.8224
    }];
    
var values = dataPoints.map((item) => item.y);
dataPoints = dataPoints.map((item) => {
	return {
  	x: new Date(item.x),
    y: item.y
  }
});

var min = _.min(values);
var max =...