Creating TreeMap using external file. "Failed to find row with id "'null'"

548 views
Skip to first unread message

Kory Clark

unread,
Apr 10, 2017, 6:44:16 PM4/10/17
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.

My data file I call "data.csv" is below:


'Location', 'Parent', 'Market trade volume (size)', 'Market increase/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]

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script src="papaparse.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);
            var alpha = google.visualization.arrayToDataTable(csvdata.data,false);
            console.log(alpha);
            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>



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

Kory
data.csv
index.html

Daniel LaLiberte

unread,
Apr 10, 2017, 10:42:08 PM4/10/17
to Google Visualization API
The null value, being special, has to be unquoted.  But maybe that is a problem for representing with the CSV notation and the parser you are using.  Maybe try the empty string instead, or avoid CSV for now.  Can you use JSON?    https://developers.google.com/chart/interactive/docs/datatables_dataviews#javascriptliteral

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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/02790c2d-1918-4173-a4cd-2fb897d966d5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Message has been deleted
Message has been deleted

Daniel LaLiberte

unread,
Apr 12, 2017, 4:27:35 PM4/12/17
to Google Visualization API
Looks like you have extra quotes on your strings also.  Note that it says " 'Global'", which includes single quotes inside double quotes.  There is also an extra leading space at the beginning.   Here is the code that generated that text:  throw new Error('Failed to find row with id "' + node.getName() + '".');


On Wed, Apr 12, 2017 at 4:21 PM, Kory Clark <int...@openwaterfoundation.org> wrote:
Daniel,

I made the null in the data set unquoted and now it throws the following error:

Failed to find row with id " 'Global'".

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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/d1ab1e01-4d21-46c9-a11e-c0ebcb295c7e%40googlegroups.com.

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

Kory Clark

unread,
Apr 12, 2017, 4:28:14 PM4/12/17
to Google Visualization API
Figured out my issue. The csv file format was incorrect. It should look as follows:

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 'null' data must not have quotes for this to work. I use Papaparse and that parser puts quotes around the null value.

Daniel LaLiberte

unread,
Apr 12, 2017, 4:29:32 PM4/12/17
to Google Visualization API
Instead of null, try an empty string.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, 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/79e7b61f-b051-47cb-a8c5-b7e190c17685%40googlegroups.com.

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

Kory Clark

unread,
Apr 12, 2017, 5:15:13 PM4/12/17
to Google Visualization API
An empty string works, aka "", or just not including a value there works as well.
Reply all
Reply to author
Forward
0 new messages