<div id="myChart">
  
  <select id="chart-selector" name="chart-selector">
    
    <option value="">Please Select An Option</option>
    <option value="0">0</option>
    <option value="1">1</option>
    
  </select>
  
</div>
#myChart {
  height: 600px;
  width: 600px;
  margin: 0 auto;
}
// Create mock data
var firstDataSet = [0, 2, 4, 6, 8, 10, 12, 14];
var secondDataSet = [0, 1, 2, 3, 4, 5, 6, 7];

// Create chart
var myConfig = {
  type: 'line',
  plot: {
 	  animation:{
 	    effect: 4,
 	    method: 0,
      speed: 500,
 	    sequence: 1
 	  }
 	},
  scaleY: {
    values: '0:14:2'
  },
  series: [
    {
      values: null
    }
  ]
};

zingchart.render({
  id: 'myChart',
  data: myConfig
});

// Grab <select> element from the DOM
var select = document.querySelector('select[name="chart-selector"]');

// Add event listener to fire on each selection
select.addEventListener('change', function() {
  if (event.target.value == '0') {
    zingchart.exec('myChart', 'setseriesvalues', {
      plotindex: 0,
      values: firstDataSet
    });
  } else if (event.target.value == '1') {
    zingchart.exec('myChart', 'setseriesvalues', {
      plotindex: 0,
      values: secondDataSet
    });
  } else {
    alert('Please Select An Option');
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.zingchart.com/zingchart.min.js