Jesús

Linked Chart with Data String Method

Recommended Posts

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 !!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by Jesús

Share this post


Link to post
Share on other sites

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 !!

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 !!

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 by Jesús

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 !!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now