CODEWITHSUNDEEP
javascriptgraphhighcharts
Penny
Penny

Reputation: 816

Merge two or more graphs using library

I am trying to make a dynamic graph something like as below: enter image description here

Y-axis gives no. of users and x axis date range(For continuous graph ) x axis gives release of an algo on that date.(For discontinued graph)

I tried combined charts of highchart this and looked in google charts library.

Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.

I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.

Any help is appreciated.

Thanks

Upvotes: 4

Views: 980

Answers (2)

Mike Zavarello
Mike Zavarello

Reputation: 3554

I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.

Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.

I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.

You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.

I hope this helps!

Upvotes: 0

StubbornShowaGuy
StubbornShowaGuy

Reputation: 269

I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.

Demo: http://c3js.org/samples/chart_combination.html

Upvotes: 0

Related Questions