Linked Chart with Data String Method

[Jesús]

Hi there!!

 

I am testing the linked charts but i can not be able to get the desire result.

 

Here is the thing:

 

I created a MSCombiDY2D chart,  and I have generated the data with  a mysql query, then and just for testing, I applied the example from your web (Home > FusionCharts XT Data Formats > XML > LinkedCharts XML), and the string data was set like in the attached text.

 

The chart is rendering  correctly, but when I click on the colum to get next chart it doesn't work, and it says "No data to display". 

 

Please guide me to use correctly this method. 

 

Regars !!

[Guest Sashibhusan]

Hey,

 

I am not able to find any attachment.

 

It seems, you are using the sample XML string from : http://docs.fusioncharts.com/charts/contents/DataFormats/XML/LinkedCharts.html

 

Also the parent chart you are rendering is "MSCombiDY2D". whose data will be in multi-series data format.

 

If I have understood your query correctly, please note that the XML data from the link, providing the data in single series. So you could need to change the chart type for child chart to single series by using "configureLink()" function.

 

For more information on "Creating LinkedCharts", please visit the link: http://docs.fusioncharts.com/charts/contents/DrillDown/LinkedCharts.html

 

Hope this helps!

 

Looking forward to your valuable response.

[Jesús]

Hi Sashibhusan, 
 
Thanks for your answer, I want to share with you the file content that i'm not attached in my las post, meanwhile i'll read the information that you send me. 

 

One more thing, do you have an example from configureLink() with data string method?
 
Regards !!

 

<script type="text/javascript" ><!--

 // Instantiate the Chart 

 var chart_chart01 = new FusionCharts( 

  {  "swfUrl" : "charts/MSCombiDY2D.swf",  

      "width" : "1000",  

 "height" : "500",  

 "renderAt" : "chart01Div",  

 "dataFormat" : "xml",  

 "id" : "chart01",  

 "wMode" : "opaque",  

      "dataSource" : "<chart

                       bgColor='ffffff'                 

  bgAlpha='100'                 

  showBorder='1'                 

  borderColor='ffffff'                 

  borderThickness='0'                 

  canvasBgColor='ffffff'                 

  canvasBgAlpha='100'                 

  canvasBorderColor='000000'                 

  canvasBorderThickness='1'                 

  canvasBorderAlpha='100'                 

  logoURL='images/corner.jpg'                 

  logoAlpha='100'                 

  logoPosition='TL'                 

  caption='Total de Transacciones por Año'                 

  subCaption= 'información al Lunes, 20 de Enero de 2014'                 

  PYAxisName='Millones de Transacciones'                 

  SYAxisName='Incremento Porcentual'

  xAxisName='Años'

  useRoundEdges='1'

  plotSpacePercent='65'                 

  sNumberSuffix='%'                 

  lineColor='B90000'                 

  labelDisplay='auto'                 

  showToolTip='1'                 

  toolTipBgColor='B90000'                 

  toolTipBorderColor='990000'                 

  toolTipSepChar=' / '                 

  showToolTipShadow='1'                 

  showValues='0'                 

  rotateValues='1'                

  baseFont='Tauri'                 

  baseFontSize='12'                 

  baseFontColor='000000'                

  outCnvBaseFont='Tauri'                 

  outCnvBaseFontSize='12'                 

  outCnvBaseFontColor='000000'                 

  adjustDiv='0'                 

  divLineColor='990000'                 

  divLineThickness='1'                 

  divLineAlpha='20'                 

  divLineIsDashed='1'                 

  divLineDashLen='6'                 

  divLineDashGap='3'                 

  chartLeftMargin='5'                 

  chartRightMargin='5'                 

  chartTopMargin='5'                 

  chartBottomMargin='5'                 

  captionPadding='5'                 

  xAxisNamePadding='5'                 

  yAxisNamePadding='5'                 

  yAxisValuesPadding='5'                 

  labelPadding='5'                 

  valuePadding='5'                 

  canvasPadding='8'                 

  formatNumberScale='0'                 

  setAdaptiveYMin='1'                 

  centerYaxisName='1'>

                      <categories>

  <category label='2011' /><vLine linePosition='0' color='990000' alpha='20' dashed='1' dashLen='6'/>

  <category label='2012' /><vLine linePosition='0' color='990000' alpha='20' dashed='1' dashLen='6'/>

  <category label='2013' /><vLine linePosition='0' color='990000' alpha='20' dashed='1' dashLen='6'/>

  <category label='2014' /><vLine linePosition='0' color='990000' alpha='20' dashed='1' dashLen='6'/>

 </categories>

 <dataset seriesName='Transacciones' color='ebebeb'>

  <set value='1382752276' link='newchart-xml-2004-quarterly' />

  <set value='1708053302' link='newchart-xml-2004-quarterly' />

  <set value='1932360888' link='newchart-xml-2004-quarterly' />

  <set value='107777498' link='newchart-xml-2004-quarterly' />

 </dataset>

<dataset seriesName='Incremento Anual' parentYAxis='S' renderAs='Line' anchorRadius='4' lineThickness='3'>

 <set value='21.88' link='newchart-xml-2004-quarterly'/>

 <set value='23.53' link='newchart-xml-2004-quarterly'/>

 <set value='13.13' link='newchart-xml-2004-quarterly'/>

 <set value='-94.42' link='newchart-xml-2004-quarterly'/>

</dataset>

<styles>

 <definition>

  <style name='CFontStyle'  type='font' font='Trebuchet MS' size='15' color='000000' bold='0'/>

  <style name='SCFontStyle' type='font' font='Tauri' size='12' color='000000' bold='0'/>

  <style name='TTFontStyle' type='font' font='Tauri' size='11' color='FFFFFF' />

  <style name='YAFontStyle' type='font' font='Tauri' size='13' color='000000' bold='0' />

  <style name='XAFontStyle' type='font' font='Tauri' size='13' color='000000' bold='0' />

 </definition>

 <application>

  <apply toObject='Caption' styles='CFontStyle' />

  <apply toObject='subCaption' styles='SCFontStyle' />

  <apply toObject='Tooltip' styles='TTFontStyle' />

  <apply toObject='YAxisName' styles='YAFontStyle' />

  <apply toObject='XAxisName' styles='XAFontStyle' /> 

  </application>

 </styles>

 <linkeddata id='2004-quarterly'>

  <chart caption='Quarterly Sales Summary' subcaption='For the year 2004' xAxisName='Quarter' yAxisName='Sales' >

   <set label='Q1' value='3700' />

<set label='Q2' value='2900' />

<set label='Q3' value='3200' />

<set label='Q4' value='3900' />

  </chart>  

 </linkeddata>

                     </chart>" } ).render();

 // --></script>

Edited January 22, 2014 by Jesús

[Guest Sashibhusan]

Hi,

 

Please find the sample implementation of your code snippet, having drill down feature using configureLink() with data string method, from the link: https://www.dropbox.com/s/cp59t7w1ozkumym/LinkedChart_Sample.zip

 

Hope this helps!

[Jesús]

Hi Sashibhusan, 

 

I saw your example and i think that it can help me a lot, is it possible to implement this example without javascript? If it is posile, how can I do it?

 

Thanks !!

[Guest Sashibhusan]

Hi,

 

If you are willing to implement the linked chart in PHP and provide the child chart data embedded in the parent chart XML, only the chart rendering part can be implemented using FuisonCharts PHP wrapper file "FusionCharts.php" and the configure link (for changing the child chart type) section needs to be implemented using JavaScript code.

 

For more details on this, please refer the link: http://blog.fusioncharts.com/2012/03/javascript-linkedcharts-in-php-and-mysql-using-fusioncharts-xt/

 

However, I would suggest you to implement linked chart feature by invoking a separate PHP file on click of the data plot of parent chart and in the invoked PHP file create a new child chart based on the parameters passed with the URL as GET/POST request.

 

For more information on "Creating LinkedCharts", please visit the link: http://docs.fusionch...nkedCharts.html

 

Hope this helps!

[Jesús]

Hi Sashibhusan, 

 

I read your last information and it was useful, thanks a lot. It works fine with my data querys, at last, I tried to aply styles, canvas color, div lines color, etc etc, but they did not work, so i would like to know wich  Functional Attributes or Chart Cosmetics works with this method?

 

Regards !!

[Guest Sashibhusan]

Hi,

 

Could you please clarify, how you are specifying the chart cosmetics attributes?

 

Please note that the custom colors on canvas, DIV lines etc. can be set by using the corresponding attributes in the chart element of your XML data.

 

For more information on "2D Dual Y Combination Chart Specification Sheet", please visit the link: http://docs.fusioncharts.com/charts/contents/ChartSS/Combi2DDY.html

 

Hope this helps!

[Jesús]

Hi Sashibhusan, 

 

 

I resolved correctly the trouble with the chart styles, and it is plotting very fine.

 

Now I have a question with the configureLink() function, I created the data that I want to plot and I think that they have the correct format, I've plotted correctly the first level but I could not be able to plot the second level. 

 

Could you help me to configure correctly the configureLink() function?

 

FusionCharts("resumen_txn").configureLink

(

{ swfUrl : "charts/Line.swf", // Specify the chart type

overlayButton:{

message: ' Cerrar ',

font : 'Tauri',

fontColor : 'ffffff',

fontSize : '13',

bold : '0',

padding : '5',

bgColor:'b90000',

borderColor: 'b90000'

}

},0 );    // The first drill-down level is 0 (zero)

 

My sourcecode is a little long, so here it is a link to have a view of it: https://gist.github.com/anonymous/e2c833b6ecb394a63615

 

Regards !!

Edited January 29, 2014 by Jesús

[Guest Sashibhusan]

Hi,

 

There are two possible ways to configure the child chart using configureLink() function.

 

a. By passing chart object along with the drill-down level as second parameter, which needs to be configured.

 

Syntax:

configureLink(objConfiguration: Object, level:Number)

In this approach, only one level can be configured at a time.

 

b. By passing the array of drill-down chart objects.

 

Syntax:

configureLink(arrConfiguration: Array)

Ref. Code:

FusionCharts("resumen_txn").configureLink
(
[
{ swfUrl : "charts/Line.swf", // Specify the chart type
overlayButton:{
message: ' Cerrar ',
font : 'Tauri',
fontColor : 'ffffff',
fontSize : '13',
bold : '0',
padding : '5',
bgColor:'b90000',
borderColor: 'b90000'
}
},
{swfUrl : "charts/Pie2D.swf"} // This will configure the second level drill-down to plot Pie2D chart
]
 );

Hope this helps!

Looking forward to your valuable response.

[Jesús]

My dear friend, 

 

I tried to pass the array of drill-down chart objects. But It didn't work, can you guide me to use this option? Or if you can see an error that I passed away I'll be thankfull that you help me.

 

This is my source code:  https://gist.github.com/anonymous/c26a2e4a4d5847d50d02

 

Regards !!

[Guest Sashibhusan]

Hey,

 

I have gone through your code and it seems you have not formatted the XML data correctly for multilevel drilldown.

 

Please note that for the first level of drill down, the child chart data should be inside the <linkeddata></linkeddata> element and kept inside the parent <chart></chart> element. Similarly for second level drill down, the sub-child data should be kept inside the <chart> </chart> element of first drill-down data and so on.

 

However, I have seen for the second level drill down XML for ID "enero2011", you have kept the data outside the first level drill down chart having ID "2011".

 

So, please go through the step by step instructions from "Creating LinkedCharts > Creating LinkedCharts with multiple levels of drilldown" section from: http://docs.fusioncharts.com/charts/contents/DrillDown/LinkedCharts.html and modify the XML data accordingly and try once again.

 

Hope this will help you.

[Jesús]

I reviewed your last comments and I did the change that you told me.

 

Finally It works correctly.

 

I'm thankful for all your support.

 

Regards !!

[Guest Sashibhusan]

Glad that your issue has been resolved.