Как вывести несколько графиков Canvas?

Question

[s-zhura]

Может кто устанавливал на сайте графики Canvas? Подскажите, не могу вывести несколько графиков одновременно. Отображается только один график.
Подключаю графики из внешнего файла js, либо вставляю между head - бесполезно.

На странице вывожу так: <div id="chartContainer"></div> и <div id="chartContainer-2"></div>

Подключаю из внешнего файла или между head вот эти два скрипта (они идентичные, разница лишь в цвете графиков и значениях.):

window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer-2", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#61B057",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#61B057",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#61B057",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 109.00 },
        { x: new Date(2017,06,03), y: 326.00 },
        { x: new Date(2017,06,04), y: 724.00 },
      { x: new Date(2017,06,05), y: 624.00 },
      { x: new Date(2017,06,06), y: 571.00 },
        { x: new Date(2017,06,07), y: 601.00 },
        { x: new Date(2017,06,08), y: 364.00 },
        { x: new Date(2017,06,09), y: 514.00 },
        { x: new Date(2017,06,10), y: 765.00 },
      { x: new Date(2017,06,11), y: 909.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1179.00 },
        { x: new Date(2017,06,18), y: 1182.00 },
      { x: new Date(2017,06,19), y: 989.00 },
        { x: new Date(2017,06,20), y: 1009.00 }
        ]
      }
      ]
    });
chart.render();
}  

window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#337ba7",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#337ba7",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#337ba7",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 409.00 },
        { x: new Date(2017,06,03), y: 526.00 },
        { x: new Date(2017,06,04), y: 624.00 },
    { x: new Date(2017,06,05), y: 624.00 },
    { x: new Date(2017,06,06), y: 871.00 },
        { x: new Date(2017,06,07), y: 901.00 },
        { x: new Date(2017,06,08), y: 964.00 },
        { x: new Date(2017,06,09), y: 914.00 },
        { x: new Date(2017,06,10), y: 1065.00 },
    { x: new Date(2017,06,11), y: 1109.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1239.00 },
        { x: new Date(2017,06,18), y: 1382.00 },
    { x: new Date(2017,06,19), y: 1419.00 },
        { x: new Date(2017,06,20), y: 1419.00 }
        ]
      }
      ]
    });
chart.render();
}

Comments

[Kovalsky]

Так вы же в предыдущем вопросе сказали, что у вас в итоге всё получилось, нет?

Answer 1

[alvvi]

Сначала вы задали один window.onload, а потом его переопредилили, естественно, когда событие load таки произошло сработал только второй.

Comments

[s-zhura]

Подскажите, пожалуйста, решение. Сам не разберусь или убью очень много времени на изучение вопроса, а я ведь не хочу быть программистом, мне просто нужны графики.

[alvvi]

s-zhura:

window.addEventListener('load', function() {
  var chart1 = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#337ba7",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#337ba7",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#337ba7",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 409.00 },
        { x: new Date(2017,06,03), y: 526.00 },
        { x: new Date(2017,06,04), y: 624.00 },
    { x: new Date(2017,06,05), y: 624.00 },
    { x: new Date(2017,06,06), y: 871.00 },
        { x: new Date(2017,06,07), y: 901.00 },
        { x: new Date(2017,06,08), y: 964.00 },
        { x: new Date(2017,06,09), y: 914.00 },
        { x: new Date(2017,06,10), y: 1065.00 },
    { x: new Date(2017,06,11), y: 1109.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1239.00 },
        { x: new Date(2017,06,18), y: 1382.00 },
    { x: new Date(2017,06,19), y: 1419.00 },
        { x: new Date(2017,06,20), y: 1419.00 }
        ]
      }
      ]
    });
	
  var chart2 = new CanvasJS.Chart("chartContainer-2", {
      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
      gridColor: "#DDD",
      gridThickness: 1,
      gridDashType: "dot",
      tickThickness: 1,
      interval: 250,
        maximum: 1900
      },
     axisX:{      
            valueFormatString: "DD-MM-YY",
         gridColor: "#DDD",
         gridDashType: "dot",
         tickThickness: 1,
         gridThickness: 1
      },
    toolTip: {
        borderColor: "#61B057",
      backgroundColor: "#fbfbfb",
      borderThickness: 2,
      cornerRadius: 3,
      fontStyle: "normal",
      fontFamily: "tahoma"
      },
    data: [
      {
        type: "spline",
        markerSize: 8,
      markerColor: "#61B057",
      markerBorderColor: "#FFF",
        markerBorderThickness: 1,
      lineColor: "#61B057",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 109.00 },
        { x: new Date(2017,06,03), y: 326.00 },
        { x: new Date(2017,06,04), y: 724.00 },
      { x: new Date(2017,06,05), y: 624.00 },
      { x: new Date(2017,06,06), y: 571.00 },
        { x: new Date(2017,06,07), y: 601.00 },
        { x: new Date(2017,06,08), y: 364.00 },
        { x: new Date(2017,06,09), y: 514.00 },
        { x: new Date(2017,06,10), y: 765.00 },
      { x: new Date(2017,06,11), y: 909.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1179.00 },
        { x: new Date(2017,06,18), y: 1182.00 },
      { x: new Date(2017,06,19), y: 989.00 },
        { x: new Date(2017,06,20), y: 1009.00 }
        ]
      }
      ]
    });
		
    chart1.render();
    chart2.render();

});