DataTable "Cannot read properties of undefined" error loading json array in JS

44 views
Skip to first unread message

maxdatabook

unread,
Oct 4, 2022, 1:26:37 PM10/4/22
to Google Visualization API
I took this json DataTable example from Google documentation and save to json DataTest

var jsonDataTest = {
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

But I get an error when I do this:

var data = new google.visualization.DataTable(jsonDataTest);

how do I fix it.  I've tried variation of this tip I've read elsewhere but doesn't work. jsonData = JSON.stringify(eval("(" + jsonDataTest + ")"));

Thanks!

Daniel LaLiberte

unread,
Oct 4, 2022, 1:41:47 PM10/4/22
to google-visua...@googlegroups.com
Your jsonDataTest seems to work fine as is in this jsfiddle:   https://jsfiddle.net/dlaliberte/avdgy4ws/6/
Could you create a jsfiddle that demonstrates the problem you are seeing?

--
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-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/aee17454-0fa3-4d92-a988-a9aaf628babcn%40googlegroups.com.


--

Daniel LaLiberte

 • SWE

 Cambridge MA

 • dlaliberte@Google.com

maxdatabook

unread,
Oct 4, 2022, 2:01:21 PM10/4/22
to Google Visualization API
Thanks Daniel!  You made my day! Now I can go take a walk!  I tried to fix what I had to what you had but it didn't work.  But when I replace my code with yours, from scratch, works perfectly.  There's something I'm screwing up in a general JS way.  Maybe you can see it in this code (which is different than my first stuff, but generally what I think should work).

<body>

<h2>test</h2>
<div id="table_div"></div>
<div id="div_container"></div>

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

function drawTable() {

var jsonDataTest = {
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

// test this function getting called
let ele = document.getElementById('div_container');
ele.innerHTML += JSON.stringify(jsonDataTest); //'Hello, I am Max';

const dt = new google.visualization.DataTable(jsonDataTest);

const chart = new google.visualization.Table(document.getElementById('table_div'));
  chart.draw(dt, {});

//var table = new google.visualization.Table(document.getElementById('table_div'));

// , width: '80%', height: '80%'
table.draw(dt, {showRowNumber: false});
}
// on page load
drawTable();

</script>
 
</body>
</html>

Reply all
Reply to author
Forward
0 new messages