Jump to content
JChartFX Community
  • 0
VamsiAnilM

JS error on hover of a jChartFX chart

Question

Hi,

I'm currently using a jChartFX chart which has 3 different series (2 Line, 2 Bar and 1 Area) all loaded in the the same provided manner. I have the tooltip popup enabled for all the series in the chart. Please check the below link for the chart for the same.

http://postimg.org/image/iy6lnsbwx/

After the tooltip display, when I move the cursor anywhere around the chart, it just throws a JS error. The error is something about "getGalleryAttributes". Please refer the image link - http://postimg.org/image/yqpa0yibn/ 

 

 I've got a similar issue while using one of the demo files provided in this website. It was a Multiple Axes sample code.

http://postimg.org/image/6cygdk7pd/

 

This is where I got the sample code from. 

http://support.softwarefx.com/jChartFX/article/2501235#2bc67fb2-e5be-e211-84a5-0019b9e6b500 

 

 

I'm using the following references:

    <script type="text/javascript" src="../Javascript/Core/libs/JChartFx/jchartfx.system.js"></script>

    <script type="text/javascript" src="../Javascript/Core/libs/JChartFx/jchartfx.coreBasic.js"></script>

    <script type="text/javascript" src="../Javascript/Core/libs/JChartFx/jchartfx.coreVector.js"></script>

    <script type="text/javascript" src="../Javascript/Core/libs/JChartFx/jchartfx.coreVector3d.js"></script>

    <script type="text/javascript" src="../Javascript/Core/libs/JChartFx/jchartfx.advanced.js"></script> 

 

My code: 

--------------------------------------------------------------------------

function LoadTotalCombinedWorkforce(data) {

    try {

        chart1 = new cfx.Chart();

        chart1.getAnimations().getLoad().setEnabled(true);


        var items = $.parseJSON(data.d).rows;

        chart1.setDataSource(items);


        // Axis configuration

        // Get the reference of existing Y axes

        var axisY1 = chart1.getAxisY();

        var axisY2 = chart1.getAxisY2();


        // Create a new Y axis for Man Hours

        var axisY3 = new cfx.AxisY();


        // Add the new axis to the chart

        chart1.getAxesY().add(axisY3);


        // Show or Hide all of the Y Axes

        axisY1.setVisible(true);

        axisY2.setVisible(true);

        axisY3.setVisible(false);


        // Set the labels format to specific decimals

        axisY1.getLabelsFormat().setDecimals(0);

        axisY2.getLabelsFormat().setDecimals(2);

        axisY3.getLabelsFormat().setDecimals(0);


        // Show or Hide the grid lines for Y Axes

        axisY1.getGrids().getMajor().setVisible(true);

        axisY2.getGrids().getMajor().setVisible(true);

        axisY3.getGrids().getMajor().setVisible(false);


        // Set the Man hours to not start from Zero

        axisY3.setForceZero(false);

        axisY3.setPosition(cfx.AxisPosition.Far);


        // Set the Title for the respective Y Axes

        axisY1.getTitle().setText("No of Injuries");

        axisY2.getTitle().setText("TRIR / DART Rate");

        axisY3.getTitle().setText("Man Hours");


        // 1.Line Chart

        // TRIR 

        var series0 = chart1.getSeries().getItem(0);

        series0.setAxisY(axisY2);

        series0.setGallery(cfx.Gallery.Line);


        // 2.Line Chart

        // DART

        var series1 = chart1.getSeries().getItem(1);

        series1.setAxisY(axisY2);

        series1.setGallery(cfx.Gallery.Line);


        // 3.Bar Chart

        // Total Recordables TRIR

        var series2 = chart1.getSeries().getItem(2);

        series2.setGallery(cfx.Gallery.Bar);


        // 4.Bar Chart

        // Total Recordables DART

        var series3 = chart1.getSeries().getItem(3);

        series3.setAxisY(axisY1);

        series3.setGallery(cfx.Gallery.Gantt);


        // 5.Area Chart

        // Total Work Hours

        var series4 = chart1.getSeries().getItem(4);

        series4.setAxisY(axisY3);

        series4.setGallery(cfx.Gallery.Area);


        var y = chart1.getAllSeries();

        var x = chart1.getAllSeries().getPointLabels();

        // move the Area chart numbers to left

        var z = series4.getPointLabels();

        z.setAlignment(2);


        // Set the titles for the Chart

        var titles = chart1.getTitles();

        var title = new cfx.TitleDockable();


        title.setText("Total Combined FE Workforce");

        titles.add(title);

        chart1.getAllSeries().getPointLabels().setVisible(true);


        var chartDiv = document.getElementById('ChartCombinedWorkforce');

        chart1.create(chartDiv);

    } catch (e) {

    }

}

 

-------------------------------------------------------------------------- 

 

I dont know if I'm doing anything wrong here that might be the cause for this error. 

Any help would be greatly appreciated. I would be glad to provide more info if required for you guys.

 

Thank you,

Vamsi 

 

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

You should only include ONE of the Core.js, coreVector has more functionality (and a different default look) as it allows us to provide different styles for bars/areas/etc, it also allows us to support more complex tooltips.

CoreBasic should be used if you need to reduce script size to the minimum and do not care about extra functionality.

Regards,

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

×