title: Chartsjs update datasets with dropdown
body: <p>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?</p>
  
  <p>Here is what I already got:</p>
  
  <p><strong>Dropdown:</strong></p>
  
  <pre><code>&lt;select class="form-control browser-default dropdown" id="dd"&gt;
      &lt;option value="" selected="selected"&gt;Select Serial Number&lt;/option&gt;
      &lt;option value="dps1"&gt;DataPoints 1&lt;/option&gt;
      &lt;option value="dps2"&gt;DataPoints 2&lt;/option&gt;
      &lt;option value="dps3"&gt;DataPoints 3&lt;/option&gt;
      &lt;option value="dps4"&gt;DataPoints 4&lt;/option&gt;
      &lt;option value="dps5"&gt;DataPoints 5&lt;/option&gt;
  &lt;/select&gt;
  &lt;canvas id="myChart2"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>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: &lt;?php echo json_encode($json1); ?&gt;,
          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();
  });
  </code></pre>
  
  <p>Note: <code>&lt;?PHP echo json_encode($json1); ?&gt;</code> 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.</p>
  
  <p>Here's the canvasjs example: <a href="http://jsfiddle.net/canvasjs/583zwth5/" rel="nofollow noreferrer">canvasjs</a></p>