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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  
  <!-- Chart.js Bundle -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
​
  <canvas id="myChart" width="100%" height="100%"></canvas>
  
</body>
</html>
 
function drawLineChart() {
​
var dates = [];
var clientCosts = [];
var data = [{
  "date": "2015-10",
  "clientCostsTotal": "0.00"
}, {
  "date": "2015-11",
  "clientCostsTotal": "0.00"
}, {
  "date": "2016-01",
  "clientCostsTotal": "0.00"
}, {
  "date": "2016-02",
  "clientCostsTotal": "0.00"
}, {
  "date": "2016-03",
  "clientCostsTotal": "0.00"
}, {
  "date": "2016-04",
  "clientCostsTotal": "27962.50"
}, {
  "date": "2016-05",
  "clientCostsTotal": "174060.00"
}, {
  "date": "2016-06",
  "clientCostsTotal": "309000.00"
}, {
  "date": "2016-07",
  "clientCostsTotal": "502261.50"
}, {
  "date": "2016-08",
  "clientCostsTotal": "7598.00"
}, {
  "date": "2016-12",
  "clientCostsTotal": "0.00"
}];
​
data.forEach(function(item) {
  dates.push(item.date);
  clientCosts.push(item.clientCostsTotal);
});
​
console.log(dates, clientCosts);
​
    var chartData = {
        labels: dates,
        datasets: [{
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: clientCosts
        }]
    };
​
    // Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
​
    // Instantiate a new chart
    var myChart = new Chart(ctx, {
        responsive: true,
        type: 'line',
        data: chartData,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}
​
drawLineChart();
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers