Category: ASP.NET

15 May 2016 21:40

Joined:	10/11/2007
Level:	Silver
Points:	155

Points:	5

How call gogle chart on button click in Asp.net

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;
}
}=

#765925

15 May 2016 22:09

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

you can populate Pie chart, 3D Pie chart and Doughnut chart from database using jQuery AJAX and WebMethods in ASP.Net
use JQuery API from 'ajax.googleapis.com' and 'jsapi' from 'google.com'
see below snippet


<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var options = {
        title: 'USA City Distribution'
    };
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetChartData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data = google.visualization.arrayToDataTable(r.d);
            var chart = new google.visualization.PieChart($("#chart")[0]);
            chart.draw(data, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
}
</script>

see below link
http://www.aspsnippets.com/Articles/Google-Chart-APIs-Google-Pie-Doughnut-Chart-example-with-database-in-ASPNet.aspx

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

#765931

15 May 2016 23:13

Joined:	14/04/2016
Level:	Silver
Points:	118

Points:	4

Hi,
Try this..

<script>

// VISUALIZATION API AND THE PIE CHART PACKAGE.
google.load("visualization", "1", { packages: ["corechart"] });

google.setOnLoadCallback(createPIE);

function createPIE() {

var options = {
title: 'Monthly sale of Books',
colors: ['#888', 'orange'],
is3D: true
};
$('#btnCreateChart').click(function(){
$.ajax({
url: "WebService.asmx/Annual_Sales",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {

var arrValues = [['Month', 'Sales Figure']]; // DEFINE AN ARRAY.
var iCnt = 0;

$.each(data.d, function () {

// POPULATE ARRAY WITH THE EXTRACTED DATA.
arrValues.push([data.d[iCnt].Month, data.d[iCnt].SalesFigure]);
iCnt += 1;

});
});
// CREATE A DataTable AND ADD THE ARRAY (WITH DATA) IN IT.
var figures = google.visualization.arrayToDataTable(arrValues)

// THE TYPE OF CHART (PieChart IN THIS EXAMPLE).
var chart = new google.visualization.PieChart(document.getElementById('b_sale'));

chart.draw(figures, options); // DRAW GRAPH WITH THE DATA AND OPTIONS.

},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>

<input type="button" name="LoadChart" value="LoadChart" id="btnCreateChart"/>
</html>

#765937

16 May 2016 02:31

Joined:	15/12/2015
Level:	Gold
Points:	1308

Points:	4

Hi,
Try This:

WebForm6.aspx Page:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(function ()
{
$('#btnDemo').click(function ()
{
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: 'WebForm6.aspx/GetDataForChart',
data: '{}',
success: function (response)
{
alert(response.d);
return false;
},
error: function ()
{
alert("Error loading data.");
}
});
});
});
</script>
<form id="form1" runat="server">
<asp:Button runat="server" ID="btnDemo" Text="Demo1" />
</form>

WebForm6.aspx.cs page will contain your [WebMethod] named GetDataForChart().
Hope it helps.!

How call gogle chart on button click in Asp.net

About dotnetspider.com

Quick Links

General

Services