Chartsjs update datasets with dropdown

Ok, I got a chart.js on my website. Now I try to change between different datasets with a dropdown menu. I got an example of a canvas.js chart and tried to change it for my needs. But I struggle to do it because I don’t understand how to do it with charts. Could someone show me how to do it correctly?

Here is what I already got:

Dropdown:

<select class="form-control browser-default dropdown" id="dd">
    <option value="" selected="selected">Select Serial Number</option>
    <option value="dps1">DataPoints 1</option>
    <option value="dps2">DataPoints 2</option>
    <option value="dps3">DataPoints 3</option>
    <option value="dps4">DataPoints 4</option>
    <option value="dps5">DataPoints 5</option>
</select>
<canvas id="myChart2"></canvas>

Javascript:

var jsonData = {
    "dps1": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 13.58 },
        { "x": "2016-9-25 13:55:01", "y": 15.25 },
        { "x": "2016-10-25 14:00:15", "y": 17.25 },
    ],
    "dps2": [
        { "x": "2016-6-25 12:58:52", "y": 19.99 },
        { "x": "2016-7-25 13:33:23", "y": 21.78 },
        { "x": "2016-8-25 13:49:18", "y": 23.45 },
        { "x": "2016-9-25 13:55:01", "y": 24.73 },
        { "x": "2016-10-25 14:00:15", "y": 26.58 }
    ],
    "dps3": [
        { "x": "2016-6-25 12:58:52", "y": 27.66 },
        { "x": "2016-7-25 13:33:23", "y": 28.68 },
        { "x": "2016-8-25 13:49:18", "y": 30.73 },
        { "x": "2016-9-25 13:55:01", "y": 32.46 },
        { "x": "2016-10-25 14:00:15", "y": 34.79 }
    ],
    "dps4": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 15.25 },
        { "x": "2016-9-25 13:55:01", "y": 19.99 },
        { "x": "2016-10-25 14:00:15", "y": 21.78 }
    ],
    "dps5": [
        { "x": "2016-6-25 12:58:52", "y": 24.73 },
        { "x": "2016-7-25 13:33:23", "y": 26.58 },
        { "x": "2016-8-25 13:49:18", "y": 27.66 },
        { "x": "2016-9-25 13:55:01", "y": 28.68 },
        { "x": "2016-10-25 14:00:15", "y": 32.46 }
    ]}



var dataPoints = [];
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: <?php echo json_encode($json1); ?>,
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: dataPoints,
        }]
    },

    // Configuration options go here
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }
    }
});

$( ".dropdown" ).change(function() {
    chart.data.datasets.data = [];
    var e = document.getElementById("dd");
    var selected = e.options[e.selectedIndex].value;
    dps = jsonData[selected];
    for(var i in dps) {
        chart.data.datasets.data.push({x: dps[i].x, y: dps[i].y});
    }
    chart.update();
});

Note: <?PHP echo json_encode($json1); ?> is currently used to set the data on the x-axis. Those are dates. Later I plan to build the jsonData x and y values dynamically with values from the database but for now, I would just be happy to get the dropdown working with those static values.

Here’s the canvasjs example: canvasjs

Answer

Use this good Tutorial: chart.js Tutorial (And change your code to the chart.js way)

the only thing when a change event is fired via dropdown change, you must call

chart.update()

to make your changes into the chart object to be rendered into the HTML.

Advertisement

Answer