Using Highcharts Api - Add Series, Add Point, Detect Chart/point Click Event

[donp]

We are a project team with CA, Inc., which has an OEM licensing agreement for FusionCharts. Our team is beginning to use FusionCharts in a new product, and we are running into some technical issues.

 

We need the ability to use the JavaScript API for customization of the charts, to add series and data points to charts, and to detect click events on a chart or data point. I don't see any of this capability available through the API.

 

However, when I look at the HighCharts API, I see all of these capabilities are available. I have some questions about this. If we intend to use JavaScript rendering, is it a fair expectation that we should be able to use the full HighCharts API, since that product appears to be embedded in FusionCharts? And, if this is true, does the HighCharts capability (detecting mouse clicks, adding series/points) extend to when the Flash rendering is used?

 

Essentially, I need to know if I can use the HighCharts API in FusionCharts, and if not, if I am better off just using HighCharts directly and not using FusionCharts.

 

Thanks,

Don P.

[DannyR]

Hi Don -

 

The HighCharts API is exposed through a method called _overrideJSChartConfiguration(). ANY property of the chart object (including methods) should be overrideable, and it will use the event model as defined by jQuery.

 

Take a look at the following example:

 

<div id="myChart"></div>
<script language="JavaScript">				
var jsonData = {
"data":[
	{
		label: "Failed",
		value: "1",
		issliced: "1"
	},
	{
		label: "Passed",
		value: "4"
	}
]
};

FusionCharts.setCurrentRenderer("javascript");

var chart = new FusionCharts("../../js/FusionCharts/Pie2D.swf", "myChart-chartId", 400, 300);

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	chart: {
		events: {
			click: function(event) {
				alert("x, y: (" + event.layerX + ", " + event.layerY + ")");
			}
		} 
	}
});
}

chart.setJSONData(jsonData);

chart.render("myChart");
</script>