Re: Compare data in Line Chart

[asgallant]

What you want is most likely possible, but it depends on exactly how you want to compare the data.  The chart's won't do everything for you in many cases, but you should be able to write javascript to format the data however you need for a given method of comparison.

On Thursday, August 16, 2012 8:19:54 PM UTC-4, kasimir wrote:

I have looked around but couldn't find an answer.

I use a line-chart which gets its data from an XML file (updated daily with date and a value per entry) and this works great.
Now my question,  is there a way two data sources can be compared against each other on a relative basis, kinda like how its done at Google Finance when you compare one stock against an other, where the chart turns relative and compares the performance?

Also is there a way that my data source can be compared with the Dow Jones (for example) on a relative basis?

[kasimir]

Thanks for the reply,
I would like to compare the data on a relative basis (%), similar like two (or more) stocks can be compared in Google Finance in a specified timeframe where at t=0 both data-value are 0% and from there on the performance can be compared.
Here is an example from Google Finance where the stocks of Google (in red) is compared against Apple (in blue) in a time-frame of 1 month:
http://www.google.com/finance?chdnp=1&chdd=1&chds=1&chdv=1&chvs=Linear&chdeh=0&chfdeh=0&chdet=1345233600000&chddm=8993&chls=IntervalBasedLine&cmpto=NASDAQ:GOOG&cmptdms=0&q=NASDAQ:AAPL&ntsp=0

Now I would like to use my own data and compare that to another dataset or even compare my data against a stock.

I'm asking because I have written a piece of software in PHP which tracks performance data of companies and clients which is then visualized in a google line chart, but it would be great to compare the data against each other or against other market relevant data (like stocks or market indexes) in a relative way.

Hope I'm not the only one who can use this? :)

[asgallant]

I helped someone else do something similar recently (see this thread).  That example is a bit more complicated than what you are asking here (they also wanted to be able to add and remove columns from the chart using CategoryFilter controls), but should give you a good idea of what’s possible.

[kasimir]

This already helped me a little bit, but I'm still stuck with comparing the performance on a relative basis like its possible at Google Finance.

I somehow need to have a javascript that formats two (or more) datasets so that I can compare their performances and I have absolutely no idea how I could do this.
Since Google already does this on Google Finance I thought there might be an "easy" solution.

Sorry, but I'm a bit of a noob when it comes to the chart api and javascript.

[asgallant]

The finance charts weren't built using the Visualization API, so some of the features there are not available in the Visualization API.  That said, when it comes to data conversion, you can almost certainly do it manually.  The example I posted draws all series relative to their values at the beginning of the currently visible range (shown as a proportion, but could be converted to a percent), which is similar to what the finance charts do.

[kasimir]

Big thanks! After fiddling around and getting familiar with the code I was able to adjust your solution to my issue and it works great, just needs some fine-tuning.

Now I only have 2 questions and hope you could help me out with it based on your solution in the other thread.
Question 1 (High priority): At this moment all the data gets recalculated to compare it against each other from the get go. Is there a way that, when I set the initState to just one value (in my case Column A) that it just shows the original data without calculating and as soon as someone adds at least one Column from the Category Filter, the data will be calculated so that they can be compared relative to each other.
=> Follow up: Is there a way to not show Column A in the Category Filter, since I always want it visible as default data.

Question 2 (Low priority): Is it possible that Column A (by default always visible) is an AreaChart and the other Colums (B, C, D, E etc...) when selected will be a LineChart?

Would be great if you could help me out with this and to keep it simple lets use http://jsfiddle.net/asgallant/EVQP2/ as basis and then I will be able to adapt the solution to my chart.

Thanks a bunch!

On Friday, August 17, 2012 2:21:12 PM UTC-4, asgallant wrote:

[asgallant]

Let me see if I have this straight: for the first part, you want to have one column that always gets graphed and that users can't turn off, and if this is the only column, you want it graphed as is without any conversion - correct?  This is doable.  You're second request is also doable, we just have to change to using a ComboChart and define the types for each series.  See both in action: http://jsfiddle.net/asgallant/EVQP2/5/ 

[kasimir]

Quite close, thanks first of all ... Only thing missing now is, I want it to start with just the A Column (the areachart) graphed as default and with no conversion at that point. As soon as the user selects another Column (or more than 1), than the data should be converted.

So basically something like:
- if (any column selected, except column A)
=> data conversion true
- else
=> data conversion false

Sorry, I wouldn't know how to explain it better, but this should do it :)

Much appreciated

[kasimir]

Let me take that back ... everything works perfectly, you helped me out a lot and basically created the perfect compare tool!

Thanks a bunch!

[kasimir]

Only little detail that I'm missing now is, what do I have to change that at startup only the default Column A is shown and no other column. I Tried to remove the initState, but that messes up the graph...

[asgallant]

Set the selectedValues parameter of the initState variable to an empty array:

var initState = {
    selectedValues: []
};

[kasimir]

Thats perfect, you are a great help! Now I only have one last question regarding a cosmetic issue and I already tried around a little but I cannot find a solution.

Is there a way that when the chart is in "conversion" mode, the values can be shown with the prefix " %" and the Y-Axis values are shown with "%" sign behind the values? The numbers are already calculated how I want them, but I'm just missing the percentage symbol.
When the chart is in "no-conversion" mode (just showing column A), the values should be shown as is with no prefix or percentage sign.

Thanks a bunch for helping me out

[asgallant]

Change the vAxis.format option depending on whether you are drawing one or more columns, and in the conversion, return an object {v: value, f: 'formatted value'}, like this: http://jsfiddle.net/asgallant/EVQP2/6/ 

[kasimir]

Perfect mate, that should do the job now!

Thanks a lot