Dynamically generate Google Chart type from Dropdown list

0
votes

I'm using Google Charts on my web application and would like to change the chart displayed using a dropdown list.

The dropdown list stores the chart type in code behind and I'm trying to insert the VB.net variable in the var chart variable.

var chart = new google.visualization.datachart(document.getElementById('chart_div')); chart.draw(data, options);

The value in bold defines which chart gets displayed (ColumnChart, LineChart etc)

How's best to accomplish this?

2
asp.netvb.netgoogle-visualization

2 Answers

0
votes

Simple way is to set the chart according to the one you want to draw:

var chart;
if(chartType== 'LineChart' ){
    chart= new google.visualization.LineChart(document.getElementById('chart_div')); 
}else if(chartType== 'BarChart' ){
    chart= new google.visualization.BarChart(document.getElementById('chart_div')); 
}// and so on

chart.draw(data, options);

For a more dynamic way, you would need to use a chartWrapper, which you can set the chart type with a string, or do:

chartWrapper.setChartType('LineChart');
0
votes

You can handle this a number of different ways. juvian pointed out a couple of them, but if you want something more direct from ASP.net:

var chart = new google.visualization.<%=chartType %>(document.getElementById('chart_div'));

Where chartType is a string that matches a chart type, like "BarChart" or "LineChart".

If you go this route, you should validate the chart type on the server-side so you don't end up trying to access a chart type that doesn't exist.