D3 Examples - charts.js demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <canvas id="graph"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/1.0.2/chart.min.js"></script>
<script id="jsbin-javascript">
var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: "My First dataset",
        fillColor: "rgba(220,2,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 87, 55, 65, 98]
      },
      {
        label: "My Second dataset",
        fillColor: "rgba(20,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 34, 50, 65, 89]
      }
    ]
};
​
​
​
var context = document.querySelector('#graph').getContext('2d');
​
new Chart(context).Bar(data);
</script>
​
​
​
<script id="jsbin-source-javascript" type="text/javascript">
var data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: "My First dataset",
        fillColor: "rgba(220,2,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 87, 55, 65, 98]
      },
      {
        label: "My Second dataset",
        fillColor: "rgba(20,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [32, 34, 50, 65, 89]
      }
    ]
};
​
​
​
var context = document.querySelector('#graph').getContext('2d');
​
new Chart(context).Bar(data);</script></body>
</html>
    