You are missing the divs that the code is trying to put the chart and
controls in:
<div id="dashboard">
<div id="visualization"></div>
<div id="control"></div>
</div>
On Tuesday, June 11, 2013 10:27:20 AM UTC-4, [email protected] wrote:
>
> Are you sure of the script below ?
> It does not work...
> It's "blank"...on my website
> http://meteoplougastel.e-monsite.com/pages/janvier/essai-2013.html
> A last try if you have time ? then I'll give up. I don't want to waste
> your time...
> Sorry...
>
>
> @@@@@@@@@@@@@@@@@@@
>
> <script type='text/javascript' src="http://www.google.com/jsapi";></script>
> <script type='text/javascript'>
> function drawVisualization() {
> var data = new google.visualization.DataTable();
> data.addColumn('datetime', 'Date');
> data.addColumn('number', 'T°ext');
> data.addColumn('number', 'Vent');
> data.addColumn('number', 'Pluie');
> data.addRows([
> [new Date(2013, 0, 1, 0, 0), 7.8, 0, 0],
> [new Date(2013, 0, 1, 0, 20), 7.5, 0, 0],
> [new Date(2013, 0, 1, 0, 40), 7.5, 2.9, 0],
> [new Date(2013, 0, 1, 1, 0), 7.7, 0, 0],
> [new Date(2013, 0, 1, 1, 20), 8.4, 4.7, 0],
> [new Date(2013, 0, 1, 1, 40), 8.4, 5, 0],
> [new Date(2013, 0, 1, 2, 2), 8.3, 6.5, 0],
> [new Date(2013, 0, 1, 2, 20), 8.3, 12.6, 0],
> [new Date(2013, 0, 1, 2, 40), 8.2, 10.4, 0],
> [new Date(2013, 0, 1, 3, 0), 8.2, 2.5, 0],
> [new Date(2013, 0, 1, 3, 20), 7.8, 17.3, 0],
> [new Date(2013, 0, 1, 3, 40), 7.7, 5, 0],
> [new Date(2013, 0, 1, 4, 0), 7.1, 1.1, 0],
> [new Date(2013, 0, 1, 4, 20), 7.1, 10.8, 0],
> [new Date(2013, 0, 1, 4, 40), 7.1, 10.1, 0],
> [new Date(2013, 0, 1, 5, 0), 6.8, 0, 0],
> [new Date(2013, 0, 1, 5, 20), 6.3, 2.2, 0],
> [new Date(2013, 0, 1, 5, 40), 6.3, 6.1, 0],
> [new Date(2013, 0, 1, 6, 0), 6.2, 0, 0],
> [new Date(2013, 0, 1, 6, 20), 5.8, 3.6, 0.518],
> [new Date(2013, 0, 1, 6, 40), 5.8, 0, 0],
> [new Date(2013, 0, 1, 7, 0), 5.9, 5.4, 0],
> [new Date(2013, 0, 1, 7, 20), 6, 4, 0],
> [new Date(2013, 0, 1, 7, 40), 6, 0, 0],
> [new Date(2013, 0, 1, 8, 0), 5.6, 0, 0],
> [new Date(2013, 0, 1, 8, 20), 5.3, 0, 0],
> [new Date(2013, 0, 1, 8, 40), 5.4, 0, 0],
> [new Date(2013, 0, 1, 9, 0), 5.3, 0, 0],
> [new Date(2013, 0, 1, 9, 20), 5.1, 0, 0],
> [new Date(2013, 0, 1, 9, 40), 5.5, 0, 0],
> [new Date(2013, 0, 1, 10, 0), 6.1, 8.6, 0],
> [new Date(2013, 0, 1, 10, 20), 6.3, 0, 0],
> [new Date(2013, 0, 1, 10, 40), 6.8, 1.1, 0],
> [new Date(2013, 0, 1, 11, 0), 7.1, 6.8, 0],
> [new Date(2013, 0, 1, 11, 20), 8.3, 0, 0],
> [new Date(2013, 0, 1, 11, 40), 8, 0, 0],
> [new Date(2013, 0, 1, 12, 0), 7.9, 13.3, 0],
> [new Date(2013, 0, 1, 12, 20), 8.6, 0, 0],
> [new Date(2013, 0, 1, 12, 40), 9.4, 5, 0],
> [new Date(2013, 0, 1, 13, 0), 9.1, 10.1, 0],
> [new Date(2013, 0, 1, 13, 20), 9.1, 2.9, 0],
> [new Date(2013, 0, 1, 13, 40), 9.6, 15.1, 0],
> [new Date(2013, 0, 1, 14, 0), 9.3, 11.9, 0]
> ]);
>
> // format the data for display in tooltips
> var tFormat = new google.visualization.NumberFormat({pattern: '#.0
> °c'});
> tFormat.format(data, 1);
> var ventFormat = new google.visualization.NumberFormat({pattern: '#.00
> km/h'});
> ventFormat.format(data, 2);
> var pluieFormat = new google.visualization.NumberFormat({pattern:
> '#.000 mm'});
> pluieFormat.format(data, 3);
>
> // set some common dimensions for the chart and control
> var width = 500;
> var chartAreaWidth = '80%';
>
> // create a chart
> var chart = new google.visualization.ChartWrapper({
> chartType: 'LineChart',
> containerId: 'visualization',
> options: {
> height: 350,
> width: width,
> chartArea: {
> height: '75%',
> width: chartAreaWidth
> },
> series: {
> 0: {
> // options for T°ext
> targetAxisIndex: 0, // use left axis
> color: '#59761d'
> },
> 1: {
> // options for Vent
> targetAxisIndex: 1, // use right axis
> color: '#1d4376'
> },
> 2: {
> // options for Pluie
> targetAxisIndex: 2, // use hidden axis
> color: '#761d1d'
> }
> },
> vAxes: {
> 0: {
> // options for left axis
> title: '°c',
> viewWindow: {
> min: 0
> }
> },
> 1: {
> // options for right axis
> title: 'km/h',
> viewWindow: {
> min: 0
> }
> },
> 2: {
> // options for second right axis
> title: 'mm',
> textPosition: 'in',
> viewWindow: {
> min: 0
> }
> }
> }
> }
> });
>
> // create a control
> var control = new google.visualization.ControlWrapper({
> controlType: 'ChartRangeFilter',
> containerId: 'control',
> options: {
> filterColumnIndex: 0,
> ui: {
> chartOptions: {
> height: 50,
> width: width,
> chartArea: {
> width: chartAreaWidth
> }
> },
> chartView: {
> columns: [0, 1] // use the T°ext series in the range
> slider
> }
> }
> }
> });
>
> // create a dashboard
> var dashboard = new
> google.visualization.Dashboard(document.getElementById('dashboard'));
> // bind control to chart
> dashboard.bind([control], [chart]);
> // draw the dashboard using the data table
> dashboard.draw(data);
> }
> google.load('visualization', '1', {packages:['controls'], callback:
> drawVisualization});
> </script>
> @@@@@@@@@@@@@@@@@@@
>
--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
