natg504

Zoom Line Chart With Linkedchart

Recommended Posts

1. Is it possible to create a zoom line chart and have it set up as a LinkedChart? I want to be able to click on a point in the zoom line chart, and then a separate chart below it will update. I can do this with a regular line chart, but I'd like to use a zoom line chart.

 

2. Also, I want to be able to pull the data from a database, rather than an xml file. I've tried using "myChart.setXMLData(strXML);" in place of "myChart.setXMLUrl("summary-data-all.xml");", but it is not loading any data.

 

<script type="text/javascript" src="includes/FusionCharts.js"></script>

<cfset strXML = "<chart showBorder='1' caption='Yearly Sales' xAxisName='Year' yAxisName='Sales'><categories><category label='2004' /><category label='2005' /><category label='2006' /><category label='2007' /></categories><dataset seriesName='Sales'><set value='37800' link='newchart-xml-2004-quarterly' /><set value='21900' link='newchart-xml-2005-quarterly' /><set value='32900' link='newchart-xml-2006-quarterly' /><set value='39800' link='newchart-xml-2007-quarterly' /></dataset><linkeddata id='2004-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2004'xAxisName='Quarter' yAxisName='Sales' ><set label='Q1' value='11700' /><set label='Q2' value='8600' /><set label='Q3' value='6900' /><set label='Q4' value='10600' /></chart></linkeddata><linkeddata id='2005-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2005'xAxisName='Quarter' yAxisName='Sales'><set label='Q1' value='5500' /><set label='Q2' value='7100' /><set label='Q3' value='3900' /><set label='Q4' value='5400' /></chart></linkeddata><linkeddata id='2006-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2006'xAxisName='Quarter' yAxisName='Sales'><set label='Q1' value='6700' /><set label='Q2' value='9200' /><set label='Q3' value='10800' /><set label='Q4' value='6200' /></chart></linkeddata><linkeddata id='2007-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2007'xAxisName='Quarter' yAxisName='Sales'> <set label='Q1' value='8900' /><set label='Q2' value='6600' /><set label='Q3' value='11200' /><set label='Q4' value='13100' /></chart></linkeddata></chart>"/>

<div id="chartContainer">FusionCharts will load here</div>

<div id="linkedchart-container" ><em>LinkedCharts</em> will load here</div>

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

var myChart = new FusionCharts( "includes/ZoomLine.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLData(strXML);
myChart.render("chartContainer");

FusionCharts("myChartId").configureLink ({
swfUrl : "includes/Pie3D.swf",
renderAt : "linkedchart-container",
overlayButton: {show : false }
});

// -->
</script>

Edited by natg504

Share this post


Link to post
Share on other sites

I've figured out the second question, but I still would like to know how to link a zoom line chart.

 

<script type="text/javascript" src="includes/FusionCharts.js"></script>

<cfset strXML = "<chart showBorder='1' caption='Yearly Sales' xAxisName='Year' yAxisName='Sales'><categories><category label='2004' /><category label='2005' /><category label='2006' /><category label='2007' /></categories><dataset seriesName='Sales'><set value='37800' link='newchart-xml-2004-quarterly' /><set value='21900' link='newchart-xml-2005-quarterly' /><set value='32900' link='newchart-xml-2006-quarterly' /><set value='39800' link='newchart-xml-2007-quarterly' /></dataset><linkeddata id='2004-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2004'xAxisName='Quarter' yAxisName='Sales' ><set label='Q1' value='11700' /><set label='Q2' value='8600' /><set label='Q3' value='6900' /><set label='Q4' value='10600' /></chart></linkeddata><linkeddata id='2005-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2005'xAxisName='Quarter' yAxisName='Sales'><set label='Q1' value='5500' /><set label='Q2' value='7100' /><set label='Q3' value='3900' /><set label='Q4' value='5400' /></chart></linkeddata><linkeddata id='2006-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2006'xAxisName='Quarter' yAxisName='Sales'><set label='Q1' value='6700' /><set label='Q2' value='9200' /><set label='Q3' value='10800' /><set label='Q4' value='6200' /></chart></linkeddata><linkeddata id='2007-quarterly'><chart showBorder='1' caption='Quarterly Sales Summary' subcaption='For the year 2007'xAxisName='Quarter' yAxisName='Sales'> <set label='Q1' value='8900' /><set label='Q2' value='6600' /><set label='Q3' value='11200' /><set label='Q4' value='13100' /></chart></linkeddata></chart>"/>

<div id="chartContainer">FusionCharts will load here</div>

<div id="linkedchart-container" ><em>LinkedCharts</em> will load here</div>

<script type="text/javascript"><!--
      <cfoutput>var #toScript(strXML, "strXML")#;</cfoutput>

var myChart = new FusionCharts( "includes/ZoomLine.swf", "myChartId", "400", "300", "0", "1" );
myChart.setXMLData(strXML);
myChart.render("chartContainer");

FusionCharts("myChartId").configureLink ({
swfUrl : "includes/Pie3D.swf",
renderAt : "linkedchart-container",
overlayButton: {show : false }
});

// -->
</script>

Share this post


Link to post
Share on other sites
Guest Angie

Hi,

 

I am afraid, Zoom Line chart does not support the feature you are looking for, at this time.

 

We have taken a note of your request here and added the same in our wishlist.

 

We will try to implement this feature in our future upgrades.

 

Thank you very much for your continued patience and patronage.

 

Hope you have a great day!

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