You must Sign In to post a response.
  • Category: ASP.NET

    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
    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
    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
    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.!


Sign In to post your comments