2 canvasjs chart in one pageproblem,

Question

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>

Answer 1

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

2 canvasjs chart in one pageproblem,

Question

1 answers

solution1
3 2015-06-24 02:08:22

2 canvasjs chart in one pageproblem,

Question

1 answers

solution1 3 2015-06-24 02:08:22

solution1
3 2015-06-24 02:08:22