1

I am having a data that is dynamically generated and I am displaying default using piechart. Now I want to add dropdown selection on selection change the a new chart has to be displayed according the dropdown value.

<select id="charts" onchange="change_Even(event)">
  <option value="" disabled selected>Select Chart Type</option>
  <option value="LineChart">LineChart</option>
  <option value="BarChart">BarChart</option>
  <option value="ColumnChart">ColumnChart</option>
</select>

Now below is my google charts code:

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartdata());

function drawChartdata() {               
  var ex = document.getElementById("dpddashR");
  var clOptions = ex.options[ex.selectedIndex].value;
  var clOptions1 = ex.options[ex.selectedIndex].text;
  var dtf = document.getElementById("frm_date").value;
  var dtt = document.getElementById("to_date").value;

  var link2 = "http://xxx.xxx.x.xx:xx/WAIT.svc/Report";

  var jsonData = $.ajax({
    type: 'GET',
    url: link2,
    data: "Loc_=" + clOptions + "&cli_=" + sess.Id + "&Name_=" + clOptions1 + 
      "&MachineId_=0&frmDate_=" + dtf + "&toDate_=" + dtt + "", dataType: 'json',
  }).done(function (results) {    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'time');
    data.addColumn('number', 'Amount');
    data.addRows(results.length);

    for (i = 0; i < results.length; i++) {
      data.setValue(i, 0, results[i]["time"]);
      data.setValue(i, 1, parseInt(results[i]["Amount"]));
    }

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, { width: 600, height: 240, is3D: true, title: '' }); 
  });
}

So here on selection change the drawChartdata() has to be fired and according to selction it has to display the chat type suppose if use selects pie chart it has to display pie chart, if he selects bar chart it has show bar chart

demongolem
  • 9,474
  • 36
  • 90
  • 105
Madpop
  • 729
  • 4
  • 24
  • 61

1 Answers1

1

use the value of the select to create the chart... 

var chartType = document.getElementById('charts').value;

var chart = new google.visualization[chartType](document.getElementById('piechart'));
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • tried that it is not working var ex = document.getElementById("charts"); var clO = ex.options[ex.selectedIndex].value; var chart = new google.visualization.clO(document.getElementById('hourly_piechart')); – Madpop May 25 '17 at 12:59
  • Check snippet above again, need to use brackets to identify type, can't just use .variable – WhiteHat May 25 '17 at 15:02
  • your solution worked and problem solved – Madpop May 26 '17 at 09:22