Jump to content
JChartFX Community
  • 0
Sign in to follow this  
perryworld

Adding onClick to Pie Chart

Question

Hi,

 

We have created a pie chart and everything works fine but we now want to add a click event to each segment so we can open a page with further information.

We added the following code within the document.ready

 

         jQuery("#ChartDivGroups").click(function(evt) {
            alert ("SET");
            onChartClick(evt);
        });
 
And the following function
 
function onChartClick(evt)
{
     alert (evt.hitType);
     if (evt.hitType == cfx.HitType.Point) {
         var s = "Series " + evt.series + " Point " + evt.point;
         alert(s);
     }
}

 

When we click on the pie we get the alert "SET" followed by the alert within the function but here we get "undefined"

We have attached the full php file

 

Are we missing something?

 

Thanks

Rich

DBGroups.php

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Please check if you are getting any errors in the javascript console. Also check if you are using the most recent version for the jchartfx controls as you might be hitting an issue we already fixed.

 

When posting samples, please try to post a "client side" sample, e.g. post the script that gets to the browser so that we can test it without having to recreate your server side environment, e.g. apache/perl/IIS/asp/etc.

 

Another option would be to try to create a simple page duplicating the functionality you want and then try to increase its complexity, this will help you find out what causes the issue.

 

This page, should work as is, and show the alert describing the series and point that was clicked. I tried to use as much of the features you are using.

 

<!DOCTYPE html>

<html>
<head>
    <script type="text/javascript" src="jquery.js">
    </script>
    <script type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
    <script type="text/javascript" src="jchartfx.advanced.js">
    </script>
</head>
<body>
 
<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>
 
<br/>
    
<script language="javascript">
    var chart1;
    
    $(document).ready(function($) {
        chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
 
var title = new cfx.TitleDockable();
title.setText("Groups");
chart1.getTitles().add(title)
 
var fields = chart1.getDataSourceSettings().getFields();
var field1 = new cfx.FieldMap();
field1.setName("group");
field1.setUsage(cfx.FieldUsage.Label);
fields.add(field1);
 
var field2 = new cfx.FieldMap();
field2.setName("hits");
field2.setUsage(cfx.FieldUsage.Value);
fields.add(field2);
 
        chart1.getAllSeries().getPointLabels().setVisible(true);
        chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.Near);
 
        chart1.setDataSource([{"group":"First","hits":45},{"group":"Second","hits":15},{"group":"Third","hits":38}]);
 
        chart1.create("myDiv");
 
        $("#myDiv").click(function(evt) {
            if (evt.hitType == cfx.HitType.Point)
                alert("Series " + evt.series + " Point " + evt.point);
        });                      
    });
</script>
 
</body>
</html>

 

JuanC

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  

×