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

evt.hitType not equals cfx.HitType.Point

Question

Hi,

 

i tried to add "onClick" on a pie chart, like you described:

 

                $("#myjChartFX").click(function (evt) {
                    if (evt.hitType == cfx.HitType.Point)
                        alert("Series " + evt.series + " Point " + evt.point);
                });

 

i'm using:

 

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="./Resources/jchartfx.system.js"></script>  
        <script type="text/javascript" src="./Resources/jchartfx.coreVector.js"></script>
        <script type="text/javascript" src="./Resources/jchartfx.advanced.js"></script>
        <script type="text/javascript" src="./Resources/jchartfx.animation.js"></script>
        <script type="text/javascript" src="./Resources/jchartfx.userInterface.js"></script>

 

unfortunately the evt.hitType is 0 and cfx.HitType.Point is 4. And also the evt.series and evt.point are undefined.

 

I'm using your sample from the dowload zip with pie samples.

 

i also tried to use the

        <script type="text/javascript" src="./resources/jquery-1.7.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.full.js"></script>

 

same result.

 

my js:

                var chart1 = new cfx.Chart();
                var strTitle = "my sample"
                chart1.setGallery(cfx.Gallery.Pie);
                chart1.getAllSeries().getPointLabels().setVisible(true);
                var pie = chart1.getGalleryAttributes();
                pie.setExplodingMode(cfx.ExplodingMode.All);

                PopulateData(chart1);
                var fields = chart1.getDataSourceSettings().getFields();

                var field1 = new cfx.FieldMap();
                field1.setName("Region");
                field1.setUsage(cfx.FieldUsage.RowHeading);
                fields.add(field1);

                var field2 = new cfx.FieldMap();
                field2.setName("keyFigure");
                field2.setUsage(cfx.FieldUsage.ColumnHeading);
                fields.add(field2);

                var fieldVal = new cfx.FieldMap();
                fieldVal.setName("Usage");
                fieldVal.setUsage(cfx.FieldUsage.Value);
                fields.add(fieldVal);

                var crosstab = new cfx.data.CrosstabDataProvider();
                crosstab.setDataSource(chart1.getDataSource());
                chart1.setDataSource(crosstab);

                var data = chart1.getData();
                data.setSeries(1);

                var titles = chart1.getTitles();
                var title = new cfx.TitleDockable();
                title.setText(strTitle);
                titles.add(title);

                chart1.getAllSeries().getPointLabels().setVisible(true);
                chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);
                chart1.getAnimations().getLoad().setEnabled(true);

                chart1.create("myjChartFX");

 

 

i'll be grateful for any help :-)

 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Make sure you attach your click handler after the chart.create call, that is the place where will attach our handler that will add the series, point and other properties to event parameter, and handlers run in the order they are attached.

 

Your code should be

 

chart1.create("myjChartFX");

 

...

 

$("#myjChartFX").click(function(evt) {

alert(evt.point);
});
 
I tested both orders and can confirm that it will NOT work if you attach the handler before the create call.
 
JuanC

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

i attach the click event as last action.

 

                chart1.create("myjChartFX");

                $(""myjChartFX").click(function (evt) {
                    alert(evt.series);
                    if (evt.hitType == cfx.HitType.Point)
                        alert("Series " + evt.series + " Point " + evt.point);
                });

 

as you suggest. 

The click event will be fired, but as i described. The event will not get any info about series. evt.series and  evt.point are not defined.

Share this post


Link to post
Share on other sites
  • 0

Please try the following page, it does the minimum job required to have a bar chart and alert when you click one of them.

 

<!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" language="javascript">
var chart1;
 
function onLoadDoc()
{
    chart1 = new cfx.Chart();
    chart1.setGallery(cfx.Gallery.Bar);
    chart1.setDataSource([10,12,14,8]);
    chart1.create("myDiv");
 
    $("#myDiv").click(function (evt) {
        if (evt.hitType == cfx.HitType.Point)
            alert("Series " + evt.series + " Point " + evt.point);
    });
}
 
    $(document).ready(function($) {
        onLoadDoc();
    });
</script>
</head>
<body>
 
<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>
 
</body>
</html>

Share this post


Link to post
Share on other sites
  • 0

Hi,

 

i completely rebuild my code, started with the simply coed from you and add step for step my staff.

it works, i can't understand what was wrong in my first version, but it's ok for me now

thank you for support

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  

×