Populate (Bind) Google Gauge chart from Database using Google API in ASP.Net

Hi Waghuldey,

Check this example. Now please take its reference and correct your code.

HTML

ContentPage

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['gauge'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([['Target Completed', 85]], true);
            var options = {
                width: 200,
                height: 220,
                redFrom: 90,
                redTo: 100,
                yellowFrom: 75,
                yellowTo: 90,
                minorTicks: 10
            };
            var chart = new google.visualization.Gauge(document.getElementById('dvChart'));
            chart.draw(data, options);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div id="dvChart"></div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

Screenshot

thanks @dharmendr

I've use this code its working with static value but i want to pass value on button click from Database or calculated value from backend.

Hi Waghuldey,

Refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['gauge'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var data = google.visualization.arrayToDataTable([['Target Completed', response.d[0]]], true);
                var options = {
                    width: 200,
                    height: 220,
                    redFrom: 90,
                    redTo: 100,
                    yellowFrom: 75,
                    yellowTo: 90,
                    minorTicks: 10
                };
                var chart = new google.visualization.Gauge(document.getElementById('dvChart'));
                chart.draw(data, options);
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }        
</script>
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="dvChart">
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Code

C#

[System.Web.Services.WebMethod]
public static int[] GetData()
{
    // Get data from database.
    int[] data = { 85 };
    return data;
}

VB.Net

<System.Web.Services.WebMethod()>
Public Shared Function GetData() As Integer()
    ' Get data from database.
    Dim data As Integer() = {85}
    Return data
End Function

Screenshot