compare series in Annotated Time Line - like "google finance"

[Marco Megna]

i want to do the same things that google finance do.

i have two series in a annotated time line graph, and i want to compare them.

I wanna rescale the two series to 0% at the start date selected, and compare the performance from that date.

when i change the "zoom" on the date range selector, i want that the two series always starts from 0% at the first date selected..

 

is it possible??  

 

thanks

bye,

Marco

[Marco Megna]

This is what i wanna do:

 

http://www.google.com//finance?chdnp=0&chdd=0&chds=0&chdv=1&chvs=Logarithmic&chdeh=1&chfdeh=0&chdet=1318605277834&chddm=189244&cmpto=NYSE:FEU&cmptdms=0&q=MUTF:IDJIX&

 

if move the data range selector the graph rescale the values so that the two series start both from zero.

i hope i was clear....

How i can do this?

 

thanks,

Marco

[asgallant]

I think this will do what you want, though it probably needs some tweaking:

/*  assumes:
 *    data is the dataTable object
 *    chart is the chart object
 *    options is the options object
 *  this function creates a view with two columns based on columns 1 and 2, normalized
 *  to the same date, and redraws the chart with that view
 */

google.visualization.events.addListener(chart, 'rangechange', function () {
    var start = chart.getVisibleChartRange().start;
    var end = chart.getVisibleChartRange().end;
    var fooBase = chart.getValue(chart.getFilteredRows(start)[0], 1);
    var barBase = chart.getValue(chart.getFilteredRows(start)[0], 2);
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'foo',
        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 1) / fooBase;
    }, {
        type: 'number', 
        label: 'bar', 
        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 2) / barBase;
    }]);
    chart.draw(view, options);
});

[Marco Megna]

hi,

 

thanks for the answer... I'm quite new to JavaScript, i wrote this, but doesn't work...:

 

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawchart);
     
function drawchart() {
 var data = new google.visualization.DataTable();
        data.addColumn('date', 'Data');
        data.addColumn('number', 'fondo');
 data.addColumn('number', 'Benchmark');
        data.addRows([....]);
 
 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
 var options = {width: 300, height: 300, displayAnnotations: 'false', legend: 'right', scaleType: 'allmaximized'};
 chart.draw(data, options);
 
  google.visualization.events.addListener(chart, 'rangechange', normalize);

 function normalize() {

  var start = chart.getVisibleChartRange().start;
  var end = chart.getVisibleChartRange().end;
  var fooBase = chart.getValue(chart.getFilteredRows(start)[0], 1);
  var barBase = chart.getValue(chart.getFilteredRows(start)[0], 2);
  var view = new google.visualization.DataView(data);

  view.setColumns([0, {type: 'number', label: 'foo', calc:colone }, {type: 'number', label: 'bar', calc:coltwo}]);
  function colone(dataTable, rownum) {
   return (dataTable.getValue(rownum, 1)/fooBase);
  }
  function coltwo(dataTable, rownum) {
   return (dataTable.getValue(rownum, 2)/barBase);
  }
  chart.draw(view, options);
 };
}

 

It draw the chart .. but nothing happens when i change the date range...

 

what's wrong?

thanks,

Marco

[asgallant]

What happens when you use my code exactly as I wrote it?  Can you post a link to the page or code with data so I can test it?

[Marco Megna]

sorry but i cant post a link or the code with data..

 

when i use your code (exactly as you wrote it) i have this error: Expected identifier, string or number

the line is this:

 

------------------------------------------------------------------

view.setColumns([0, {
        type: 'number',
        label: 'foo',

        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 1) / fooBase;

    }, {                                <---------------------------------------------------------------- ERROR

        type: 'number', 
        label: 'bar', 

        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 2) / barBase;
    }]);

-----------------------------------------------------------------

the code as i write it doesn't return any error, draw the chart, but nothing happens when i change range data selection...

 

i post u again the code, this time with some exemple data:

 

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawchart);
     
function drawchart() {
 var data = new google.visualization.DataTable();
        data.addColumn('date', 'Data');
        data.addColumn('number', 'fondo');
 data.addColumn('number', 'Benchmark');

      data.addRows([[new Date(2007, 8, 24), 5, 100], [new Date(2007, 8, 25), 4.992, 99.3632911510798], [new Date(2007, 8, 26), 5.026, 100.075701244891], [new Date(2007, 8, 27), 5.029, 100.568918725117], [new Date(2007, 8, 28), 5.028, 100.422972180913], [new Date(2007, 9, 1), 5.066, 100.983706987663], [new Date(2007, 9, 2), 5.105, 101.33220551144], [new Date(2007, 9, 3), 5.116, 101.223086599886], [new Date(2007, 9, 4), 5.107, 101.199216837983], [new Date(2007, 9, 5), 5.12, 101.900033047442], [new Date(2007, 9, 8), 5.109, 101.509796539995], [new Date(2007, 9, 9), 5.132, 101.744811395756]);

 
 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
 var options = {width: 300, height: 300, displayAnnotations: 'false', legend: 'right', scaleType: 'allmaximized'};
 chart.draw(data, options);
 
  google.visualization.events.addListener(chart, 'rangechange', normalize);

[Marco Megna]

sorry, there wan an error in the previous post.

this is correct:

[asgallant]

D'oh! *facepalm*

I missed the closing } for the two functions, it should be:

google.visualization.events.addListener(chart, 'rangechange', function () {

    var start = chart.getVisibleChartRange().start;
    var end = chart.getVisibleChartRange().end;
    var fooBase = chart.getValue(chart.getFilteredRows(start)[0], 1);
    var barBase = chart.getValue(chart.getFilteredRows(start)[0], 2);
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'foo',

        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 1) / fooBase;
        }
    }, {

        type: 'number', 
        label: 'bar', 
        func: function (dataTable, rownum) {
            return dataTable.getValue(rownum, 2) / barBase;
        }
    }]);

    chart.draw(view, options);
});

[Marco Megna]

Hi,

 

i wrote the code exactly as you sent me.. but (again) it doesn't works.

It's returns no errors, but nothing happens when i change the date range with the selector.

 

this is the code:

 

<script type='text/javascript'>

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawchart);
 
function drawchart() {
  var data = new google.visualization.DataTable(); 
  data.addColumn('date', 'Data'); 

  data.addColumn('number', '8a+ Eiger');

  data.addColumn('number', 'Benchmark');
 

  data.addRows([[new Date(2007, 8, 24), 5, 100], [new Date(2007, 8, 25), 4.992, 99.3632911510798], [new Date(2007, 8, 26), 5.026, 100.075701244891], [new Date(2007, 8, 27), 5.029, 100.568918725117], [new Date(2007, 8, 28), 5.028, 100.422972180913], [new Date(2007, 9, 1), 5.066, 100.983706987663], [new Date(2007, 9, 2), 5.105, 101.33220551144], [new Date(2007, 9, 3), 5.116, 101.223086599886], [new Date(2007, 9, 4), 5.107, 101.199216837983], [new Date(2007, 9, 5), 5.12, 101.900033047442], [new Date(2007, 9, 8), 5.109, 101.509796539995], [new Date(2007, 9, 9), 5.132, 101.744811395756], [new Date(2007, 9, 10), 5.114, 101.662290218893], [new Date(2007, 9, 11), 5.131, 102.283722420195], ...[more data]... ,[new Date(2011, 11, 21), 4.031, 62.4198950276071], [new Date(2011, 11, 22), 4.106, 63.1765567371575], [new Date(2011, 11, 23), 4.134, 63.6342326290487], [new Date(2011, 11, 27), 4.117, 63.6328296716144], [new Date(2011, 11, 28), 4.047, 62.7017335877363], [new Date(2011, 11, 29), 4.101, 63.6848949808418]]);

 

 var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));

 var options = {width: 300, height: 300, displayAnnotations: 'false', legend: 'right', scaleType: 'allfixed'};
 
 chart.draw(data, options);

</script>

 

Thanks,

Marco

[asgallant]

Ugg....I can't count the number of minor errors I had in the code that weren't throwing any errors at all (just causing nothing to happen >.<).  Anyway, I made up a jsfiddle that I think is working:  http://jsfiddle.net/7CjuU/

[Chris]

>  Anyway, I made up a jsfiddle that I *think* is working:  http://jsfiddle.net/7CjuU/

Hello,
I just started looking at this myself. I updated the code in the link
above to use scaleType: 'allmaximized' for a more dramatic appearance:
http://jsfiddle.net/7CjuU/4/

It doesn't seem to be starting at 0 for me as requested in the
original post (that also matches what I hope to produce). :(

I'll play around with this for a bit (love jsfiddle.net by the way,
thanks for sharing!). If you have any additional ideas, I would
greatly benefit from this. Thanks in advance! :D

Chris

[asgallant]

Sorry, I missed the "start at 0" part.  Try this:  http://jsfiddle.net/7CjuU/7/

[Marco Megna]

Thanks very much to you both.

 

I've made some change, take a look

 

http://jsfiddle.net/MarcoM/7CjuU/10/

[Marco Megna]

Hi,

 

remains a problem... the two series are displayed in two different scale.

it is necessary to compare graphically the performance of the two series...

'allmaximized' misrepresent one series in the Y scale, and if i use 'allfixed' with scaleColumns specified it's the same... 

http://jsfiddle.net/MarcoM/qyKHk/4/

 

Thanks in advance,

Marco

 

 

[asgallant]

Don't use scaleColumns, and set scaleType to 'fixed', and they will be on the same scale: http://jsfiddle.net/qyKHk/5/