Databases
StackOverflow2013
Postsdbo
POJavascript Chart Draw
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript Chart Draw
    text
    copied!<p>I am using Google Charts API to integrate into a group project. The project is a visualisation toolkit for social media trends and such.</p> <p>The problem is though, I have written a PHP program that visualises pie/bar/line charts etc. But I am only able to get them to work by declaring:</p> <pre><code>var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); </code></pre> <p>to visualise the individual charts. However I wish to create individual files for the visualisations. i.e. drawPie, drawLine, drawBar etc. This is so it would be able to work with a rule based data type tool we have created i.e. percentage and location could be drawn onto a pie chart.</p> <p>Anyway I am having trouble with each individual file. Below is the code for the drawPie.js file:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;!-- Load JSAPI --&gt; &lt;script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;!-- Load the API Package --&gt; google.load('visualization', '1.0', {'packages':['controls']}); //&lt;!-- Callback when the Google Visualization API is Loaded --&gt; google.setOnLoadCallback(drawDashboard); function drawPie() { //&lt;!-- Create the Table --&gt; var data = new google.visualization.DataTable(); data.addColumn('string', 'location'); data.addColumn('number', 'crimes'); data.addRows([ &lt;?php echo $data_for_chart; ?&gt; ]); //&lt;!-- Pass Options --&gt; var options = { 'legend': 'left', 'title': 'Crimes (per day)', 'is3D': 'True', 'width':700, 'height':300 }; //&lt;!-- Instantiate and Draw Chart --&gt; var chart = new google.visualization.PieChart(document.getElementById('pie_chart')); chart.draw(data, options); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;style&gt; pie_chart {margin: 0 auto; }&lt;/style&gt; &lt;div id="pie_chart"&gt;&lt;/div&gt; &lt;style&gt; #left { margin-left: 15%; float: left; } #right { margin-right: 15%; float: right; } img { width: 200; height: 200;} &lt;/style&gt; &lt;/body&gt; </code></pre> <p></p> <p>The code doesn't show the chart. Does anyone know what I'm doing wrong? Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload