Re: BarChart

Daniel LaLiberte

unread,

Oct 4, 2012, 10:38:25 AM10/4/12

to google-c...@googlegroups.com

It appears your 'Inner Mongolia' row is missing a trailing comma.

Unfortunately, this is not a straight up JS syntax error, rather than a more obscure GViz error about the validity of the 2D table, since e.g.

['a', 'b', 'c'] [1, 2]

is syntactically legitimate and returns 'c'. This is because the second [...] is interpreted as array (or property) indexing operation for the first [...] (which happens to be an array), and the '1, 2' is just two comma separated expressions, so the second expression is the result, and (['a', 'b', 'c'])[2] is the third element, or 'c'.

dan

On Wednesday, October 3, 2012 2:39:41 AM UTC-4, UI wrote:

I am using a slider range filter function on a barChart and I am only allowed 15 entries. Is this a technical problem or limitation of the google chart Api.

Code bellow:

/<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['Province', 'Planned', 'Actual'],
          ['Anhui' , 10674, 6477],
          ['Beijing', 2500, 2525],
          ['Chongqing', 6449, 2887],
          ['Fujian', 4234, 2002],
          ['Gansu', 2420, 1555],
          ['Guangdong', 7504, 4570],
	  ['Guangxi', 5002, 2846],
          ['Guizhou', 4544, 1636],
	  ['Hainan', 1564, 1491],
          ['Hebei', 10826, 5716],
          ['Heilongjiang', 8753, 5261],
          ['Henan', 7372, 5795],
          ['Hubei', 5548, 3776],
          ['Hunan', 3180, 3846],
          ['Inner Mongolia', 10489, 4602]
          ['Jiangsu', 13010, 12862],
          ['Jiangxi', 4391, 3194],
          ['Jilin', 5565, 2965],
          ['Liaoning', 12708, 9448],
          ['Ningxia', 1787, 1467],
          ['Qinghai', 835, 643],
	  ['Shaanxi', 3466, 2347],
          ['Shandong', 18165, 12227],
          ['Shanghai', 1100, 1162],
          ['Shanxi', 4730, 1961],
          ['Sichuan', 8160, 6129],
          ['Tianjin', 1740, 2364],
          ['Tibet', 4822, 3788],
          ['Yunnan', 4970, 2929],
          ['Zhejiang', 8240, 6911],
        ]);
      
        // Define a NumberRangeFilter slider control for the 'GDP Growth Rate' column.
        var slider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Planned',
            'minValue': 500,
            'maxValue': 20000
          }
        });
      
        // Define a bar chart
        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'chart1',
          'options': {
            'width': 800,
            'height': 2000,
            'hAxis': {'minValue': 0, 'maxValue': 2000},
            'chartArea': {top: 0, right: 0, bottom: 0}
          }
        });
      
        // Create the dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the slider to affect the bar chart
          bind(slider, barChart).
          // Draw the dashboard
          draw(data);
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control1"></div>
            <div id="control2"></div>
            <div id="control3"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Daniel LaLiberte

unread,

Oct 4, 2012, 2:33:31 PM10/4/12

to google-c...@googlegroups.com

The chart is probably disappearing because the error I mentioned
before is interrupting the generation of the chart. So you need to
correct the missing trailing comma. I.e.

['Hunan', 3180, 3846],
['Inner Mongolia', 10489, 4602]
['Jiangsu', 13010, 12862],

...

should instead be:

['Hunan', 3180, 3846],

['Inner Mongolia', 10489, 4602],

['Jiangsu', 13010, 12862],

...

Regarding Chinese Provinces, you can use GeoChart, as shown in this
chart: http://savedbythegoog.appspot.com/?id=4c4ebf9d3797c0eaaea16b61c70294f836d2cfbd
You can reference them either by the subdivision name or the code both
of which may be found at http://en.wikipedia.org/wiki/ISO_3166-2:CN

dan

On Thu, Oct 4, 2012 at 11:27 AM, UI <marcel...@gmail.com> wrote:
>
> Thanks. I have no problem showing the chart live up to Mongolia but then when I add one entry the Chart disappears. Is there a solution to include the entire list?
>
> The data set has the following variables I am trying to show on one chart if possible:
> "Province" "Planned Housing" "Actually Housing" "Planned Public Housing" "Actual Public Housing"
>
> I split the charts into two:(All housing: actual and planned) and (Public housing: actual and planned) as a temporary solution. My goal will be to link this to an actual China map. This poses another problem because Google Maps has the US States but does not list Chinese Provinces.
>
> Sorry I am new to google charts and HTML.

> --
> You received this message because you are subscribed to the Google Groups "Google Chart API" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/google-chart-api/-/0Se7kMsQpgIJ.
> To post to this group, send email to google-c...@googlegroups.com.
> To unsubscribe from this group, send email to google-chart-a...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-chart-api?hl=en.

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 562D 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

UI

unread,

Oct 4, 2012, 11:37:13 PM10/4/12

to google-c...@googlegroups.com

Many thanks - greatly appreciated.

I am using the following for the map. Unfortunately the display only posts the code (e.g. CN-11) and not the name of the province. Otherwise this is wonderful.

<head>

<title>Google Visualization API Sample</title>

google.load('visualization', '1', {packages: ['geochart']});

function drawVisualization() {

var data = google.visualization.arrayToDataTable([

['Provinces', 'Popularity'],

['CN-11', 600],

['CN-50', 595],

['CN-31', 700],

['CN-53', 500]

]);

var geochart = new google.visualization.GeoChart(

document.getElementById('visualization'));

geochart.draw(data, {width: 556, height: 347, region:"CN", resolution:"provinces"});

}

google.setOnLoadCallback(drawVisualization);

</script>

</head>

</body>

</html>

Reply all

Reply to author

Forward