Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

How To Use New Google Charts Library Loader

  • wizard2none
  • wizard2none's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 7 months ago - 6 years 7 months ago #157639 by wizard2none
How To Use New Google Charts Library Loader was created by wizard2none

File Attachment:

File Name: pie_chart_...thod.txt
File Size:1 KB

File Attachment:

File Name: piechart_o...thod.txt
File Size:1 KB
Trying to use Google's preferred way of loading chart libraries .

My problem is I can't get the new way to work on LimeSurvey.

Old Load (note: code I found on LS forum uses this method):
<script type="text/javascript" src=" www.google.com/jsapi ">
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>

New Load (I assume new method works on LS):
<script type="text/javascript" src=" www.gstatic.com/charts/loader.js ">
<script type="text/javascript">
google.charts.load('current', {packages: });
google.charts.setOnLoadCallback(drawChart);
</script>

I have attached files for generating a PieChart using the Old and New method (files are only a few lines each).
The Old way works but the new way does not show anything on the Display Text question.
Last edit: 6 years 7 months ago by wizard2none. Reason: Clarification
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 7 months ago #157660 by holch
Not an expert on this, but does the second version work outside of Limesurvey? If not, there is a problem with your code.
As said, not an experto, but somehow this line looks incomplete to me, comparing it with the old version:
Code:
google.charts.load('current', {packages: });

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

The topic has been locked.
  • wizard2none
  • wizard2none's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 7 months ago - 6 years 7 months ago #157663 by wizard2none
Replied by wizard2none on topic How To Use New Google Charts Library Loader
Hi Holch,

I'm closer to a novice than an expert so any suggestions are appreciated.

The line you reference is actually: google.charts.load('current', {packages: });
I believe the code has this. Also Google As Explained by Google.

Here I used JSFiddle to show the code and generated charts working for both versions.

Old Method
jsfiddle.net/gurganious/qa0crtyh/

New Method
jsfiddle.net/gurganious/15nxsgac/
Last edit: 6 years 7 months ago by wizard2none. Reason: Correction
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 7 months ago #157664 by tpartner
Replied by tpartner on topic How To Use New Google Charts Library Loader
I suspect the problem is the lack of spaces or line-breaks inside the curly braces.

Due to Expression Manager parsing, you must have a space or line-break after every opening brace and before every closing brace.

This works for me inside LS:

Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
 
  // Load the Visualization API and the piechart package.
  google.charts.load('current', {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);
 
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and draws it.
  function drawChart() {
 
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['a', 1],
      ['b', 2],
      ['c', 3],
      ['d', 4],
      ['e', 5]
    ]);
 
    // Set chart options
    var thiswidth = $('#chart_div').width();
    var thisheight =thiswidth * 7/8;
    var options = {
      'title':'How Much Pizza Everyone Ate Last Night',
      'width':thiswidth,
      'height':thisheight
    };
 
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div" style="width:100%; height:auto"></div>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu, wizard2none
The topic has been locked.
  • wizard2none
  • wizard2none's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
6 years 7 months ago #157665 by wizard2none
Replied by wizard2none on topic How To Use New Google Charts Library Loader
Thanks, tpartner!!

Once you pointed it out it's like, duh--why didn't I see that.
The topic has been locked.
More
4 years 7 months ago #187282 by rambo
Hi, I just c/p this code in text display question and when I hit preview it shows me google charts, but when I start survey it is not showing :-(
I am using Version 3.17.7+190627.
What am I doing wrong?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago #187292 by tpartner
Replied by tpartner on topic How To Use New Google Charts Library Loader
Can you activate a small test survey and give us a link?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
4 years 7 months ago #187309 by rambo
Hi test survey is on this link .
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago #187341 by tpartner
Replied by tpartner on topic How To Use New Google Charts Library Loader
There is a JavaScript error indicating that the "google" object is not defined.

However, it works for me when I refresh the page.

Try disabling AJAX in the survey theme options.


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
More
4 years 7 months ago #187358 by rambo
Thanks tpartner, now it is working!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose