How to display multiple canvas charts?

Question

JavaScript

Maybe someone installed Canvas graphics on the site? Tell me, I can not display several graphs at the same time. Only one graph is displayed.
I connect graphics from an external js file, or insert between head - it's useless.

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

I connect these two scripts from an external file or between head (they are identical, the only difference is in the color of the graphs and values.):

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();
}

Answer 1

First, you set one window.onload, and then overridden it, naturally, when the load event did occur, only the second one worked.