Stacked Charts


#1

What would be the best way to to a stacked chart?  In my case, I would like to show a line chart above a bar chart.  I see the demos have a chart like this, but the axis for the two series are on opposite sides (one on the left and one on the right.  How can I put both axis on the same side?


#2

Hi jmonroe

We have a demo project called “BarChart” bundled with our free trial download, which can be found here: http://www.shinobicontrols.com/shinobicharts/price-plans/shinobicharts-premium/shinobicharts-free-trial-form/. It implements a stacked chart and so should give you some insight into how to go about doing something like this yourself. The stackIndex property which can be set on any series that inherits from SChartCartesianSeries (this includes SChart LineSeries, SChartBarSeries,  SChartColumnSeries, SChartScatterSeries etc) determines if they are stacked or not. So setting stackIndex equal to the same numeric value e.g. 1 should make all the series of the same type stack.

In answer to your second question you should be able to show a SChartLineSeries and a SChartColumnSeries on the chart with only a single x and y axis by setting the xAxis and yAxis properties of the chart to be equal to the axis type of your choice (e.g. SChartNumericAxis, SChartNumberAxis etc), adding two series to your chart such as SChartColumnSeries and SChartLineSeries, and then setting the right data for each series in the following datasource method:

  • sChart:dataPointAtIndex:forSeriesAtIndex:

Kind regards,

Daniel Allsop


#3

Daniel,

Thanks for the reply.  Because we need to do two different series types,  I can’t use series stacking that you mentioned.  The problem that I am having with putting the two series on the same chart is that our design team has requested that both of the y axis be placed on the right hand side of the chart.  with the axis for the top series showing above the axis for the bottom series.  When I do both series on the same chart and set both y axis to show on the right side, they appear with one to the left and one to the right

This is how the y axis gets arranged if I do two series each with it’s own Y Axis on one chart

+---------------------------------------------------+
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
|---------------------------------------------------|
| |
+---------------------------------------------------+

This is what I am looking for.

+---------------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| |---|
| | |
| | |
| | |
|---------------------------------------------------|
| |
+---------------------------------------------------+

#4

Hi jmonroe

I apologise as I seem to have misunderstood what you were asking in your original post, however I think I understand what you are trying to acheive now. Unfortunatly what you are describing can not be done with a single ShinobiChart. My suggestion would be two use two ShinobiCharts like this:

+---------------------------------------------------+
| | |
| | |
| | |
| | |
| First ShinobiChart Here | |
| | |
| | |
| | |
| | |
|----------------------------------------------|----|
| First ShinobiChart x Axis | |
|----------------------------------------------|----|
| | |
| Second ShinobiChart Here | |
| | |
|---------------------------------------------------|
| Second ShinobiChart x Axis |
+---------------------------------------------------+

I would then proceed to hide the First Shinobi Chart x Axis by setting the following properties on it: 

axis.style.majorTickStyle.showLabels = NO; 
axis.style.majorTickStyle.showTicks = NO;

Remember to make sure not to give the First ShinobiChart x axis a title as that will cause the x axis to show up in your chart. That way you should be able to achieve your desired effect:

+---------------------------------------------------+
| | |
| | |
| | |
| | |
| First ShinobiChart Here | |
| | |
| | |
| | |
| | |
|----------------------------------------------|----|
| | |
| Second ShinobiChart Here | |
| | |
|---------------------------------------------------|
| Second ShinobiChart X Axis |
+---------------------------------------------------+

Kind regards,

Daniel Allsop