Chart.js Tests

by Lautaro

HTML

<header>
    <title>World population</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <h1>Chart.js Tests</h1>
</header>

<body>
    <button onclick="changeDataSet()">Change Data set</button>
	<button onclick="addData()">Add Data</button>
    <canvas id="myChart" width="1600" height="900"></canvas>
</body>

JavaScript

//opcion no wrap - in body, el cĂłdigo tiene que estar en body para que
//reconozca tanto el id del canvas como el llamado de onclick
var ctx = document.getElementById('myChart').getContext('2d');
var index = 0;
var dataset1 = {
    label: "My First dataset",
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.4)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
};
var dataset2 = {
    label: "My Seconds dataset",
    fill: true,
    backgroundColor: 'rgba(99, 255, 132, 0.4)',
    borderColor: 'rgb(99,255,132)',
    data: [10, 0, 2, 5, 30, 20, 45],
};
var dataset3 = {
    label: "My third dataset",
    fill: true,
    backgroundColor: 'rgba(99, 132, 255, 0.4)',
    borderColor: 'rgb(99,132,255)',
    data: [45, 20, 30, 5, 2, 0, 10],
};
var datasets = [dataset1, dataset2, dataset3];
var currentDataSet = datasets[0];
var chart = new Chart(ctx, {
    type: 'line',
    // The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [currentDataSet]
    }
});

function changeDataSet() {
    //currentDataSet = datasets[(++index) % 3];
	//currentDataSet = dataset2;
	chart.data.datasets.pop();
	chart.data.datasets.push(datasets[++index % datasets.length])
	chart.update();
}

function addData(){
	chart.data.labels.push("August");
	currentDataSet.data.push(Math.random() * 100);
	chart.update();
}