Regarding Select Scatter chart( Powercharts V3)

vidyab · December 14, 2007

Hi Team,

I am trying to use the select scatter chart, wherein it executes the selected data for the first time and fails for the second time as it doesn't have the chart attributes like buildchart, styles, vTrendLines etc. Do we have any method to get the selected complete xml data so that it executes for n no of times without any change in the chart look and feel.

I do submit the xml data by using the syntax 'formAction='javaScript:getDataFromChart()' in the xml file. Which internally calls the javascript function in HTML page.

Below is the sample code for your reference

My HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts v3 PowerCharts</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="FusionCharts.js"></script>

<script language="JavaScript">

/**

* getDataFromChart method is called when the user has pressed the

* button to show returned data from chart.

*/

function getDataFromChart(){

var ourChart = getChartFromId("SelectChart");

var arrData = ourChart.getData();

var xmlData=ourChart.getXMLData();

if (arrData.length==0){

alert("Please select atleast one data point on chart by drawing a rectangle");

return;

} ourChart.setDataXML(xmlData);

}

</script>

<style type="text/css">

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.text{

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

</style>

</head>

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

<tr>

<td valign="top" class="text" align="center"> <div id="chartdiv" align="center">

FusionCharts. </div>

<script type="text/javascript">

var chart = new FusionCharts("SelectScatter.swf", "SelectChart", "550", "400", "0", "1");

chart.setDataURL("selectscatter.xml");

chart.render("chartdiv");

</script> </td>

</tr>

</table>

</body>

</html>

XML File :

<chart yaxisname="Sales LY" xaxisname="Margin" xAxisMinValue="29997" xAxisMaxValue="62298679.01" showPlotBorder="0" showFCMenuItem="0" showBorder="0" showAlternateHGridColor="0" numDivLines="3" labelStep="0" is3D="1" formatNumberScale="1" formBtnTitle="Submit" formAction="javascript:getDataFromChart()" decimals="2" clipBubbles="0" chartTopMargin="10" chartRightMargin="10" chartLeftMargin="10" chartBottomMargin="10" borderThickness="0" bgColor="FFFFFF">

<categories verticalLineColor="000000">

<category x="12459735.8" showVerticalLine="1" label="12.46M"></category>

<category x="24919471.6" showVerticalLine="1" label="24.92M"></category>

<category x="37379207.41" showVerticalLine="1" label="37.38M"></category>

<category x="49838943.21" showVerticalLine="1" label="49.84M"></category>

<category x="62298679.01" showVerticalLine="1" label="62.3M"></category>

</categories>

<dataset seriesname="Sales" color="FF3300" anchorSides="4" anchorRadius="4">

<set id='INVEQ324_1' y="0.0" x="29997.0" toolText="Margin : CS - CORP SALE <BR> x = 29,997.00<BR> y = 0.00"></set>

<set id='INVEQ324_2' y="10002742.822" x="16060703.45" toolText="Margin : EB - EXE. BAGS <BR> x = 16,060,703.45<BR> y = 10,002,742.82"></set>

<set id='INVEQ324_3' y="11543976.584" x="21668033.7" toolText="Margin : LB - LADIES BAG <BR> x = 21,668,033.70<BR> y = 11,543,976.58"></set>

<set id='INVEQ324_4' y="33799370.174" x="62298679.01" toolText="Margin : LU - LUGGAGE <BR> x = 62,298,679.01<BR> y = 33,799,370.17"></set>

<set id='INVEQ324_5' y="7546256.408" x="21951296.75" toolText="Margin : PA - PERSNL ACC <BR> x = 21,951,296.75<BR> y = 7,546,256.41"></set>

<set id='INVEQ324_6' y="7833158.888" x="14461247.4" toolText="Margin : SB - SCHOOL BAG <BR> x = 14,461,247.40<BR> y = 7,833,158.89"></set>

<set id='INVEQ324_7' y="5411913.29" x="8744752.2" toolText="Margin : TA - TRAVEL ACC <BR> x = 8,744,752.20<BR> y = 5,411,913.29"></set>

<set id='INVEQ324_8' y="8362590.532" x="15141688.28" toolText="Margin : TB - TRAVEL BAG <BR> x = 15,141,688.28<BR>

y = 8,362,590.53"></set>

</dataset>

<vTrendlines>

<line color="#6600FF" alpha="180"></line>

</vTrendlines>

<styles>

<definition>

<style type="font" size="10" name="MyFirstFontStyle" font="Arial" color="000000"></style>

<style type="font" name="toolName" isHTML="1" bold="1"></style>

</definition>

<application>

<apply toObject="Caption" styles="MyFirstFontStyle"></apply>

<apply toObject="TOOLTIP" styles="toolName"></apply>

</application>

</styles>

</chart>

FusionCharts Support · December 17, 2007

Hi,

Here is a solution that you can try. We are keeping the data in XML format. You can use AJAX to retrieve XML data from XML file/stream if you wish not to hardcode the main XML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 PowerCharts</title>
<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />
<script language="JavaScript" src="FusionCharts.js"></script>
<script language="javascript" type="text/javascript">
 function getXML(){
  var XML="<chart>"+
"<categories>"+
"  <category x='12459735.8' showVerticalLine='1' label='12.46M'></category>"+
"  <category x='24919471.6' showVerticalLine='1' label='24.92M'></category>"+
"  <category x='37379207.41' showVerticalLine='1' label='37.38M'></category>"+
"  <category x='49838943.21' showVerticalLine='1' label='49.84M'></category>"+
"  <category x='62298679.01' showVerticalLine='1' label='62.3M'></category>"+
" </categories>"+
"  <dataset>"+
"  <set id='INVEQ324_1' y='0.0' x='29997.0' toolText='Margin : CS - CORP SALE %26amp;lt;BR%26amp;gt; x = 29,997.00%26amp;lt;BR%26amp;gt; y = 0.00'></set>"+
"  <set id='INVEQ324_2' y='10002742.822' x='16060703.45' toolText='Margin : EB - EXE. BAGS %26amp;lt;BR%26amp;gt; x = 16,060,703.45%26amp;lt;BR%26amp;gt; y = 10,002,742.82'></set>"+
"  <set id='INVEQ324_3' y='11543976.584' x='21668033.7' toolText='Margin : LB - LADIES BAG %26amp;lt;BR%26amp;gt; x = 21,668,033.70%26amp;lt;BR%26amp;gt; y = 11,543,976.58'></set>"+
"  <set id='INVEQ324_4' y='33799370.174' x='62298679.01' toolText='Margin : LU - LUGGAGE %26amp;lt;BR%26amp;gt; x = 62,298,679.01%26amp;lt;BR%26amp;gt; y = 33,799,370.17'></set>"+
"  <set id='INVEQ324_5' y='7546256.408' x='21951296.75' toolText='Margin : PA - PERSNL ACC %26amp;lt;BR%26amp;gt; x = 21,951,296.75%26amp;lt;BR%26amp;gt; y = 7,546,256.41'></set>"+
"  <set id='INVEQ324_6' y='7833158.888' x='14461247.4' toolText='Margin : SB - SCHOOL BAG %26amp;lt;BR%26amp;gt; x = 14,461,247.40%26amp;lt;BR%26amp;gt; y = 7,833,158.89'></set>"+
"  <set id='INVEQ324_7' y='5411913.29' x='8744752.2' toolText='Margin : TA - TRAVEL ACC %26amp;lt;BR%26amp;gt; x = 8,744,752.20%26amp;lt;BR%26amp;gt; y = 5,411,913.29'></set>"+
"  <set id='INVEQ324_8' y='8362590.532' x='15141688.28' toolText='Margin : TB - TRAVEL BAG %26amp;lt;BR%26amp;gt; x = 15,141,688.28%26amp;lt;BR%26amp;gt; y = 8,362,590.53'></set>"+
" </dataset>"+
" <vTrendlines> <line color='6600FF' alpha='180'></line></vTrendlines>"+
"<styles><definition> <style type='font' size='10' name='MyFirstFontStyle' font='Arial' color='000000'></style> <style type='font' name='toolName' isHTML='1' bold='1'></style></definition><application> <apply toObject='Caption' styles='MyFirstFontStyle'></apply> <apply toObject='TOOLTIP' styles='toolName'></apply></application></styles></chart>";
return XML;
 }
 function buildXML(sourceXML){
  var newXML="";
  var rootXML="<chart yaxisname='Sales LY' xaxisname='Margin' xAxisMinValue='29997' xAxisMaxValue='62298679.01' showPlotBorder='0' showFCMenuItem='0' showBorder='0' showAlternateHGridColor='0' numDivLines='3' labelStep='0' is3D='1' formatNumberScale='1' formBtnTitle='Submit' formAction='getDataFromChart()' decimals='2' clipBubbles='0' chartTopMargin='10' chartRightMargin='10' chartLeftMargin='10' chartBottomMargin='10' borderThickness='0' bgColor='FFFFFF'>";
  var catXML="<categories verticalLineColor='000000'>";
  var datasetXML="<dataset seriesname='Sales' color='FF3300' anchorSides='4' anchorRadius='4'>";
  var otherXML="<vTrendlines> <line color='6600FF' alpha='180'></line></vTrendlines><styles><definition> <style type='font' size='10' name='MyFirstFontStyle' font='Arial' color='000000'></style> <style type='font' name='toolName' isHTML='1' bold='1'></style></definition><application> <apply toObject='Caption' styles='MyFirstFontStyle'></apply> <apply toObject='TOOLTIP' styles='toolName'></apply></application></styles>";
  getCatXML=sourceXML.match(/<category .+/categories>/i)[0];
  getDatasetXML=sourceXML.match(/<set.+/dataset>/i)[0];
  newXML=rootXML+catXML+(getCatXML?getCatXML:"</categories>")+datasetXML+(getDatasetXML?getDatasetXML:"</dataset>")+otherXML+"</chart>";
//  alert(newXML);
  return newXML;
}
</script>
<script language="JavaScript">
 function getDataFromChart(){
 var ourChart = getChartFromId("SelectChart");
  var arrData = ourChart.getData();  
 var xmlData=ourChart.getXMLData();
  if (arrData.length==0){
  alert("Please select atleast one data point on chart by drawing a rectangle");
  return;
  }
  ourChart.setDataXML(buildXML(xmlData));
 }
</script>
<style type="text/css">
  body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
 }
 .text{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
 }
 </style>
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr>
   <td valign="top" class="text" align="center"> <div id="chartdiv" align="center">
    FusionCharts. </div>
  <script type="text/javascript">
 var chart = new FusionCharts("SelectScatter.swf", "SelectChart", "550", "400", "0", "1");
 chart.setDataXML(buildXML(getXML()));
 chart.render("chartdiv");
  </script> </td>
  </tr>    
</table>
</body>
</html>

Edited December 17, 2007 by Guest

vidyab · January 2, 2008

Hi,

when we enable debug mode =1 , can view the Chart loaded and initialized data. Can we access the XML Data which is getting displayed (variable ) in our javascript function...

Please assist..

Regards,

Pallav · January 7, 2008

I'm not sure if I've understood your query. Can you please elaborate?

Sign In

Regarding Select Scatter chart( Powercharts V3)

Recommended Posts

vidyab

Share this post

Link to post

Share on other sites

FusionCharts Support

Share this post

Link to post

Share on other sites

vidyab

Share this post

Link to post

Share on other sites

Pallav

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity