Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </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>
 
​
 
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();
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers