Jump to content
JChartFX Community
  • 0

Adding onClick to Pie Chart


perryworld

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

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...