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

Question

I want to display target completed in percentage using google gauge chart in my solution

dharmendr · Accepted Answer

Hi WaghuldeyCheck this example Now please take its reference and correct your codeHTMLContentPageltaspContent ID34Content134 ContentPlaceHolderID34head34 runat34Server34gt    ltscript type34textjavascript34 src34httpswwwgstaticcomchartsloaderjs34gtltscriptgt    ltscript type34textjavascript34gt        googlechartsload39current39  39packages39 39gauge39         googlechartssetOnLoadCallbackdrawChart        function drawChart             var data  googlevisualizationarrayToDataTable39Target Completed39 85 true            var options                  width 200                height 220                redFrom 90                redTo 100                yellowFrom 75                yellowTo 90                minorTicks 10                        var chart  new googlevisualizationGaugedocumentgetElementById39dvChart39            chartd

pandeyism · Answer

Hi  WaghuldeyRefer below sampleHTMLltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgtltscript type34textjavascript34 src34httpswwwgstaticcomchartsloaderjs34gtltscriptgtltscript type34textjavascript34gt    googlechartsload39current39  39packages39 39gauge39     googlechartssetOnLoadCallbackdrawChart    function drawChart         ajax            type 34POST34            url 34DefaultaspxGetData34            contentType 34applicationjson charsetutf834            dataType 34json34            success function response                 var data  googlevisualizationarrayToDataTable39Target Completed39 responsed0 true                var options                      width 200                    height 220                    redFrom 90

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

Company

Explore

Follow us

Contact Us