ChartWrapper and ChartEditor confusion.

74 views
Skip to first unread message

Paul Schwartz

unread,
Sep 14, 2015, 7:36:18 PM9/14/15
to Google Visualization API
I am trying to understand the ChartWrapper and ChartEditor objects and I am failing.

Let me explain my problem. I cut and paste the example on the website (below) to an html  file on my on server. I access it and everything is fine. Then I access the datasourceURL  (
http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1) and copy the returned text to another file on my server. 
Then I use that data file for the datasource url and it doesn't load the file. 

Is there some magic I need to do in the data source URL to get it to work? Also, I noticed there is a property called "sig", what is that? 

I am very confused.

Thanks in advance

Paul


<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries! Do not specify any chart types in
  the autoload statement.
-->
<script type="text/javascript"
    src='https://www.google.com/jsapi?autoload={
      "modules":[{
        "name":"visualization",
        "version":"1"
      }]
    }'></script>
<script type="text/javascript">
  google.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

Daniel LaLiberte

unread,
Sep 16, 2015, 8:54:08 AM9/16/15
to Google Visualization API
Paul,

I'd suggest you first try to create a chart that accesses data from a spreadsheet without trying to use the chartwrapper (and charteditor).    See https://developers.google.com/chart/interactive/docs/spreadsheets for the docs on that.   Also try with a simpler query.

Make sure your spreadsheet is publicly accessible or that you have already logged in, since the google charts code will not be able to prompt you for login credentials. 


--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/309ea801-9dbe-43c4-a259-d0204c014587%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Sergey Grabkovsky

unread,
Sep 16, 2015, 9:46:55 AM9/16/15
to Google Visualization API
Hi Paul,

If you're using the "New Sheets", then you have to use a different URL than the one you're currently using. Your URL should look something like this: https://docs.google.com/spreadsheets/d/{SPREADSHEET_KEY_GOES_HERE}/edit or like this: https://docs.google.com/spreadsheets/d/{SPREADSHEET_KEY_GOES_HERE}/gviz/tq.

As Dan said, please ensure that your spreadsheet is shared publicly, otherwise nobody will be able to access the spreadsheet except you (unless the spreadsheet is shared with them and they're logged in to Google).

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJNcm%3DyRZ7mx5mG9gPadrCuZ3%3DaAniH_gQsngrPR%2BqcUhQ%40mail.gmail.com.

Paul Schwartz

unread,
Sep 16, 2015, 7:34:07 PM9/16/15
to Google Visualization API
What I'm trying to do is not print from a google spread sheet, but a  page I generate dynamically on my server. What I am trying to understand is (what I think is anyway) the format necessary for importing the data. Does the data need to be in the JSON format?

I created the test page below:  And I get a "All series on a given axis must be of the same type" error. I can use the addColumns, addRows kind of data loading, but I find it a bit clunky. I'd rather find a format where the data can be ingested all at once. If I look at the array below everything seems to be a valid array, but I might have made a mistake.

Any help will be appreciated.


Paul


<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries! Do not specify any chart types in
  the autoload statement.
-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>s
<script type="text/javascript">

  google.load('visualization', '1');

  google.setOnLoadCallback(drawVisualization);
 
  function drawVisualization() {
    // Define the chart using setters:
   
    var dTable = new google.visualization.DataTable({cols:[
                        {id:'A',label:'A',type:'string'},
                        {id:'B',label:'Country code',type:'string'},
                        {id:'C',label:'Population',type:'number'},
                        {id:'D',label:'Population Density',type:'number'}],
                     rows:[
                        {c:[{v:'China'},        {v:'CN'},    {v:1.32297E9,f:'1322970000'},    {v:137.0,f:'137'}]},
                        {c:[{v:'India'},        {v:'IN'},    {v:1.13013E9,f:'1130130000'},    {v:336.0,f:'336'}]},
                        {c:[{v:'United States'},{v:'US'},    {v:3.03605941E8,f:'303605941'},    {v:31.0,f:'31'}]},
                        {c:[{v:'Indonesia'},    {v:'ID'},    {v:2.31627E8,f:'231627000'},    {v:117.0,f:'117'}]},
                        {c:[{v:'Brazil'},        {v:'BR'},    {v:1.86315468E8,f:'186315468'},    {v:22.0,f:'22'}]},
                        {c:[{v:'Pakistan'},        {v:'PK'},    {v:1.626525E8,f:'162652500'},    {v:198.0,f:'198'}]},
                        {c:[{v:'Bangladesh'},    {v:'BD'},    {v:1.58665E8,f:'158665000'},    {v:1045.0,f:'1045'}]},
                        {c:[{v:'Nigeria'},        {v:'NG'},    {v:1.48093E8,f:'148093000'},    {v:142.0,f:'142'}]},
                        {c:[{v:'Russia'},        {v:'RU'},    {v:1.41933955E8,f:'141933955'},    {v:8.4,f:'8.4'}]},
                        {c:[{v:'Japan'},        {v:'JP'},    {v:1.2779E8,f:'127790000'},        {v:339.0,f:'339'}]}]});

    
    
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataTable(dTable);

    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none', 'interpolatenulls' : 'true' });

    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>
 


--
dlali...@Google.com   5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
Reply all
Reply to author
Forward
0 new messages