Not all legends toggles selected by default - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angularjs, chart, created, display, hidden, hide, hideSerie, jqxAngular, jqxChart, jqxChartCreated, legend, selected, series, toggle

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

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

Author

Not all legends toggles selected by default Posts

April 22, 2015 at 7:42 am Not all legends toggles selected by default #70134

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 ?

April 22, 2015 at 8:00 am Not all legends toggles selected by default #70137

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/

April 22, 2015 at 11:47 am Not all legends toggles selected by default #70144

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().

April 22, 2015 at 12:09 pm Not all legends toggles selected by default #70145

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.

April 22, 2015 at 12:10 pm Not all legends toggles selected by default #70146

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/

April 22, 2015 at 12:26 pm Not all legends toggles selected by default #70147

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.

April 23, 2015 at 8:00 am Not all legends toggles selected by default #70172

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/

Author

Posts

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

You must be logged in to reply to this topic.