Comparative Line Chart with 2 graphs - How?

[Patric Sherif]

Hi All!

I am trying to display a payment graph, where users can chose a time
frame (startdate, enddate) and then will be shown a graph showing the
revenue in that time period. So far it's no problem.

Now what I would like to do is give the option to select another time
frame and then display both graphs on top of each other in the same
chart - to give a good comparison between revenues in the two selected
timeframes.

I have not been able to do that, anyone can give me a hint would be
most welcome.
As far as I can tell I might have to define two 'domain' columns, but
so far it didnt work.

A working example would be great.

The selectable timeframe don't need to be of same length, the graphs
should be aligned on the start dates.

thx for your help!

regards,

Patric Sherif

[asgallant]

This one will be a challenge to implement, and I think you are going to have to make some sacrifices to make it work.  The biggest problem you face is getting both data sets mapped to a common domain column.  Most (if not all?) charts support only a single domain column, so each data point from your second time span has to be mapped to a point on your first time span.  You will need to determine how you want to handle that.

Once you know how you want to map the second series to the first, you will need to filter the DataTable for both series (separately), then create two DataViews.  The first view will be the filtered results of the first series.  The second view will be the filtered results of the second series, with a calculated domain column that transforms the second series domain values into their first-series-mapped equivalents.  You then join both views into a new DataTable (using a full join) and draw the chart with that.

I can give you some help with this second part, once you have determined how you want to map the series domain values.

[Patric Sherif]

Ok, well I got it to work using 2 domain columns. It's actually not
that if you can prepare your data accordingly.
 I added Columns like this:
"
 data.addColumn({type:'date',  role:'domain'}, 'Graph1, Time');
 data.addColumn('number', 'Graph1, Revenue');
 data.addColumn({type:'date', role:'domain'}, 'Graph2, Time');
 data.addColumn('number', 'Graph2, Revenue');
"
I calculated revenue per day and then the days of both graphs are
mapped onto each other. Data looks like this:

"
data.addRows([
[ new Date(graph1Date), graph1amount, new Date(graph2Date),
graph2amount]
...
])
"
I also added "focusTarget: 'category'" to the options then the
highlighting on the graph shows points and values of both graphs
simultaneously.

works pretty well so far.

cheers,
Patric Sherif