| 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 will 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 > ScatterReturn folder. |
|||||||||||||||
After the chart is rendered, whenever we need access to chart's data as array, we can simply call the following function on the chart: //Get a reference to our chart var ourChart = FusionCharts("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 FusionCharts item reference 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: |
|||||||||||||||
| |||||||||||||||
<chart palette='3' caption='Investment Analysis Tool' subcaption='Drag over the required investments to select them. You can have
multiple selections.' yAxisName='Returns till date' xAxisName='Age (years)' showLegend='1' showLabels='1'
xAxisMaxValue='10' xAxisMinValue='0' showFormBtn='0' numberSuffix='%' >
<categories verticalLineThickness='1'>
<category label='1' x='1' showVerticalLine='1'/>
<category label='2' x='2' showVerticalLine='1'/>
<category label='3' x='3' showVerticalLine='1'/>
<category label='4' x='4' showVerticalLine='1'/>
<category label='5' x='5' showVerticalLine='1'/>
<category label='6' x='6' showVerticalLine='1'/>
<category label='7' x='7' showVerticalLine='1'/>
<category label='8' x='8' showVerticalLine='1'/>
<category label='9' x='9' showVerticalLine='1'/>
<category label='10' x='10' showVerticalLine='0'/>
</categories>
<dataSet id='EQS' seriesName='Equities' color='0372AB' plotBorderThickness='0' showPlotBorder='1' anchorSides='3'>
<set id='INVEQ324_1' x='4.2' y='193.2' tooltext='Script B1: 4.2 yrs., 193.2%'/>
<set id='INVEQ324_2' x='2.8' y='33.6' tooltext='Script C2: 2.8 yrs., 33.6%'/>
<set id='INVEQ324_3' x='6.2' y='24.8' tooltext='Script D3: 6.2 yrs., 24.8%'/>
<set id='INVEQ324_4' x='1' y='14' tooltext='Script E4: 1 yrs., 14%'/>
<set id='INVEQ324_5' x='1.2' y='26.4' tooltext='Script F5: 1.2 yrs., 26.4%'/>
<set id='INVEQ324_6' x='4.4' y='114.4' tooltext='Script G6: 4.4 yrs., 114.4%'/>
<set id='INVEQ324_7' x='8.5' y='323' tooltext='Script H7: 8.5 yrs., 323%'/>
<set id='INVEQ324_8' x='6.9' y='289.8' tooltext='Script I8: 6.9 yrs., 289.8%'/>
<set id='INVEQ324_9' x='9.9' y='287.1' tooltext='Script J9: 9.9 yrs., 287.1%'/>
<set id='INVEQ324_10' x='0.9' y='9' tooltext='Script K10: 0.9 yrs., 9%'/>
</dataSet>
<dataSet id='MFS' seriesName='Mutual Funds' color='FF9900' showPlotBorder='1' anchorRadius='4'>
<set id='INVMF324_1' x='1.4' y='32.2' tooltext='Fund A: 1.4 yrs., 32.2%'/>
<set id='INVMF324_2' x='1.6' y='27' tooltext='Fund B: 0.6 yrs., 27%'/>
<set id='INVMF324_3' x='4.7' y='230.3' tooltext='Fund C: 4.7 yrs., 230.3%'/>
<set id='INVMF324_4' x='8.9' y='160.2' tooltext='Fund D: 8.9 yrs., 160.2%'/>
<set id='INVMF324_5' x='3' y='24' tooltext='Fund E: 3 yrs., 24%'/>
<set id='INVMF324_6' x='2' y='94' tooltext='Fund F: 2 yrs., 94%'/>
<set id='INVMF324_7' x='8.5' y='399.5' tooltext='Fund G: 8.5 yrs., 399.5%'/>
<set id='INVMF324_8' x='6.9' y='289.8' tooltext='Fund H: 6.9 yrs., 289.8%'/>
<set id='INVMF324_9' x='1.3' y='15.6' tooltext='Fund I: 1.3 yrs., 15.6%'/>
<set id='INVMF324_10' x='7.1' y='333.7' tooltext='Fund J: 7.1 yrs., 333.7%'/>
</dataSet>
</chart>
{
"chart":{
"palette":"3",
"caption":"Investment Analysis Tool",
"subcaption":"Drag over the required investments to select them. You can have multiple selections.",
"yaxisname":"Returns till date",
"xaxisname":"Age (years)",
"showlegend":"1",
"showLabels":"1",
"xaxismaxvalue":"10",
"xaxisminvalue":"0",
"showformbtn":"0",
"numbersuffix":"%"
},
"categories":[{
"verticallinethickness":"1",
"category":[{
"label":"1",
"x":"1",
"showverticalline":"1"
},
{
"label":"2",
"x":"2",
"showverticalline":"1"
},
{
"label":"3",
"x":"3",
"showverticalline":"1"
},
{
"label":"4",
"x":"4",
"showverticalline":"1"
},
{
"label":"5",
"x":"5",
"showverticalline":"1"
},
{
"label":"6",
"x":"6",
"showverticalline":"1"
},
{
"label":"7",
"x":"7",
"showverticalline":"1"
},
{
"label":"8",
"x":"8",
"showverticalline":"1"
},
{
"label":"9",
"x":"9",
"showverticalline":"1"
},
{
"label":"10",
"x":"10",
"showverticalline":"0"
}
]
}
],
"dataset":[{
"id":"EQS",
"seriesname":"Equities",
"color":"0372AB",
"plotborderthickness":"0",
"showplotborder":"1",
"anchorsides":"3",
"data":[{
"id":"INVEQ324_1",
"x":"4.2",
"y":"193.2",
"tooltext":"Script B1: 4.2 yrs., 193.2%"
},
{
"id":"INVEQ324_2",
"x":"2.8",
"y":"33.6",
"tooltext":"Script C2: 2.8 yrs., 33.6%"
},
{
"id":"INVEQ324_3",
"x":"6.2",
"y":"24.8",
"tooltext":"Script D3: 6.2 yrs., 24.8%"
},
{
"id":"INVEQ324_4",
"x":"1",
"y":"14",
"tooltext":"Script E4: 1 yrs., 14%"
},
{
"id":"INVEQ324_5",
"x":"1.2",
"y":"26.4",
"tooltext":"Script F5: 1.2 yrs., 26.4%"
},
{
"id":"INVEQ324_6",
"x":"4.4",
"y":"114.4",
"tooltext":"Script G6: 4.4 yrs., 114.4%"
},
{
"id":"INVEQ324_7",
"x":"8.5",
"y":"323",
"tooltext":"Script H7: 8.5 yrs., 323%"
},
{
"id":"INVEQ324_8",
"x":"6.9",
"y":"289.8",
"tooltext":"Script I8: 6.9 yrs., 289.8%"
},
{
"id":"INVEQ324_9",
"x":"9.9",
"y":"287.1",
"tooltext":"Script J9: 9.9 yrs., 287.1%"
},
{
"id":"INVEQ324_10",
"x":"0.9",
"y":"9",
"tooltext":"Script K10: 0.9 yrs., 9%"
}
]
},
{
"id":"MFS",
"seriesname":"Mutual Funds",
"color":"FF9900",
"showplotborder":"1",
"anchorradius":"4",
"data":[{
"id":"INVMF324_1",
"x":"1.4",
"y":"32.2",
"tooltext":"Fund A: 1.4 yrs., 32.2%"
},
{
"id":"INVMF324_2",
"x":"1.6",
"y":"27",
"tooltext":"Fund B: 0.6 yrs., 27%"
},
{
"id":"INVMF324_3",
"x":"4.7",
"y":"230.3",
"tooltext":"Fund C: 4.7 yrs., 230.3%"
},
{
"id":"INVMF324_4",
"x":"8.9",
"y":"160.2",
"tooltext":"Fund D: 8.9 yrs., 160.2%"
},
{
"id":"INVMF324_5",
"x":"3",
"y":"24",
"tooltext":"Fund E: 3 yrs., 24%"
},
{
"id":"INVMF324_6",
"x":"2",
"y":"94",
"tooltext":"Fund F: 2 yrs., 94%"
},
{
"id":"INVMF324_7",
"x":"8.5",
"y":"399.5",
"tooltext":"Fund G: 8.5 yrs., 399.5%"
},
{
"id":"INVMF324_8",
"x":"6.9",
"y":"289.8",
"tooltext":"Fund H: 6.9 yrs., 289.8%"
},
{
"id":"INVMF324_9",
"x":"1.3",
"y":"15.6",
"tooltext":"Fund I: 1.3 yrs., 15.6%"
},
{
"id":"INVMF324_10",
"x":"7.1",
"y":"333.7",
"tooltext":"Fund J: 7.1 yrs., 333.7%"
}
]
}
]
}
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: |
|||||||||||||||
|
|||||||||||||||
If you map this with XML, you will find the following:
See it live! |
|||||||||||||||
| Reading XML Data from the chart | |||||||||||||||
|
The chart also provides a method to read the selected data in XML format. This method is named as getXMLData() and can be invoked as under: //Get a reference to our chart var ourChart = FusionCharts("SelectChart"); //Get the data from chart var xmlRtn = ourChart.getXMLData(); //Show it to user in alert box. alert(xmlRtn); |
|||||||||||||||
| The function getXMLData()returns the selected data. This function is also used to retrieve the complete data from the chart. To get the complete data from the chart you need to pass false as a parameter to the function. For example, var xmlRtn = ourChart.getXMLData(false); | |||||||||||||||
| Example Application in Code Download | |||||||||||||||
|
Using all this information, we have built a simple example where we pull 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 >ScatterReturn folder. See it live! |