Re: Pass parameter to graph?

177 views
Skip to first unread message

asgallant

unread,
Jul 5, 2012, 11:04:39 AM7/5/12
to google-visua...@googlegroups.com
In what respect do you mean "dynamic"?  Do you want a value that gets set every page load, or changes based on user interaction, or gets updated automatically on some time interval?

In the first case, you need to have your server-side scripting insert the correct value into the page in place of "0".  In the second, you need to hook up an event listener on some page element for the user to interact with that updates the DataTable and redraws the chart (see http://jsfiddle.net/asgallant/zYvJn/ as an example).  In the third case, you need to set up the code a bit differently: you need a remote data source that you pull data from.  You can query the remote data source for updates on whatever interval you like.

On Thursday, July 5, 2012 4:40:39 AM UTC-4, Kowalski wrote:
Hi
I have a Visual Studio C# app and I'm showing a Gauge on my site.  But I just would like to change the value in the gauge programmatically and I'm not sure how.
In the sample below I pass the static value of 0 for YTD, but I would like to do this as a parameter or with the C# code behind.

I have a script section in the header...

 <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load('visualization', '1', { packages: ['gauge'] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var BudgetData = google.visualization.arrayToDataTable
            ([
                ['Label', 'Value'],
                ['YTD', 0];

            var options = {
                width: 350, height: 150,
                greenFrom: -40, greenTo: 10,
                minorTicks: 5, majorticks: 2
            };
            //Budget
            var chart = new google.visualization.Gauge(document.getElementById('BudgetGauge'));
            chart.draw(BudgetData, options);
        }
    </script>

And then I show the gauge like:
<div id="BudgetGauge" style="height: 100px;"></div>

How can I make the value of 0 dynamic?
Reply all
Reply to author
Forward
0 new messages