FusionCharts v3 Documentation

Select Scatter Chart > Reading data using JavaScript

In our previous section, we had seen how to submit the list of selected data points from chart to a server side script as XML. 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 > Select_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("SelectScatter.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.getData();

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 getData method of the chart. This method returns the data of chart in a 2-dimensional array. The structure of the array is as under:

[1,0] - Dataset 1 - This cell contains dataset id

Selected data point id for dataset 1

Selected data point id for this dataset..

Can be any number of items...

[2,0] - Dataset 2 - This cell contains dataset id

Selected data point id for dataset 2

Selected data point id for this dataset..

Can be any number of items...

[n,0] - Dataset n - This cell contains dataset id

Selected data point id for dataset n

Selected data point id for this dataset..

Can be any number of items...

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

</chart>

Now, from this chart, if you select 3 data points from Equities dataset and 5 from Mutual Funds dataset and then return the data of chart as array using the getData() method of the chart object, the tabular mapping of returned array can be traced as under:

EQS	INVEQ324_2	INVEQ324_5	INVEQ324_6
MFS	INVMF324_2	INVMF324_4	INVMF324_6	INVMF324_8	INVMF324_10

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

Each dataset is returned as a single row in the array
The first column of each row contains the dataset index.
The rest of the columns contain the ids of selected points of that dataset.
The length of each row's array (horizontally) can be different, depending on the number of data points chosen for that dataset.

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 > Select_Data_Rtn folder.