title: ReDraw AMChart on dropdown select
body: <p>What is the best way to redraw a line graph when selecting an option from a dropdown? You can see I have 3 variables that match up to the 3 options in my dropdown but I cant figure out how to change the dataProvider and redraw the chart when I select a different option.</p>
  
  <h3>View</h3>
  
  <pre><code>&lt;select id="selectAccountSelect" class="form-control"&gt;
        &lt;option id="1" selected="selected" value="1"&gt;Account 1&lt;/option&gt;
        &lt;option id="2" value="2"&gt;Account 2&lt;/option&gt;
        &lt;option id="3" value="3"&gt;Account 3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>var account1 = [
  {
      "date": "2014-01-01",
      "acc1": 80,
      "acc2": 40
  },
  {
      "date": "2014-02-01",
      "acc1": 72,
      "acc2": 20
  },
  {
      "date": "2014-03-01",
      "acc1": 80,
      "acc2": 30
  },
  {
      "date": "2014-06-01",
      "acc1": 20,
      "acc2": 80
  }
  ];
  
  var account2 = [
  {
      "date": "2014-02-01",
      "acc1": 54,
      "acc2": 20
  },
  
  {
      "date": "2014-04-01",
      "acc1": 60,
      "acc2": 60
  },
  {
      "date": "2014-05-01",
      "acc1": 50,
      "acc2": 40
  },
  {
      "date": "2014-06-01",
      "acc1": 18,
      "acc2": 56
  }
  ];
  
  var account3 = [
  {
      "date": "2014-01-01",
      "acc1": 40,
      "acc2": 20
  },
  {
      "date": "2014-02-01",
      "acc1": 35,
      "acc2": 20
  },
  {
      "date": "2014-03-01",
      "acc1": 60,
      "acc2": 40
  },
  {
      "date": "2014-04-01",
      "acc1": 50,
      "acc2": 30
  },
  {
      "date": "2014-05-01",
      "acc1": 25,
      "acc2": 50
  },
  {
      "date": "2014-06-01",
      "acc1": 25,
      "acc2": 60
  }
  ];
  
  AmCharts.ready(function () {
      var chart = new AmCharts.AmSerialChart();
      chart.dataProvider = account1; //Change this variable
      chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
      chart.categoryField = "date";
      chart.dataDateFormat = "YYYY-MM-DD";
  
      chart.autoMargins = false;
      chart.marginRight = 0;
      chart.marginLeft = 30;
      chart.marginBottom = 20;
      chart.marginTop = 20;
  
      var categoryAxis = chart.categoryAxis;
      categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
      categoryAxis.minPeriod = "MM"; // our data is daily, so we set minPeriod to DD
      categoryAxis.inside = false;
      categoryAxis.gridAlpha = 0;
      categoryAxis.tickLength = 0;
      categoryAxis.axisAlpha = 0;
  
      var valueAxis = new AmCharts.ValueAxis();
      valueAxis.dashLength = 1;
      valueAxis.axisColor = "#DADADA";
      valueAxis.axisAlpha = 1;
      chart.addValueAxis(valueAxis);
  
      var graph = new AmCharts.AmGraph();
      graph.type = "line";
      graph.valueField = "acc1";
      graph.lineColor = "#60c6cf";
      graph.lineThickness = 3;
      graph.bullet = "round";
      graph.bulletColor = "#60c6cf";
      graph.bulletBorderColor = "#ffffff";
      graph.bulletBorderAlpha = 1;
      graph.bulletBorderThickness = 3;
      graph.bulletSize = 12;
      chart.addGraph(graph);
  
      var graph1 = new AmCharts.AmGraph();
      graph1.type = "line";
      graph1.valueField = "acc2";
      graph1.lineColor = "#f35958";
      graph1.lineThickness = 3;
      graph1.bullet = "round";
      graph1.bulletColor = "#f35958";
      graph1.bulletBorderColor = "#ffffff";
      graph1.bulletBorderAlpha = 1;
      graph1.bulletBorderThickness = 3;
      graph1.bulletSize = 12;
      chart.addGraph(graph1);
  
      var chartCursor = new AmCharts.ChartCursor();
      chart.addChartCursor(chartCursor);
  
      chart.write("chartdiv");
  });
  </code></pre>