Re: load line chart dynamically when pressing a button

444 views

Skip to first unread message

Message has been deleted

mee_

unread,

Jun 20, 2012, 11:05:22 AM6/20/12

to google-c...@googlegroups.com

u have to include:

    <script type="text/javascript">
    google.load('visualization', '1', {packages: ['gauge']});
    </script>

Am Mittwoch, 20. Juni 2012 14:55:07 UTC+2 schrieb Neamat Tazi:

I'm trying to use the same example as the one available with interaction examples on google code site but the chart is not displayed at all. The following is my code:
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
    var chart;
    var chartData;
    var chartOptions;
    function drawChart() {


      chartData = google.visualization.arrayToDataTable([
          ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
          ['A',   1,       1,           0.5],
          ['B',   2,       0.5,         1],
          ['C',   4,       1,           0.5],
          ['D',   8,       0.5,         1],
          ['E',   7,       1,           0.5],
          ['F',   7,       0.5,         1],
          ['G',   8,       1,           0.5],
          ['H',   4,       0.5,         1],
          ['I',   2,       1,           0.5],
          ['J',   3.5,     0.5,         1],
          ['K',   3,       1,           0.5],
          ['L',   3.5,     0.5,         1],
          ['M',   1,       1,           0.5],
          ['N',   1,       0.5,         1]
        ]);

      chart = new google.visualization.Gauge(document.getElementById('visualization'));
      chartOptions = {curveType: "function",
                        width: 500, height: 400,
                        vAxis: {maxValue: 10}};
      chart.draw(chartData, chartOptions);
    }

    function changeData() {
      chartData = google.visualization.arrayToDataTable([
          ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
          ['A',   3,       1,           3.5],
          ['B',   2,       2.5,         1],
          ['C',   4,       2,           3.5],
          ['D',   5,       2.5,         1],
          ['E',   7,       2,           3.5],
          ['F',   4,       2.5,         1],
          ['G',   6,       2,           3.5],
          ['H',   2,       0.5,         1],
          ['I',   1,       2,           3.5],
          ['J',   0.5,     0.5,         1],
          ['K',   3,       2,           3.5],
          ['L',   3.5,     0.5,         1],
          ['M',   1,       2,           3.5],
          ['N',   1,       0.5,         1]
        ]);
      chart.draw(chartData, chartOptions);
    }


    google.setOnLoadCallback(drawChart);
    </script>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div id="visualization" ></div>
    <input type="button" value="Change Data" onclick="changeData()" />

</body>

Please help.
Neamat

Reply all

Reply to author

Forward

0 new messages