change style on click legend - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, click event, fillColor, jqxChart, showSerie

This topic contains 19 replies, has 2 voices, and was last updated by arkgroup 9 years, 9 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

change style on click legend Posts

February 5, 2015 at 12:43 pm change style on click legend #66621

Participant

Is it possible to highlight or change style (color) of legend after click?
And change it back after click out site of legend

Thanks

February 5, 2015 at 2:57 pm change style on click legend #66630

Nadezhda

Participant

Hello arkgroup,

Please, provide us with more information. Maybe you want to change color of ‘dataField’ in series?

Best Regards,
Nadezhda

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

February 5, 2015 at 7:16 pm change style on click legend #66642

arkgroup

Participant

Data field might work too. I just want my selection to stand out, so I know what I did click…

Thanks

February 6, 2015 at 3:09 pm change style on click legend #66703

Nadezhda

Participant

Hi arkgroup,

Here is an example which shows how to change color for the serie when click on the legend box.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../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">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
                    { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
                    { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 120,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' }
                            ]
                        },
                          {
                              type: 'stackedcolumn',
                              columnsGapPercent: 100,
                              seriesGapPercent: 5,
                              valueAxis:
                              {
                                  unitInterval: 10,
                                  minValue: 0,
                                  maxValue: 120,
                                  displayValueAxis: true,
                                  description: 'Time in minutes',
                                  tickMarksColor: '#888888'
                              },
                              series: [
                                      { dataField: 'Riding', displayText: 'Riding' },
                                      { dataField: 'Cycling', displayText: 'Cycling' }
                              ]
                          }
                    ]
            };
            // setup the chart
            $('#chartContainer').jqxChart(settings);

            var groups = $('#chartContainer').jqxChart('seriesGroups');
            var refreshChart = function () {
                $('#chartContainer').jqxChart({ enableAnimations: false });
                $('#chartContainer').jqxChart('refresh');
            }
            $('#chartContainer .jqx-chart-legend-text').eq(0).parent().click(function () {
                $('#chartContainer').jqxChart('showSerie', 0, 0);
                groups[0].series[0].fillColor = "gold";
                refreshChart();
            });
            $('#chartContainer .jqx-chart-legend-text').eq(1).parent().click(function () {
                $('#chartContainer').jqxChart('showSerie', 0, 1);
                groups[0].series[1].fillColor = "silver";
                refreshChart();
            });
            $('#chartContainer .jqx-chart-legend-text').eq(2).parent().click(function () {
                $('#chartContainer').jqxChart('showSerie', 1, 0);
                groups[1].series[0].fillColor = "pink";
                refreshChart();
            });
            $('#chartContainer .jqx-chart-legend-text').eq(3).parent().click(function () {
                $('#chartContainer').jqxChart('showSerie', 1, 1);
                groups[1].series[1].fillColor = "orange";
                refreshChart();
            });
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px;"></div>
</body>
</html>

Best Regards,
Nadezhda

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

February 6, 2015 at 4:46 pm change style on click legend #66708

arkgroup

Participant

Hi Nadezhda,

Thank you for your sample. What I actually need is changing color when click on bar, not legend.

Regards.

February 9, 2015 at 1:44 pm change style on click legend #66768

Nadezhda

Participant

Hi arkgroup,

You can try to change bar’s color with ‘click’ event. This event is raised when the user clicks on series element.

Best Regards,
Nadezhda

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

February 9, 2015 at 8:51 pm change style on click legend #66786

arkgroup

Participant

I don’t know how to get to fill Color property for bar clicked.
I can see seriesGroup and series, but not the bar. Can you please provide sample code?

Thanks

February 10, 2015 at 9:57 am change style on click legend #66811

Nadezhda

Participant

Hi arkgroup,

In the following example you can find how to get ‘fillColor’ property and change the color.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../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">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
                    { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
                    { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 120,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running', fillColor: '#000044' },
                                    { dataField: 'Swimming', displayText: 'Swimming', fillColor: '#0000FF' }
                            ]
                        },
                          {
                              type: 'stackedcolumn',
                              columnsGapPercent: 100,
                              seriesGapPercent: 5,
                              valueAxis:
                              {
                                  unitInterval: 10,
                                  minValue: 0,
                                  maxValue: 120,
                                  visible: false,
                                  displayValueAxis: true,
                                  description: 'Time in minutes',
                                  tickMarksColor: '#888888'
                              },
                              series: [
                                      { dataField: 'Riding', displayText: 'Riding', fillColor: '#00FF00' },
                                      { dataField: 'Cycling', displayText: 'Cycling', fillColor: '#FF0000' }
                              ]
                          }
                    ]
            };

            function myEventHandler(event) {
                var eventData = '<div><b>Event type: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, Value: </b>' + event.args.elementValue + "</div>";
                if (event.type == 'click')
                    eventData = '<div><b>Event type: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, Fill color: </b>' + event.args.serie.fillColor + "</div>";
                $('#eventText').html(eventData);
                event.args.serie.fillColor = "#FFFF00";
                $('#chartContainer').jqxChart('update');
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
            $('#chartContainer').on('click', function (event) {
                if (event.args)
                    myEventHandler(event);
            });
        });
    </script>
</head>
<body class='default'>
    <table>
        <tr>
            <td>
                <div id='chartContainer' style="width: 850px; height: 500px" />
            </td>
        </tr>
        <tr>
            <td>
                <div id='eventText' style="width: 600px; height: 30px" />
            </td>
        </tr>
    </table>
</body>
</html>

Best Regards,
Nadezhda

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

February 10, 2015 at 12:35 pm change style on click legend #66825

arkgroup

Participant

It still color all bars for that serie.
I want just one bar that I click to be colored.

Thanks

February 11, 2015 at 2:18 pm change style on click legend #66926

Nadezhda

Participant

Hi arkgroup,

You can use ‘colorFunction’ method to change the color of one bar in serie. Here is an example:

series: [
        {
            dataField: 'Running', displayText: 'Running', 
            colorFunction: function (value, itemIndex, serie, group) {
                if (!isNaN(itemIndex) && serie) {
                    return (itemIndex) ? '#FFFF00' : '#999999';
                }                
            }
        },
        {
        dataField: 'Swimming', displayText: 'Swimming', fillColor: '#0000FF',

        }
]

Best Regards,
Nadezhda

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

February 11, 2015 at 3:50 pm change style on click legend #66934

arkgroup

Participant

This one just change bar color based on itemIndex.
I need this on click for one bar…

Thanks

February 13, 2015 at 10:52 am change style on click legend #67084

Nadezhda

Participant

Hi arkgroup,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../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">
        $(document).ready(function () {
            var temp = "";
            var temp2 = "";
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
                    { Day: 'Wednesday', Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
                    { Day: 'Friday', Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                //colorScheme: 'scheme06',
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 120,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                tickMarksColor: '#888888'
                            },
                            click: myEventHandler,
                            series: [
                                    {
                                        dataField: 'Running', displayText: 'Running', 
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            if (itemIndex !== undefined)
                                                if (temp !== "" && temp2 !== "")
                                                    return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#0000FF';
                                                else return "#0000FF";
                                        }
                                    },
                                    {
                                        dataField: 'Swimming', displayText: 'Swimming', 
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            if (itemIndex !== undefined)
                                                if (temp !== "" && temp2 !== "")
                                                    return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#FF0000';
                                                else return "#FF0000";
                                        }
                                    }
                            ]
                        },
                    {
                        type: 'stackedcolumn',
                        columnsGapPercent: 100,
                        seriesGapPercent: 5,
                        valueAxis:
                        {
                            unitInterval: 10,
                            minValue: 0,
                            maxValue: 120,
                            visible: false,
                            displayValueAxis: true,
                            description: 'Time in minutes',
                            tickMarksColor: '#888888'
                        },
                        click: myEventHandler,
                        series: [
                                {
                                    dataField: 'Riding', displayText: 'Riding', 
                                    colorFunction: function (value, itemIndex, serie, group) {
                                        if (itemIndex !== undefined)
                                            if (temp !== "" && temp2 !== "")
                                                return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#FF00FF';
                                            else return "#FF00FF";
                                    }
                                },
                                {
                                    dataField: 'Cycling', displayText: 'Cycling', 
                                    colorFunction: function (value, itemIndex, serie, group) {
                                        if (itemIndex !== undefined)
                                            if (temp !== "" && temp2 !== "")
                                                return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#00FFFF';
                                            else return "#00FFFF";
                                    }
                                }
                        ]
                    }
                    ]
            };

            function myEventHandler(e) {
                var index = e.elementIndex;
                var datafield = e.serie.dataField;               
                temp = index;
                temp2 = datafield;
                $('#chartContainer').jqxChart('update');
            };
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <table>
        <tr>
            <td>
                <div id='chartContainer' style="width: 850px; height: 500px" />
            </td>
        </tr>
        <tr>
            <td>
                <div id='eventText' style="width: 600px; height: 30px" />
            </td>
        </tr>
    </table>
</body>
</html>

Best Regards,
Nadezhda

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

February 13, 2015 at 12:17 pm change style on click legend #67086

Nadezhda

Participant

Hi arkgroup,

If you want to change bar color back with click outside of the jqxChart you can use the following lines with the above example.

$(document).click(function (e) {
    temp = "";
    temp2 = "";
    $('#chartContainer').jqxChart('update');

});
$('#chartContainer').on('click', function (e) {
    e.stopPropagation();
})

Best Regards,
Nadezhda

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

February 13, 2015 at 2:04 pm change style on click legend #67092

arkgroup

Participant

Great, thanks a lot.

February 13, 2015 at 4:38 pm change style on click legend #67099

arkgroup

Participant

Just find out that legend colors are all black…

Author

Posts

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

You must be logged in to reply to this topic.