CanvasJS Line Chart with Date Selector & Range Selector Using Api

Question

So, i have a similar code as here: https://jsfiddle.net/canvasjs/zxrkh502/ But i need put data from ajax/json instead of randomData function. How can i do it?

var dps = [];

var chart = new CanvasJS.Chart("chartContainer",
	{
  title: {
  	text: "Chart with Date Selector"
  },
  data: [
		{
    	type: "line",
    	dataPoints: randomData(new Date(2017, 0, 1), 400)
    }
  ]
});
chart.render();

   etc...

Thank You!

Answer 1

make the ajax call first, build the data array,
then continue with the rest of the code.

see following snippet...

$.ajax({
  url: 'http://get-data-url',
  type: 'GET',
  headers: {accept: 'application/json;odata=verbose;'}})
.done(drawChart)
.fail(function (jqXHR, status, errorThrown) {
  console.log('problem loading data: ' + errorThrown);
});

function drawChart(data) {
  var dps = [];

  $.each(data, function (rowIndex, row) {
    dps.push({
      x: row.xValue,
      y: row.yValue
    });
  });

  var chart = new CanvasJS.Chart("chartContainer",
    {
    title: {
      text: "Chart with Date Selector"
    },
    data: [
      {
        type: "line",
        dataPoints: dps
      }
    ]
  });
  chart.render();

  var axisXMin = chart.axisX[0].get("minimum");
  var axisXMax = chart.axisX[0].get("maximum");

  $("#fromDate").val(CanvasJS.formatDate(axisXMin, "DD MMM YYYY"));
  $("#toDate").val(CanvasJS.formatDate(axisXMax, "DD MMM YYYY"));
  $("#fromDate").datepicker({dateFormat: "d M yy"});
  $("#toDate").datepicker({dateFormat: "d M yy"});

  $("#date-selector").change( function() {
    var minValue = $( "#fromDate" ).val();
    var maxValue = $ ( "#toDate" ).val();

    if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
      chart.axisX[0].set("minimum", new Date(minValue));
      chart.axisX[0].set("maximum", new Date(maxValue));
    }
  });

  $(".period").click( function() {
    var period = this.id;
    var minValue;
    minValue = new Date(axisXMax);

    switch(period){
      case "1m":
        minValue.setMonth(minValue.getMonth() - 1);
        break;
      case "3m":
        minValue.setMonth(minValue.getMonth() - 3);
        break;
      case "6m":
        minValue.setMonth(minValue.getMonth() - 6);
        break;
      case "1y":
        minValue.setYear(minValue.getFullYear() - 1);
        break;
      default:
        minValue = axisXMin;
    }

    chart.axisX[0].set("minimum", new Date(minValue));
    chart.axisX[0].set("maximum", new Date(axisXMax));
  });
}