jQuery UI Widgets Forums Chart Not all legends toggles selected by default

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 5 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • Tyl
    Participant

    Hi,

    I have a chart with 1 seriesGroup and 4 series inside, so I have 4 legend toggles.
    By default when displaying the chart for the first time, I would like that only one serie is selected in the legend toggles.
    How can I do that, is there a parameter in the serie that could achieve that ?


    Dimitar
    Participant

    Hi Tyl,

    After the chart initialization, call the method hideSerie for the series you wish to be hidden initially. Here is more about the method from the jqxChart API Documentation:

    Hides a chart serie. The result of calling this function is same as
    the user unchecking the legend box of a chart serie. The itemIndex parameter is optional and applicable to pie and donut series only.

    Example:

    $(‘#jqxChart’).jqxChart(‘hideSerie’, 0, 1, NaN);

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tyl
    Participant

    Thanks Dimitar,

    I was aware of this method but I expected to be able to set some series unchecked at init with a Settings parameter.
    That would be easier, otherwise I must write some code that waits that the chart is rendered and ready to be able to call hideSerie().


    Tyl
    Participant

    Actually I don’t event know how to know when the chart is ready so that I can call hideSerie().
    I use the 3.6 version (cannot upgrade because some things don’t work anymore in 3.7.1) and there is no refreshEnd callback.
    Another information is that I am use jqwidgets with Angularjs.


    Dimitar
    Participant

    Hi Tyl,

    There should be no issue in calling this method immediately after the chart initialization, e.g.:

    $('#jqxChart').jqxChart(settings);
    $('#jqxChart').jqxChart('hideSerie', 0, 1, NaN);

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Tyl
    Participant

    Thank you Dimitar,

    As I use jqx-chart with angularjs, I have this html code.

    <jqx-chart jqx-instance="myChart" jqx-settings="myChartSettings"></jqx-chart>

    And in my controller I have:

    $scope.myChart.hideSerie(0, 0);

    If this is called too soon I have the following error:
    TypeError: $scope.myChart.hideSerie is not a function.

    If I set a 1 second timeout on the call, all is ok.


    Dimitar
    Participant

    Hi Tyl,

    When a widget is created, the jqxAngular plug-in raises an event with the following name: ‘widget name’ + ‘Created’, i.e for jqxChart, the event name is ‘jqxChartCreated’. Here is how you can use this event to hide one of the series right after the chart has been initialized:

    <!DOCTYPE html>
    <html ng-app="demoApp" lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/angular.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
    
            demoApp.controller("demoController", function ($scope, $http) {
                // prepare the data
                var source = {
                    datatype: "csv",
                    datafields: [{
                        name: 'Date'
                    }, {
                        name: 'S&P 500'
                    }, {
                        name: 'NASDAQ'
                    }],
                    url: '../sampledata/nasdaq_vs_sp500.txt'
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    async: true,
                    autoBind: true,
                    loadError: function (xhr, status, error) {
                        alert('Error loading "' + source.url + '" : ' + error);
                    }
                });
    
                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
                // prepare jqxChart settings
                $scope.chartSettings = {
                    title: "U.S. Stock Market Index Performance",
                    description: "NASDAQ Composite compared to S&P 500",
                    enableAnimations: true,
                    showLegend: true,
                    padding: {
                        left: 10,
                        top: 5,
                        right: 10,
                        bottom: 5
                    },
                    titlePadding: {
                        left: 90,
                        top: 0,
                        right: 0,
                        bottom: 10
                    },
                    source: dataAdapter,
                    xAxis: {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
                        },
                        type: 'date',
                        baseUnit: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        valuesOnTicks: true,
                        minValue: '01-01-2011',
                        maxValue: '01-01-2012',
                        textRotationAngle: -45,
                        textRotationPoint: 'topright',
                        textOffset: {
                            x: 0,
                            y: -25
                        }
                    },
                    colorScheme: 'scheme04',
                    seriesGroups: [{
                        type: 'line',
                        valueAxis: {
                            unitInterval: 500,
                            minValue: 0,
                            maxValue: 3000,
                            displayValueAxis: true,
                            description: 'Daily Closing Price',
                            axisSize: 'auto',
                            tickMarksColor: '#888888'
                        },
                        series: [{
                            dataField: 'S&P 500',
                            displayText: 'S&P 500'
                        }, {
                            dataField: 'NASDAQ',
                            displayText: 'NASDAQ'
                        }]
                    }]
                };
    
                $scope.$on('jqxChartCreated', function (event, arguments) {
                    $scope.chartSettings.jqxChart('hideSerie', 0, 0);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div ng-controller="demoController">
            <jqx-chart style="width: 850px; height: 500px" jqx-settings="chartSettings"></jqx-chart>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.