Your page has a ton of errors that need to be fixed before anything will
work. The charts in "aangiften.js" and "misdrijven.js" will not draw at
all because you are trying to draw them before loading the Visualization
API. They need to be inside a function (like the "drawVisualization"
function in "veilig.js") that gets called after the Visualization API is
loaded. Also, the google.visualization.drawChart function takes care of
all chart drawing for you - there is no need to create another chart object
and make a draw call, eg:
var chart1 = google.visualization.drawChart({
"containerId": "chart_noord",
"dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
"query":"SELECT 'misdrijfper', 'aangiftenper', 'bevolkingper' FROM
1EwP1wvTtIe0gy2aTsv2xe8UvYbkWD_eMZTjrp6s WHERE 'stadsdeel'='Noord'",
"chartType": "ColumnChart",
"options": {
"title":"Noord",
legend: { position: 'top', alignment: 'start' },
"backgroundColor": { fill: "none" }
}
});
//...
var bar1 = new
google.visualization.drawChart(document.getElementById('chart_noord'));
chart1.draw(chart1);
Nothing ever happens with bar1 (and if you tried to draw a chart with it,
it would overwrite the chart drawn with the drawChart call, since they
share the same div). Calling chart1.draw(chart1) accomplishes nothing
except throwing an error, as the drawChart call does not return a chart
object, so there is no draw method to call. Even if there was a draw
method available, passing chart1 as a parameter to its own draw call would
never make sense in any of the paradigms of the Visualization API.
The script tag for loading the Visualization API should look like this:
<script type="text/javascript" src="https://www.google.com/jsapi";></script>
or this:
<script type="text/javascript" src="//www.google.com/jsapi"></script>
Here's a (mostly) working example: http://jsfiddle.net/asgallant/XM8ft/.
There is one problem remaining with the interaction between the
Visualization API and the Bootstrap tabs: there is no way to control the
initializing of tabs, so some of the charts are being drawn inside hidden
divs (see the charts in the tabs other than the default tab), which causes
problems with positioning and aligning chart elements. Since you can't
control the initialization of the tabs, you need to hook up an event
listener for the tabs that detects when a tab is first opened and draws the
appropriate charts. I'm not sure how Bootstrap works, but you should be
able to get help with that on StackOverflow <http://stackoverflow.com>.
On Monday, January 6, 2014 4:58:46 PM UTC-5, Jomaira Hiffens wrote:
>
> Thank you for your reaction. the charts do display though, just not all of
> them.
> I tried to drop the http from the jsapo load but it stopped al the charts
> from showing up
>
>
>
> Op maandag 30 december 2013 16:54:01 UTC+1 schreef Daniel LaLiberte:
>>
>> Hi Jomaire. I'm not sure you are getting any charts displayed. The
>> chart that shows up is really just an image that is on the background of
>> the body. That's what I see anyway.
>>
>> The reason no charts are displayed is that your loading of the jsapi
>> library is failing, in Chrome at least, because it uses 'http' while the
>> page uses 'https'. If you just drop the 'http:' from the jsapi load, that
>> will allow the jsapi library to be loaded. Then we can see what happens
>> next.
>>
>>
>> On Mon, Dec 30, 2013 at 6:25 AM, Jomaira Hiffens <[email protected]>wrote:
>>
>>> Hi everyone,
>>>
>>> Im trying to display about 6 charts according to the button that is
>>> pressed.
>>>
>>> https://oege.ie.hva.nl/~hiffen01/Visual3/
>>>
>>> here you can find my visualisation. The charts show up on te first page
>>> and not on the others. I feel like the charts are on the other pages too
>>> since you have to scroll
>>> but somehow theyre not visible.
>>>
>>> I hope someone can help me solve this problem
>>>
>>> --
>>> 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 [email protected].
>>> To post to this group, send email to [email protected].
>>> Visit this group at
>>> http://groups.google.com/group/google-visualization-api.
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>
>>
>>
>> --
>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
>> - 978-394-1058
>> [email protected] 5CC, Cambridge MA
>> [email protected] 9 Juniper Ridge Road, Acton MA
>>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
