Problem in generating Treemap using csv file

Sachin Bal

unread,

Nov 21, 2016, 3:06:25 AM11/21/16

to Google Visualization API

Hi,

Can someone point me to an example where a csv file is used instead of hard coding the data for generating a treemap, I am referring to the program in https://developers.google.com/chart/interactive/docs/gallery/treemap .

I am pasting below the program with changes which I have tried to generate the treemap using CSV. Unfortunately, although I am able to load the csv file, the treemap is not getting generated. Instead I get an error - Failed to find row with id "null".

I feel that there is something wrong in the way I am storing the CSV file to arrayData. I am investigating further, but, in case, anyone could help me, it would really be appreciated.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart); 
      var arrayData = new Array();
     $.get("tradevolume.csv", function(csvString) {
        // transform the CSV string into a 2-dimensional array
        arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      });
      function drawChart() {
        var data = google.visualization.arrayToDataTable(arrayData);
        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

A subset of the data file is given below

['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)']
['Global',    null,                 0,                               0]
['America',   'Global',             0,                               0]
['Europe',    'Global',             0,                               0]

Thanks

Sachin

Kory Clark

unread,

Apr 12, 2017, 4:31:19 PM4/12/17

to Google Visualization API

Sachin,

I know this is an older report, but I ran into the same issue. Below is the code that I used to get this to work.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

        <script src="papaparse.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var csvfile = "data.csv";
        $.get(csvfile, function (data) {
            var csvdata = Papa.parse(data, {
              dynamicTyping: true
            });
            csvdata.data[1][1] = null;
            var alpha = google.visualization.arrayToDataTable(csvdata.data,false);

tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

tree.draw(alpha, {

              minColor: '#f00',
              midColor: '#ddd',
              maxColor: '#0d0',
              headerHeight: 15,
              fontColor: 'black',
              showScale: true
            });
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The csv file I used looks like the following:

Location,Parent,Markettradevolume(size),Marketincrease/decrease(color)
Global,null,0,0
America,Global,0,0
Europe,Global,0,0
Asia,Global,0,0
Australia,Global,0,0
Africa,Global,0,0
Brazil,America,11,10
USA,America,52,31
Mexico,America,24,12
Canada,America,16,-23
France,Europe,42,-11
Germany,Europe,31,-2
Sweden,Europe,22,-13
Italy,Europe,17,4
UK,Europe,21,-5
China,Asia,36,4
Japan,Asia,20,-12
India,Asia,40,63
Laos,Asia,4,34
Mongolia,Asia,1,-5
Israel,Asia,12,24
Iran,Asia,18,13
Pakistan,Asia,11,-52
Egypt,Africa,21,0
S.Africa,Africa,30,43
Sudan,Africa,12,2
Congo,Africa,10,12
Zaire,Africa,8,10

The reason you get the row failed error for 'null' is because the null value must not contain quotes with the Google Visualization API. Don't know why they made it like that, but that's what I found out.

Sachin Bal

unread,

Apr 13, 2017, 2:31:56 AM4/13/17

to google-visua...@googlegroups.com

Thanks, Kory

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/GJL1HFmU1fs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8b082890-fafc-4227-8c44-75c89d52ca70%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward