Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by koen_demonie

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

const mockDataPoints = (
   min,
   max,
   start,
   end,
   amount
 ) => {
   let data = [{
       x: new Date(
         start.getTime() +
         Math.random() * (end.getTime() - start.getTime())
       ),
       y: min
     },
     {
       x: new Date(
         start.getTime() +
         Math.random() * (end.getTime() - start.getTime())
       ),
       y: max
     }
   ];

   for (let count = 0; count < amount; count++) {
     const dateTime = new Date(
       start.getTime() + Math.random() * (end.getTime() - start.getTime())
     );
     const value = Math.round(Math.random() * (max - min) + min);
     data.push({
       x: dateTime,
       y: value
     });
   }

   data.sort((a, b) => a.x.getTime() - b.x.getTime());

   return data;
 };

 var chart = new CanvasJS.Chart("chartContainer", {
   axisY: {
     gridColor: "#0000ff",
     gridThickness: 1,
     gridDashType: "solid",
     minimum: 1,
     maximum: 101,
     interval: 10,
   },
   axisY2: {
     gridColor: "#ff0000",
     gridThickness: 1,
     gridDashType: "solid",
     minimum: 0,
     maximum: 200,
     interval: 20,
   },
   data: [{
       type: "line",
       color: "#0000ff",
       dataPoints: mockDataPoints(
         1,
         101,
         new Date(2019, 9, 1),
         new Date(2019, 9, 3),
         5
       )
     },
     {
       type: "line",
       color: "#ff0000",
       axisYType: "secondary",
       dataPoints: mockDataPoints(
         0,
         200,
         new Date(2019, 9, 1),
         new Date(2019, 9, 3),
         5
       )
     }
   ]
 });

 chart.render();