Hi,
Thanks for your answer....
Let's make it simple..Here is the script that I pasted in the "HTLM field"
(exactly the one you proposed to me) :
*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});*
And here is the result :
http://meteoplougastel.e-monsite.com/pages/janvier/essai-2013.html
As far as I understand.....the script is not "interpreted" as "functions"
but simply dispayed as "text".
Something is certainly missing in this "html" script ??? At the beginning
or at the end ?
My script for "annotate time line chart" starts with :
*<!--*
*You are free to copy and use this sample in accordance with the terms of
the*
*Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)*
*-->*
*
*
*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>*
*<html xmlns="http://www.w3.org/1999/xhtml";>*
*<head>*
* <meta http-equiv="content-type" content="text/html; charset=utf-8" />*
* <title>Google Visualization API Sample</title>*
* <script type="text/javascript"
src="http://www.google.com/jsapi";></script>*
* <script type="text/javascript">*
* google.load('visualization', '1', {packages: ['annotatedtimeline']});*
* function drawVisualization() {*
* var data = new google.visualization.DataTable();*
* data.addColumn('datetime', 'Date');*
* data.addColumn('number', 'T°ext(°c)');*
* data.addColumn('number', 'Vent(km/h)');*
* data.addColumn('number', 'Pluie(mm)');*
and the script ends with :
*[new Date(2013, 4, 26, 20, 25), 13.8, 8, 0],*
*[new Date(2013, 4, 26, 20, 30), 13.7, 11.3, 0]*
* ]);
*
* *
*var annotatedtimeline = new google.visualization.AnnotatedTimeLine(*
* document.getElementById('visualization'));*
* annotatedtimeline.draw(data,{scaleType: 'allmaximized','min': 0,
scaleColumns:[0, 2, 1]},{'displayAnnotations': true},
{'displayExactValues': true},{ 'colors': ['#59761d', '#1d4376', '#761d1d']
} );*
* }*
* google.setOnLoadCallback(drawVisualization);
*
* </script>*
*</head>*
*<body style="font-family: Arial;border: 0 none;">*
*<div id="visualization" style="width: 500px; height: 400px;"></div>*
*</body>*
*</html>*
Any idea "where is my mistake" in my html code ?
Thanks...
Eric
Le vendredi 7 juin 2013 19:02:46 UTC+2, asgallant a écrit :
>
> The link to your page shows a 404 error for me.
>
> At the bottom of the jsfiddle, make sure you copied the line:
>
> google.load('visualization', '1', {packages:['controls'], callback:
> drawVisualization});
>
> which handles loading the API and setting a callback function.
>
> On Friday, June 7, 2013 4:55:59 AM UTC-4, [email protected] wrote:
>>
>> Ooups !!! Something wrong in the script...Look at that...
>>
>>
>> http://meteoplougastel.e-monsite.com/pages/janvier/nouveau-temp-pluie-vent-2013.html
>>
>> I made a "too simple" copy/paste of your script...but I'm not an expert
>> as you know...
>> The script should certainly start with something like :
>>
>> .........function drawVisualization() {
>> var data = new google.visualization.DataTable();...........
>>
>> My former script "initial script" was something like :
>> <script type="text/javascript">
>> google.load('visualization', '1', {packages: ['annotatedtimeline']});
>> ....
>> What shall I add before the script you proposed ?
>>
>> Sorry, but I started with "html" script last week ! ...with scripts found
>> on :
>>
>> https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline?hl=fr#Data_Format
>>
>> Thanks for your "final touch" !
>>
>> Eric
>>
>>
>> Le jeudi 6 juin 2013 17:04:03 UTC+2, asgallant a écrit :
>>>
>>> I misspoke slightly - the additional axes will display, but they will
>>> overlap a bit with the right axis. We can move the text inside the chart
>>> to prevent overlap by setting the textPosition option on that axis. I
>>> converted your code over to the core charts, along with a few suggested
>>> enhancements to make the tooltips display a bit better (feel free to
>>> discard the changes if you disagree):
>>> http://jsfiddle.net/asgallant/apFwN/
>>>
>>> On Thursday, June 6, 2013 10:50:54 AM UTC-4, asgallant wrote:
>>>>
>>>> The core charts will automatically scale all data for you, but they do
>>>> not support more than two vertical axes. You can scale series to more
>>>> than
>>>> two axes, but these additional axes do not display.
>>>>
>>>> On Wednesday, June 5, 2013 3:16:07 AM UTC-4, [email protected]:
>>>>>
>>>>> Thanks for your advises.
>>>>>
>>>>> I'll try to understand your method...
>>>>>
>>>>> But before that I would like to be sure to have at least two important
>>>>> parameters with your 'line chart with range filter" :
>>>>> (1) I need multiple vertival axis (at least 3)
>>>>> (2) I need automatic scaling
>>>>>
>>>>> Please have a look at my chart... the one I'd like to improve...
>>>>>
>>>>> http://meteoplougastel.e-monsite.com/pages/janvier/temp-pluie-vent-2013-essaiii.html
>>>>>
>>>>> Thanks for your help
>>>>>
>>>>> Eric
>>>>>
>>>>>
>>>>> Le lundi 3 juin 2013 16:20:40 UTC+2, asgallant a écrit :
>>>>>>
>>>>>> You can't do that with Annotated Timelines, but if you convert to a
>>>>>> LineChart<https://developers.google.com/chart/interactive/docs/gallery/linechart>with
>>>>>> a
>>>>>> ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>,
>>>>>>
>>>>>> you can get 95% of the functionality of the ATL charts (with the bonuses
>>>>>> brought by the core charts and non of the drawbacks of Flash). I wrote
>>>>>> a migration
>>>>>> tool<https://groups.google.com/d/msg/google-visualization-api/Y4ZmqWAjjPg/Uwr8eoWo6goJ>to
>>>>>> help with transitioning your chart over, if you'd like to give that a
>>>>>> try.
>>>>>>
>>>>>> On Monday, June 3, 2013 4:41:35 AM UTC-4, [email protected] wrote:
>>>>>>>
>>>>>>> Hello,
>>>>>>>
>>>>>>>
>>>>>>> Sorry for my English (I'm French)...I'll try to be as clear as
>>>>>>> possible !
>>>>>>>
>>>>>>> I'm using "Annotated Time Line" with multiple vertical axis.
>>>>>>>
>>>>>>> It works perfectly...but...
>>>>>>>
>>>>>>> I'm just looking for *a way to display data value (you say "label"
>>>>>>> ?) close to each point of my chart (not in the legend...) when I move
>>>>>>> my
>>>>>>> mouse over the different lines.*...
>>>>>>>
>>>>>>> Apparently it can be done "naturally" for "BarChart"
>>>>>>> "CandlestickChart"..."PieChart".
>>>>>>>
>>>>>>> But I haven't found any example of script for this function ??
>>>>>>>
>>>>>>> Here is my script ... any idea to do it ?
>>>>>>>
>>>>>>> Thanks....
>>>>>>>
>>>>>>> var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
>>>>>>> document.getElementById('visualization')); annotatedtimeline.draw(data,
>>>>>>> {scaleType: 'allmaximized',scaleColumns:[0, 1, 2]}, {
>>>>>>> //'allValuesSuffix':
>>>>>>> '%', // A suffix that is added to all values 'colors': ['blue',
>>>>>>> 'red','#0000bb'], // The colors to be used 'displayAnnotations': true,
>>>>>>> 'displayExactValues': true, // Do not truncate values (i.e. using K
>>>>>>> suffix)
>>>>>>> 'displayRangeSelector' : true, // Do not sow the range selector
>>>>>>> 'displayZoomButtons': true, // DO not display the zoom buttons 'fill':
>>>>>>> 30,
>>>>>>> // Fill the area below the lines with 20% opacity 'legendPosition':
>>>>>>> 'newRow', // Can be sameRow //'max': 100000, // Override the automatic
>>>>>>> default //'min': 100000, // Override the automatic default
>>>>>>> 'scaleColumns':
>>>>>>> [0, 1], // Have two scales, by the first and second lines 'scaleType':
>>>>>>> 'allfixed', // See docs... 'thickness': 4, // Make the lines thicker
>>>>>>> 'zoomStartTime': new Date(2013, 0, 1, 0, 0), //NOTE: month 1 = Feb
>>>>>>> (javascript to blame) 'zoomEndTime': new Date(2013, 4, 26, 20, 30)
>>>>>>> //NOTE:
>>>>>>> month 1 = Feb (javascript to blame) });
>>>>>>>
>>>>>>
--
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.
