FusionCharts v3 Documentation

Drag-able Chart > Reading data using JavaScript

In our previous section, we had seen how to submit the updated data from chart to a server side script as form elements. Here, we'll see how to read the updated data using JavaScript functions present on the same page.

Code samples discussed in this section is present in Download Package > Code > Drag_Data_Rtn folder.

To enable JavaScript access to your chart, you first need to set the registerWithJS flag of the chart to 1.

<div id="chartdiv" align="center"> 
FusionCharts. </div>

<script type="text/javascript">

   var chart = new FusionCharts("DragColumn2D.swf", "SelectChart", "580", "350", "0", "1");

   chart.setDataURL("Data.xml"); 

   chart.render("chartdiv");

</script>

Notice the last parameter in chart constructor function - it's set to 1.

The above code renders a chart in the page with data from Data.xml. We wouldn't actually focus on data here, as we're trying to link this data to JavaScript and not build it. XML data structrue for the chart can be seen in Chart XML Sheet section.

Now that the chart is rendered, whenever we need access to chart's data as array, we can simple call the following function on the chart:

//Get a reference to our chart
var ourChart = getChartFromId("SelectChart");

//Now get the data as array.
var arrData = ourChart.getDataWithId();

We first need to get a reference to the chart object. We do so using getChartFromId method. Next, to get the data as array, we simply call the getDataWithId method of the chart. This method returns the data of chart in a 3-dimensional array. The structure of the array is as under:

[0,0] - Empty	[0,1]- Dataset id	[0,2] - Dataset Id	[0,n]- Dataset Id	[0,n]- Dataset Id
[1,0] - Category label of data index 1	Data for dataset [1] data index [1] - returned as an array with two elements. Sub array [0] - Id of set Sub array [1] - Updated value of set	Data for dataset [2] data index [1] - returned as an array with two elements. Sub array [0] - Id of set Sub array [1] - Updated value of set	Data for dataset [n] data index [m] - returned as an array with two elements. Sub array [0] - Id of set Sub array [1] - Updated value of set	Same as left
[2,0] - Category label of data index 2	Data for dataset [1] data index [2] - returned as an array with two elements. Sub array [0] - Id of set Sub array [1] - Updated value of set	Same as above	Same as above	Same as left
[m,0] - Category label of data index m	Data for dataset [n] data index [m] - returned as an array with two elements. Sub array [0] - Id of set Sub array [1] - Updated value of set	Same as above	Same as above	Same as left
[m,0] - Category label of data index m	Same as above	Same as above	Same as above	Same as left
[m,0] - Category label of data index m	Same as above	Same as above	Same as above	Same as left

To make things simpler, let's consider the following XML:

<chart palette='1' caption='Revenue / Profit Simulation Chart' subcaption='Drag the top edge of columns to simulate revenue and profit.' showvalues='0' xAxisName='Quarter' yAxisName='Dollars' numberPrefix='$' formatNumberScale='1'  defaultAnimation='0' showFormBtn='0'>

   <categories> 

      <category name='Quarter 1' />

      <category name='Quarter 2' />

      <category name='Quarter 3' />

      <category name='Quarter 4' />

   </categories>

   <dataset id='R' seriesName='Revenue' allowNegativeDrag='0'>

      <set id='R1' value='3554800' />

      <set id='R2' value='3014800' />

      <set id='R3' value='2737200' />

      <set id='R4' value='3540700' />

   </dataset>

   <dataset id='P' seriesName='Profit'>

      <set id='P1' value='870000' />

      <set id='P2' value='-419400' />

      <set id='P3' value='452600' />

      <set id='P4' value='717300' allowNegativeDrag='0'/>

   </dataset>

   <trendlines>

      <line startValue='2800000' endValue='3500000' color='009900' displayValue='Target' isTrendZone='1' alpha='10' valueOnRight='1'/>

   </trendlines>

   <styles>

      <definition>

         <style name="myCaptionFont" type="font" font="Arial" size="14" bold="1" /> 

         <style name="mySubCaptionFont" type="font" font="Arial" size="10" bold="0" /> 

      </definition>

      <application>

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

         <apply toObject="SubCaption" styles="mySubCaptionFont" /> 

      </application>

   </styles>

</chart>

This XML generates a chart as under:

Now, without editing this data visually, if you return the data of chart as array using the getDataWithId() method of the chart object, the tabular mapping of returned array can be traced as under:

(empty)	Revenue	Profit
Quarter 1	[R1,3554800]	[P1,870000]
Quarter 2	[R2,3014800]	[P2,-419400]
Quarter 3	[R3,2737200]	[P3,452600]
Quarter 4	[R4,3540700]	[P4,717300]

If you map this with XML, you'll find the following:

[0,0] index of array is empty
The first row in returned array contains the series name of each dataset placed horizontally (sequentially)
The first column in returned array contains the labels of all the categories
Rest of the columns map to respective category and dataset. For each data, it's id and last updated value on chart in returned. In our example, since we've not changed any data visually on the chart, it's showing the original data.

Similar to getDataWithId() function is getData() function, but with one dimension of data less. Unlike getDataWithId() method, that returns both the id and updated value of each data on the chart, this method just returns the value of each data. Thus, the return array is now converted into a 2 dimensional array, where each data cell just contains a numeric value representing the final value of data on the chart.

The tabular mapping of array returned by this method can be traced as under:

(empty)	Revenue	Profit
Quarter 1	3554800	870000
Quarter 2	3014800	-419400
Quarter 3	2737200	452600
Quarter 4	3540700	717300

Fairly simple. We just have the values now in each data cell, which can be directly accessed by the index of the 2-dimensional array.

The chart also provides a method to read the updated data in XML format. This method is named as getXMLData() and can be invoked as under:

//Get a reference to our chart
var ourChart = getChartFromId("SelectChart");
//Get the data from chart
var xmlRtn = ourChart.getXMLData();
//Show it to user in alert box.
alert(xmlRtn);

Using all this information, we've built a simple example where we data from chart and render it dynamically in tabular format at client side using JavaScript. The code for this is contained in Chart.html in Download Package > Code > Drag_Data_Rtn folder.