Sign in to follow this  
donp

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this