Spline Chart from External JSON File - CanvasJS JavaScript Charts

Spline Chart from External JSON File - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart-container">
  <canvas id="mycanvas"></canvas>
</div>

CSS

#chart-container {
  width: 640px;
  height: auto;
}

JavaScript

$(document).ready(function() {
  $.ajax({
    url: "https://api.npoint.io/c6081bf2608d7a9738bc",
    method: "GET",
    dataType: 'json',
    success: function(data) {
      console.log(data);

      var chart = new CanvasJS.Chart("chart-container", {
        animationEnabled: true,

        title: {
          text: "Temp stats"
        },

        axisY: {
          title: "Temperature",
          valueFormatString: "##.##"
        },

        data: [{
          type: "spline",
          markerSize: 5,
          xValueFormatString: "YYYY-MM-DD HH:mm:ss",
          yValueFormatString: "##.##",
          xValueType: "dateTime",
          dataPoints: data
        }]
      });

      chart.render();
    },
    error: function(data) {
      console.log(data);
    }
  });
})