By dan_aka_jack on

Hi there,

I need to insert an interactive Google chart (created using Google Docs) into some Drupal content. I don't think the Drupal Google Chart API will work for me because I can't see how to import data from an Docs Spreadsheet. So I want to insert the javascript right into my content.

The javascript that Google charts produces (and I need to insert this into a content page on my drupal site) is copied at the end of this post.

I have tried inserting this JavaScript using the PHP filter (wrapping the JavaScript in
<?php ?> tags and <script> tags). I've tried using drupal_add_js() but no joy. Please can someone advise me how I can insert this javascript into a blog post on my drupal site?

Many thanks,
Jack

Here's the javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"containerId":"chart_2","dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0Astzk9pV1BPddEkzc0lEbFg2elVES1BPRGtpVlNkZ1E&transpose=0&headers=1&range=A1%3AF5&gid=0&pub=1","options":{"vAxes":[{"title":"kWh","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"viewWindowMode":"pretty","viewWindow":{}}],"title":"Our gas consumption","booleanRole":"certainty","animation":{"duration":500},"vAxis":{"format":""},"focusTarget":"category","useFirstColumnAsDomain":true,"hAxis":{"title":"time of year","maxAlternations":1,"format":""},"isStacked":false,"width":1580,"height":612},"state":{},"view":["{\"columns\":[0,1,2,3,4,5]}","{\"columns\":[0,1,2,3,4,5]}","{\"columns\":[0,1,2,3,4,5]}"],"chartType":"ColumnChart","chartName":"Chart1"} </script>

⋅ Categories: Drupal 7.x

Comments

dan_aka_jack’s picture

dan_aka_jack commented

I've made a bit of progress but I'm not quite there yet. The following works... I just need to modify it to my needs:

This is added using the PHP text input filter:

<?php
drupal_add_js('http://www.google.com/jsapi', 'external');
?>
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Task'); 
data.addColumn('number', 'Hours per Day'); 
data.addRows(5); 
data.setValue(0, 0, 'Work'); 
data.setValue(0, 1, 0); 
data.setValue(1, 0, 'Eat'); 
data.setValue(1, 1, 2); 
data.setValue(2, 0, 'Commute'); 
data.setValue(2, 1, 2); 
data.setValue(3, 0, 'Watch TV'); 
data.setValue(3, 1, 2); 
data.setValue(4, 0, 'Sleep'); 
data.setValue(4, 1, 7); 

var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'}); 
} 
</script>
<div id="chart_div"></div>
Marzo’s picture

Marzo commented

Hi Jack, I've been struggling with this for a while. Actually, I picked up with Drupal because a realised I wasn't going to solve it in Wordpress and, satisfyingly, found the answer within a couple of days of making the switch:

http://drupal.stackexchange.com/questions/16221/drupal-7-ckeditor-doesnt...

To give you a little more detail than appears in the above post:

You can't include the javascript, but you can call it from elsewhere. So;

1) Save the script that Google gives you, with no other text, in a .js file in a folder you create to hold all such scripts, eg ...sites/all/scripts/my_javascript.js

2) Enable your PHP Filter which, in D7, is a core module (I believe you might have to add it if you are using D6), and set up the permissions so that you are given the PHP option when creating content.

3) Select the PHP text format and add the following PHP script to your page where you want it to appear:

<?php include('sites/all/scripts/my_javascript.js'); ?>

4) NOTE: If you switch back to CKeditor to work on other sections of the page subsequent to inserting your code it will add the little hyphens (<--? ... ?-->) that blank out your code. Therefore, before saving go back to PHP mode and remove the hyphens, and then save.

Nice and simple, and all your data stays on your Google Docs spreadsheet.