Google Charts - passing data as variable in javascript

Question

I am creating a report in a health application using google charts. Due to the way that the application works, I have to define the data for the chart in an XSL document and then use javascript to grab and use that data. I can't run the javascript inline within the XSL - the application blocks it.

The XSL works fine and gives me the following :-

<div id="mydata" style="display:none;">
        [{c:[{v: new Date(2020,3,21)}, {v:94.05}]},
         {c:[{v: new Date(2020,3,29)}, {v:94.3}]},
         {c:[{v: new Date(2020,4,5)}, {v:95}]},]
</div>

My javascript then looks like this:-

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  var mydata=$("#mydata").text()
  var mydata=mydata.replace("},]", "}]");
  var myconfig="{cols: [{id: 'Date', label: 'Date', type: 'date'},{id: 'Weight', label: 'Weight', type:'number'}],rows: " + mydata + "}"


function drawChart() {
    var data = new google.visualization.DataTable(myconfig);



    var options = {
      title: 'Patient Weight',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  }

The problem is that it doesn't work. I get :

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 0
    at JSON.parse (<anonymous>)
    at gvjs_Li (jsapi_compiled_default_module.js:55)
    at new gvjs_L (jsapi_compiled_default_module.js:161)
    at drawChart (<anonymous>:8:20)

If I copy the value out of myconfig and paste it into the google visualisation it works perfectly. This is the resultant myconfig variable:-

 cols: [{id: 'Date', label: 'Date', type: 'date'},{id: 'Weight', label: 'Weight', type:'number'}],rows: 
        [{c:[{v: new Date(2020,3,21)}, {v:94.05}]},{c:[{v: new Date(2020,3,29)}, {v:94.3}]},{c:[{v: new Date(2020,4,5)}, {v:95}]}]}

This is driving me mad .Please help!

UPDATE:

Finally cracked this!!

I put the cols definition into the DIV as well and put quotes around EVERYTHING, removed the "new" as suggested and finally it works!!

I think you have an extra comma near the end of the data defined in your div. — Sebastien
– Sebastien, Commented Apr 30, 2020 at 11:24
this is true, but the .replace in the JS removes it. Apologies - i pasted the wrong javascript (script now corrected) — iainc
– iainc, Commented Apr 30, 2020 at 13:13

WhiteHat · Accepted Answer · 2020-04-30 11:38:18Z

2

I use this approach on occasion, here's what I've found.

the reason it works when you hard-code the data,
you're passing an object to the data table.

but when the data comes from XSL, it is a string.

first, all of the object keys must be wrapped in quotes.
second, you cannot use the new operator on the dates.
you must use google's date string representation

try formatting the data as follows from the XSL...

[{"c":[{"v": "Date(2020,3,21)"}, {"v":94.05}]},
     {"c":[{"v": "Date(2020,3,29)"}, {"v":94.3}]},
     {"c":[{"v": "Date(2020,4,5)"}, {"v":95}]}]

note: about the comma, following is the xsl I use to prevent the last comma...

<xsl:if test="position() != last()">,</xsl:if>

edited Apr 30, 2020 at 11:38

answered Apr 30, 2020 at 11:32

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google Charts - passing data as variable in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related