2 canvasjs chart in one pageproblem,

Question

2 canvasjs chart in one pageproblem,

2.4k views Asked by Kody Chang At 23 October 2024 at 16:37

i tried to put 2 Canvasjs chart in one html page. i have included jquery, and it works when i put only one chart div, once i add second chart, it show error, only show up one chart.

I want to show 2 or more chart in a page, is it possible?

here's my code. thank you

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="canvas/js/jquery.canvasjs.min.js"></script>
  
  <!FIRST JAVASCRIPT>
  <script type="text/javascript">
      window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer", {
              data: [
              {
                  type: "column",
                  dataPoints: [
                  { x: 10, y: 10 },
                  { x: 20, y: 15 },
                  { x: 30, y: 25 },
                  { x: 40, y: 30 },
                  { x: 50, y: 28 }
                  ]
              }
              ]
          });
 
          chart.render();
      }
  </script>
  <!SECOND JAVASCRIPT>
  <script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer2");

    chart.options.axisY = { prefix: "$", suffix: "K" };
    chart.options.title = { text: "Fruits sold in First & Second Quarter" };

    var series1 = { //dataSeries - first quarter
        type: "column",
        name: "First Quarter",
        showInLegend: true
    };

    var series2 = { //dataSeries - second quarter
        type: "column",
        name: "Second Quarter",
        showInLegend: true
    };

    chart.options.data = [];
    chart.options.data.push(series1);
    chart.options.data.push(series2);


    series1.dataPoints = [
            { label: "banana", y: 18 },
            { label: "orange", y: 29 },
            { label: "apple", y: 40 },
            { label: "mango", y: 34 },
            { label: "grape", y: 24 }
    ];

    series2.dataPoints = [
        { label: "banana", y: 23 },
        { label: "orange", y: 33 },
        { label: "apple", y: 48 },
        { label: "mango", y: 37 },
        { label: "grape", y: 20 }
    ];

    chart.render();
}
</script>
  
  
  
  
</head>
 
<body>
  <!FIRST CHART SHOW>
  <div id="chartContainer1" style="height: 500px; width: 50%;"></div>
  <!SECOND CHART SHOW>
  <div id="chartContainer2" style="height: 500px; width: 50%;"></div>
  
  
</body>
</html>

Original Q&A

There are 1 answers

**Dhiraj** · Answer 1 · 2015-06-24 02:08:22

Firstly, you don't need two window.onload functions. The second onload function will override the first one. So just have one and include both the charts code in the one of them.

Also, the first chart being created requires an element with id as chartContainer which is not present in the DOM. Replace that with chartContainer1.

Replace

var chart = new CanvasJS.Chart("chartContainer", {...});

with

var chart = new CanvasJS.Chart("chartContainer1", {...});

Instead of using one variable chart for both the charts use two variables so that the variable is not overridden. Something like this

window.onload = function(){
  var chart1 = new CanvasJS.Chart("chartContainer1", {
    data: [{
      type: "column",
      dataPoints: [{
        x: 10,
        y: 10
      }, {
        x: 20,
        y: 15
      }, {
        x: 30,
        y: 25
      }, {
        x: 40,
        y: 30
      }, {
        x: 50,
        y: 28
      }]
    }]
  });

  chart1.render();

  var chart2 = new CanvasJS.Chart("chartContainer2");

  chart2.options.axisY = {
    prefix: "$",
    suffix: "K"
  };
  chart2.options.title = {
    text: "Fruits sold in First & Second Quarter"
  };

  var series1 = { //dataSeries - first quarter
    type: "column",
    name: "First Quarter",
    showInLegend: true
  };

  var series2 = { //dataSeries - second quarter
    type: "column",
    name: "Second Quarter",
    showInLegend: true
  };

  chart2.options.data = [];
  chart2.options.data.push(series1);
  chart2.options.data.push(series2);


  series1.dataPoints = [{
    label: "banana",
    y: 18
  }, {
    label: "orange",
    y: 29
  }, {
    label: "apple",
    y: 40
  }, {
    label: "mango",
    y: 34
  }, {
    label: "grape",
    y: 24
  }];

  series2.dataPoints = [{
    label: "banana",
    y: 23
  }, {
    label: "orange",
    y: 33
  }, {
    label: "apple",
    y: 48
  }, {
    label: "mango",
    y: 37
  }, {
    label: "grape",
    y: 20
  }];

  chart2.render();
};

Here is a demo http://jsbin.com/rocusuhevo/edit?html,js,output

TechQA.

2 canvasjs chart in one pageproblem,

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CHARTS

Related Questions in CANVASJS

Popular Questions

Popular Tags

Trending Questions