how call gogle chart on button click in Asp.net [Resolved]

Posted by Cpatil1000 under ASP.NET on 5/16/2016 | Points: 10 | Views : 339 | Status : [Member] | Replies : 1
Hi,
I have write some to get gogle chart in asp.net. But is only open on form_load()
event. So how do open this chart on button click.


coding

javascript
==========
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();

data.addColumn('string', 'RWSS');
data.addColumn('number', 'AssetType');

data.addRows(3);

<%= SetVehiclesChartSummary()%>

var chart = new google.visualization.PieChart(document.getElementById('dTrafficChart'));

chart.draw(data, { title: 'Toll Naka Traffic Details', is3D: 'true',tooltip:{text:'value'},pieSliceText:'value' });
}
</script>


c# Coding
========= public string SetURUserChartSummary()
{
int i;

DataTable source;
StringBuilder returnValue;

VehiclesEntity vehiclesEntity;
VehiclesLogic vehiclesLogic;

try
{
returnValue = new StringBuilder();

returnValue = new StringBuilder();

vehiclesEntity = new VehiclesEntity();


vehiclesEntity.Period = "1";
vehiclesEntity.Duration = "";
vehiclesEntity.StartDate = GM.ConvertToDate("03-02-2016");
vehiclesEntity.EndDate = GM.ConvertToDate("15-05-2016");
vehiclesEntity.TollNamePlaza = "Marine park";
vehiclesEntity.Direction = "All";
vehiclesEntity.Journeytype = "All";

vehiclesLogic = new VehiclesLogic();

source = vehiclesLogic.SelectVehicleChartSource(vehiclesEntity);

returnValue.Append("data.addRows(3);");

if (source.Rows.Count > 0)
{
if (source == null) { returnValue = null; return string.Empty; }
if (source.Rows.Count <= 0) { returnValue = null; return string.Empty; }

returnValue.Append("data.setValue(0, 0, 'TRAFFIC');");
returnValue.Append("data.setValue(0, 1, " + source.Rows[0]["TRAFFIC"] + ");");
returnValue.Append("data.setValue(1, 0, 'EXEMPTED');");
returnValue.Append("data.setValue(1, 1, " + source.Rows[0]["EXEMPTED"] + ");");
returnValue.Append("data.setValue(2, 0, 'NONEXEMPTED');");
returnValue.Append("data.setValue(2, 1, " + source.Rows[0]["NONEXEMPTED"] + ");");

return returnValue.ToString();

}

return returnValue.ToString();
}
catch (Exception ex)
{
throw ex;
}
}=




Responses

Posted by: A2H on: 5/17/2016 [Member] [MVP] Bronze | Points: 50

Up
0
Down

Resolved
Instead of calling the function on pageload you can call the drawchart function on button click like below
<input type="button" Value="Load Chart" onclick="drawChart()" />

Your updated Script
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
//Do not call this method on pageload
//google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();

data.addColumn('string', 'RWSS');
data.addColumn('number', 'AssetType');

data.addRows(3);

<%= SetVehiclesChartSummary()%>

var chart = new google.visualization.PieChart(document.getElementById('dTrafficChart'));

chart.draw(data, { title: 'Toll Naka Traffic Details', is3D: 'true', tooltip: { text: 'value' }, pieSliceText: 'value' });
}
</script>



Sample Demo
http://jsbin.com/yaheyaxixi/edit?html,js,output

Thanks,
A2H
My Blog

Cpatil1000, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response