Линейная диаграмма CanvasJS с селектором даты и селектором диапазона с использованием Api - PullRequest
Новая
       50

Линейная диаграмма CanvasJS с селектором даты и селектором диапазона с использованием Api

0 голосов
/ 18 октября 2018

Итак, у меня такой код, как здесь: https://jsfiddle.net/canvasjs/zxrkh502/ Но мне нужно поместить данные из ajax / json вместо randomData .Как я могу это сделать? 

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...

Спасибо!

1 Ответ

0 голосов
/ 18 октября 2018

сначала вызовите ajax, создайте массив данных,
, а затем продолжите работу с остальным кодом.

см. Следующий фрагмент ... 

$.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));
  });
}
...