Qucik Question About which chart is this

[Bharat Patel]

Hi There,

 

I have been reading the documentation and wanted to check which combination chart will best meet the requirements to convert this existing chart to fusion chart.

Please take a look at the image of the chart attached

 

Documentation reference Link: http://docs.fusioncharts.com/tutorial-setup-list-of-charts.html

 

I think that my best chance would be to implement  mscombidy2d but not sure as it does not mention stacked column in combination with line with dual axis.

 

Any help and advice on this is appreciated.

 

Thanks and Kind Regards,

 

Bharat Patel

Edited September 19, 2014 by bharatpatel

[Bharat Patel]

Oops... this is me being stupid... I think I found the answer - It should be msstackedcolumn2dlinedy as my chart currently has stacked column and line with dual y axis... What if I was asked to add area to this chart in future...hmm. I hope by then fusion would have added some more features to answer this question...

Can someone still point me to an example of this chart to take a look at the sample implementation...

Edited September 19, 2014 by bharatpatel

[Bharat Patel]

I tried putting something together but looks like I still have not got it to work. any help??

<div id='cphPageBody_chaSearchChartDiv'>

Chart.

</div>

<script type="text/javascript">

if (FusionCharts && FusionCharts('cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion')) FusionCharts('cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion').dispose();

var data = "<chart caption='Chart Title' pyaxisname='Primary Y Axis Title' syaxisname='Secondary Y Axis Title' showValues='0' showPlotBorder='0' borderColor='DDDDDD' borderThickness='0' canvasBorderThickness='1' alternateHGridColor='F1F1F1' divLineColor='DDDDDD' vDivLineColor='DDDDDD' vDivLineThickness='1' vDivLineDashed='1' hDivLineDashed='0' numVDivLines='20' numDivLines='10' divLineAlpha='0' pyAxisMinValue='0' pyAxisMaxValue='250' syaxisminvalue='0' syaxismaxvalue='350' formatNumber='1' formatNumberScale='0' sformatNumberScale='0' sNumberPrefix='' rotateValues='0' canvasPadding='5' valuePadding='0' baseFont='Verdana' valuePosition='AUTO' paletteColors='11FF11, FFFF10, FF7F00, FF1111, 2664C1, C73800, 46B1C2, 76C82D, ECB346, BAA3F0, 228999, FA7550, 9ACED6, 1E545C' plotGradientColor='' labelStep='2' bgColor='FEFEFE' showAlternateHGridColor='1' alternateHGridAlpha='50'>";

data = data + "<categories> <category label='2006 Q1' /> <category label='2006 Q2' /> <category label='2006 Q3' /> <category label='2006 Q4' /> <category label='2007 Q1' /> <category label='2007 Q2' /> <category label='2007 Q3' /> <category label='2007 Q4' /> <category label='2008 Q1' /> <category label='2008 Q2' /> <category label='2008 Q3' /> <category label='2008 Q4' /> <category label='2009 Q1' /> <category label='2009 Q2' /> <category label='2009 Q3' /> <category label='2009 Q4' /> <category label='2010 Q1' /> <category label='2010 Q2' /> <category label='2010 Q3' /> <category label='2010 Q4' /> <category label='2011 Q1' /> <category label='2011 Q2' /> <category label='2011 Q3' /> <category label='2011 Q4' /> <category label='2012 Q1' /> <category label='2012 Q2' /> <category label='2012 Q3' /> <category label='2012 Q4' /> <category label='2013 Q1' /> <category label='2013 Q2' /> <category label='2013 Q3' /> <category label='2013 Q4' /> <category label='2014 Q1' /> <category label='2014 Q2' /> <category label='2014 Q3' /></categories>";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='IPO' > <set value='43' />  <set value='27' />  <set value='55' />  <set value='33' />  <set value='65' />  <set value='36' />  <set value='41' />  <set value='11' />  <set value='23' />  <set value='12' />  <set value='6' />  <set value='6' />  <set value='26' />  <set value='26' />  <set value='49' />  <set value='37' />  <set value='35' />  <set value='40' />  <set value='96' />  <set value='49' />  <set value='71' />  <set value='37' />  <set value='40' />  <set value='48' />  <set value='49' />  <set value='45' />  <set value='45' />  <set value='77' />  <set value='83' />  <set value='46' />  <set value='76' />  <set value='58' />  <set value='90' />  <set value='54' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='Recapitalisation' > <set value='17' />  <set value='10' />  <set value='6' />  <set value='9' />  <set value='12' />  <set value='2' />  <set value='3' />  <set value='6' />  <set value='4' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='7' />  <set value='9' />  <set value='14' />  <set value='11' />  <set value='27' />  <set value='39' />  <set value='28' />  <set value='14' />  <set value='6' />  <set value='14' />  <set value='19' />  <set value='8' />  <set value='18' />  <set value='15' />  <set value='22' />  <set value='18' />  <set value='11' />  <set value='15' />  <set value='14' />  <set value='12' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='Restructuring' > <set value='2' />  <set value='4' />  <set value='2' />  <set value='4' />  <set value='2' />  <set value='3' />  <set value='4' />  <set value='11' />  <set value='12' />  <set value='15' />  <set value='19' />  <set value='36' />  <set value='26' />  <set value='20' />  <set value='29' />  <set value='13' />  <set value='15' />  <set value='13' />  <set value='18' />  <set value='13' />  <set value='19' />  <set value='9' />  <set value='13' />  <set value='14' />  <set value='14' />  <set value='12' />  <set value='9' />  <set value='16' />  <set value='17' />  <set value='12' />  <set value='5' />  <set value='13' />  <set value='13' />  <set value='7' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='Sale to GP' > <set value='79' />  <set value='73' />  <set value='78' />  <set value='88' />  <set value='108' />  <set value='93' />  <set value='85' />  <set value='52' />  <set value='72' />  <set value='70' />  <set value='30' />  <set value='17' />  <set value='24' />  <set value='29' />  <set value='31' />  <set value='42' />  <set value='57' />  <set value='83' />  <set value='98' />  <set value='79' />  <set value='115' />  <set value='95' />  <set value='89' />  <set value='92' />  <set value='92' />  <set value='90' />  <set value='123' />  <set value='73' />  <set value='90' />  <set value='106' />  <set value='119' />  <set value='105' />  <set value='113' />  <set value='118' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='Sale to Management' > <set value='13' />  <set value='4' />  <set value='7' />  <set value='6' />  <set value='12' />  <set value='9' />  <set value='4' />  <set value='11' />  <set value='8' />  <set value='5' />  <set value='3' />  <set value='3' />  <set value='11' />  <set value='6' />  <set value='5' />  <set value='2' />  <set value='8' />  <set value='5' />  <set value='10' />  <set value='9' />  <set value='7' />  <set value='8' />  <set value='9' />  <set value='11' />  <set value='12' />  <set value='5' />  <set value='10' />  <set value='10' />  <set value='14' />  <set value='11' />  <set value='9' />  <set value='12' />  <set value='10' />  <set value='3' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='area' seriesName='Trade Sale' > <set value='130' />  <set value='94' />  <set value='133' />  <set value='126' />  <set value='185' />  <set value='155' />  <set value='131' />  <set value='111' />  <set value='157' />  <set value='99' />  <set value='69' />  <set value='57' />  <set value='67' />  <set value='66' />  <set value='106' />  <set value='94' />  <set value='127' />  <set value='129' />  <set value='173' />  <set value='163' />  <set value='196' />  <set value='178' />  <set value='146' />  <set value='170' />  <set value='196' />  <set value='157' />  <set value='207' />  <set value='163' />  <set value='189' />  <set value='186' />  <set value='212' />  <set value='160' />  <set value='195' />  <set value='174' />  </dataset> ";

data = data + "<dataset  parentyaxis='S' renderAs='line' seriesName='Quarterly Total' > <set value='42.87' />  <set value='35.55' />  <set value='79.72' />  <set value='60.57' />  <set value='105.23' />  <set value='57.52' />  <set value='65.44' />  <set value='24.56' />  <set value='68.73' />  <set value='23.58' />  <set value='13.38' />  <set value='5.25' />  <set value='13.78' />  <set value='17.45' />  <set value='54.94' />  <set value='34.8' />  <set value='57.28' />  <set value='71.63' />  <set value='89.44' />  <set value='87.32' />  <set value='138.47' />  <set value='61.4' />  <set value='49.08' />  <set value='51.75' />  <set value='93.23' />  <set value='76.94' />  <set value='83.58' />  <set value='53.68' />  <set value='105.89' />  <set value='77.87' />  <set value='104.43' />  <set value='94.03' />  <set value='145.83' />  <set value='96.89' />  </dataset> ";

data = data + "<styles> <definition> <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /> <style name='CaptionStyle' type='font' font='Verdana' isHTML='1' /> </definition> <application> <apply toObject='Canvas' styles='CanvasAnim' /> <apply toObject='Caption' styles='CaptionStyle' /> </application></styles></chart>";

var chart_cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion = new FusionCharts({

"renderer": "javascript",

"dataFormat": "xml",

"scaleMode": "noScale",

"renderAt": "cphPageBody_chaSearchChartDiv",

"lang": "EN",

"debugMode": "0",

"swfUrl": "msstackedcolumn2dlinedy",

"id": "cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion",

"wMode": "opaque", "width": "100%", "height": "350px", "registerWithJS": "1",

"dataSource": data

}).render()

</script>

[Bharat Patel]

got it to work. However there are some concerns about why is the implementation different from the mscombidy2d. This one needs the line data to be addressed differently and also the columns data to be wrapped into a single dataset super wrapper. I think that this could have been done using the same style as  mscombidy2d allowing a more linear approach to writing charts. 

 

<div id='cphPageBody_chaSearchChartDiv'>

Chart.

</div>

<script type="text/javascript">

if (FusionCharts && FusionCharts('cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion')) FusionCharts('cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion').dispose();

var data = "<chart caption='Chart Title' pyaxisname='Primary Y Axis Title' syaxisname='Secondary Y Axis Title' showValues='0' showPlotBorder='0' borderColor='DDDDDD' borderThickness='0' canvasBorderThickness='1' alternateHGridColor='F1F1F1' divLineColor='DDDDDD' vDivLineColor='DDDDDD' vDivLineThickness='1' vDivLineDashed='1' hDivLineDashed='0' numVDivLines='20' numDivLines='10' divLineAlpha='0' pyAxisMinValue='0' pyAxisMaxValue='250' syaxisminvalue='0' syaxismaxvalue='350' formatNumber='1' formatNumberScale='0' sformatNumberScale='0' sNumberPrefix='' rotateValues='0' canvasPadding='5' valuePadding='0' baseFont='Verdana' valuePosition='AUTO' paletteColors='11FF11, FFFF10, FF7F00, FF1111, 2664C1, C73800, 46B1C2, 76C82D, ECB346, BAA3F0, 228999, FA7550, 9ACED6, 1E545C' plotGradientColor='' labelStep='2' bgColor='FEFEFE' showAlternateHGridColor='1' alternateHGridAlpha='50'>";

data = data + "<categories> <category label='2006 Q1' /> <category label='2006 Q2' /> <category label='2006 Q3' /> <category label='2006 Q4' /> <category label='2007 Q1' /> <category label='2007 Q2' /> <category label='2007 Q3' /> <category label='2007 Q4' /> <category label='2008 Q1' /> <category label='2008 Q2' /> <category label='2008 Q3' /> <category label='2008 Q4' /> <category label='2009 Q1' /> <category label='2009 Q2' /> <category label='2009 Q3' /> <category label='2009 Q4' /> <category label='2010 Q1' /> <category label='2010 Q2' /> <category label='2010 Q3' /> <category label='2010 Q4' /> <category label='2011 Q1' /> <category label='2011 Q2' /> <category label='2011 Q3' /> <category label='2011 Q4' /> <category label='2012 Q1' /> <category label='2012 Q2' /> <category label='2012 Q3' /> <category label='2012 Q4' /> <category label='2013 Q1' /> <category label='2013 Q2' /> <category label='2013 Q3' /> <category label='2013 Q4' /> <category label='2014 Q1' /> <category label='2014 Q2' /> <category label='2014 Q3' /></categories>";

data = data + "<dataset> <dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='IPO' > <set value='43' />  <set value='27' />  <set value='55' />  <set value='33' />  <set value='65' />  <set value='36' />  <set value='41' />  <set value='11' />  <set value='23' />  <set value='12' />  <set value='6' />  <set value='6' />  <set value='26' />  <set value='26' />  <set value='49' />  <set value='37' />  <set value='35' />  <set value='40' />  <set value='96' />  <set value='49' />  <set value='71' />  <set value='37' />  <set value='40' />  <set value='48' />  <set value='49' />  <set value='45' />  <set value='45' />  <set value='77' />  <set value='83' />  <set value='46' />  <set value='76' />  <set value='58' />  <set value='90' />  <set value='54' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='Recapitalisation' > <set value='17' />  <set value='10' />  <set value='6' />  <set value='9' />  <set value='12' />  <set value='2' />  <set value='3' />  <set value='6' />  <set value='4' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='2' />  <set value='7' />  <set value='9' />  <set value='14' />  <set value='11' />  <set value='27' />  <set value='39' />  <set value='28' />  <set value='14' />  <set value='6' />  <set value='14' />  <set value='19' />  <set value='8' />  <set value='18' />  <set value='15' />  <set value='22' />  <set value='18' />  <set value='11' />  <set value='15' />  <set value='14' />  <set value='12' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='Restructuring' > <set value='2' />  <set value='4' />  <set value='2' />  <set value='4' />  <set value='2' />  <set value='3' />  <set value='4' />  <set value='11' />  <set value='12' />  <set value='15' />  <set value='19' />  <set value='36' />  <set value='26' />  <set value='20' />  <set value='29' />  <set value='13' />  <set value='15' />  <set value='13' />  <set value='18' />  <set value='13' />  <set value='19' />  <set value='9' />  <set value='13' />  <set value='14' />  <set value='14' />  <set value='12' />  <set value='9' />  <set value='16' />  <set value='17' />  <set value='12' />  <set value='5' />  <set value='13' />  <set value='13' />  <set value='7' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='Sale to GP' > <set value='79' />  <set value='73' />  <set value='78' />  <set value='88' />  <set value='108' />  <set value='93' />  <set value='85' />  <set value='52' />  <set value='72' />  <set value='70' />  <set value='30' />  <set value='17' />  <set value='24' />  <set value='29' />  <set value='31' />  <set value='42' />  <set value='57' />  <set value='83' />  <set value='98' />  <set value='79' />  <set value='115' />  <set value='95' />  <set value='89' />  <set value='92' />  <set value='92' />  <set value='90' />  <set value='123' />  <set value='73' />  <set value='90' />  <set value='106' />  <set value='119' />  <set value='105' />  <set value='113' />  <set value='118' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='Sale to Management' > <set value='13' />  <set value='4' />  <set value='7' />  <set value='6' />  <set value='12' />  <set value='9' />  <set value='4' />  <set value='11' />  <set value='8' />  <set value='5' />  <set value='3' />  <set value='3' />  <set value='11' />  <set value='6' />  <set value='5' />  <set value='2' />  <set value='8' />  <set value='5' />  <set value='10' />  <set value='9' />  <set value='7' />  <set value='8' />  <set value='9' />  <set value='11' />  <set value='12' />  <set value='5' />  <set value='10' />  <set value='10' />  <set value='14' />  <set value='11' />  <set value='9' />  <set value='12' />  <set value='10' />  <set value='3' />  </dataset> ";

data = data + "<dataset  parentyaxis='P' renderAs='msstackedcolumn2d' seriesName='Trade Sale' > <set value='130' />  <set value='94' />  <set value='133' />  <set value='126' />  <set value='185' />  <set value='155' />  <set value='131' />  <set value='111' />  <set value='157' />  <set value='99' />  <set value='69' />  <set value='57' />  <set value='67' />  <set value='66' />  <set value='106' />  <set value='94' />  <set value='127' />  <set value='129' />  <set value='173' />  <set value='163' />  <set value='196' />  <set value='178' />  <set value='146' />  <set value='170' />  <set value='196' />  <set value='157' />  <set value='207' />  <set value='163' />  <set value='189' />  <set value='186' />  <set value='212' />  <set value='160' />  <set value='195' />  <set value='174' />  </dataset> </dataset>";

data = data + "<lineset  parentyaxis='S' renderAs='line' seriesName='Quarterly Total' > <set value='42.87' />  <set value='35.55' />  <set value='79.72' />  <set value='60.57' />  <set value='105.23' />  <set value='57.52' />  <set value='65.44' />  <set value='24.56' />  <set value='68.73' />  <set value='23.58' />  <set value='13.38' />  <set value='5.25' />  <set value='13.78' />  <set value='17.45' />  <set value='54.94' />  <set value='34.8' />  <set value='57.28' />  <set value='71.63' />  <set value='89.44' />  <set value='87.32' />  <set value='138.47' />  <set value='61.4' />  <set value='49.08' />  <set value='51.75' />  <set value='93.23' />  <set value='76.94' />  <set value='83.58' />  <set value='53.68' />  <set value='105.89' />  <set value='77.87' />  <set value='104.43' />  <set value='94.03' />  <set value='145.83' />  <set value='96.89' />  </lineset> ";

data = data + "<styles> <definition> <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /> <style name='CaptionStyle' type='font' font='Verdana' isHTML='1' /> </definition> <application> <apply toObject='Canvas' styles='CanvasAnim' /> <apply toObject='Caption' styles='CaptionStyle' /> </application></styles></chart>";

var chart_cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion = new FusionCharts({

"renderer": "javascript",

"dataFormat": "xml",

"scaleMode": "noScale",

"renderAt": "cphPageBody_chaSearchChartDiv",

"lang": "EN",

"debugMode": "0",

"swfUrl": "msstackedcolumn2dlinedy",

"id": "cphPageBody_ucDealsByQuarter_ucDealsByQuarter_Fusion",

"wMode": "opaque", "width": "100%", "height": "350px", "registerWithJS": "1",

"dataSource": data

}).render()

</script>

[Swarnam]

Hey Bharath,

 

Glad to know you have been able to resolve most of the issue.

 

A combination chart is a chart that combines two or more charts types in a single charts e.g., a column charts series and a line charts series. In a dual Y-axis combination charts, each axis has its own unit and magnitude, and each data series conforms to one of these axis.

 

The difference in the way the data is being represented for both combination charts is because:

 

In 2D Dual Y Combination Chart, you can associate any dataset with primary/secondary axis. In Multi-series Stacked Column 2D Line Dual Y Combination Chart, lineset element is required because line element by default will be plotted against secondary axis and for stacked data sets have to be broken down into their constituents and plotted against Primary axis.

 

I hope I am able to clarify the doubts.

[Bharat Patel]

Hi Swarnam,

Thanks for the info. To be honest, I am still not fully convinced with the idea as there is an attribute within the data set element where one can define the minute details of where the data should be plotted.

I do not fully understand the implications of having super data set wrapper (for my scenario) for data sets in the  Stacked Column 2D Line Dual Y Combination Chart. I am sure that there would be a good reason to it, however I thought that there can be a default grouping based on data plot point axis. I may be wrong but this is just a thought as this is purely from my point of view. The only time this wrapper may be needed is when someone would want to explicitly tell how to group them.

I hope that I made some sense in the discussion.

Once again thanks for taking time to reply!

Kind Regards,

Bharat