jQWidgets Forums

jQuery UI Widgets › Forums › Chart › change style on click legend

Tagged: , , , ,

This topic contains 19 replies, has 2 voices, and was last updated by  arkgroup 10 years, 1 month ago.

Viewing 5 posts - 16 through 20 (of 20 total)
1 2
  • Author
    change style on click legend Posts
  • February 13, 2015 at 5:03 pm change style on click legend #67100

    arkgroup
    Participant

    and legendFillColor does not work in this case…

    February 16, 2015 at 7:56 am change style on click legend #67166

    Nadezhda
    Participant

    Hi arkgroup,

    The ‘legendFillColor’ property works on our side. Here is an example:

    series: [
        {
            dataField: 'Riding', displayText: 'Riding', legendFillColor: "#FF00FF",
            colorFunction: function (value, itemIndex, serie, group) {
                if (itemIndex !== undefined)
                    if (temp !== "" && temp2 !== "")
                        return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#FF00FF';
                    else return "#FF00FF";
            }
        },

    If this example does not help you to fix the legend color, please, provide us with sample code.

    Best Regards,
    Nadezhda

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

    February 17, 2015 at 12:33 pm change style on click legend #67236

    arkgroup
    Participant

    I am using your code and it did not work on IE8 and Google Chrome. Here is the code:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title></title>
    <script src=”scripts/modernizr.custom.js” type=”text/javascript”></script>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link href=”jqwidgets/styles/jqx.classic.css” rel=”stylesheet” 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/jqxtabs.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.grouping.js” ></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.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.js”></script>
    <script src=”jqwidgets/jqxscrollview.js” type=”text/javascript”></script>
    <script src=”jqwidgets/jqxtouch.js” type=”text/javascript”></script>
    <script src=”jqwidgets/jqxresponse.js” type=”text/javascript”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxbuttongroup.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
    <script src=”jqwidgets/jqxchart.core.js” type=”text/javascript”></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’, legendFillColor: “#FF00FF”,
    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>

    February 17, 2015 at 12:58 pm change style on click legend #67239

    Nadezhda
    Participant

    Hi arkgroup,

    Here is the entire example and it works on IE8 and Google Chrome. If it does not work on your side, please, make sure you are using the latest version of jQWidgets (3.7.0).

    <!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', legendFillColor: "#0000FF",
                                        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', legendFillColor: "#FF0000",
                                        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', legendFillColor: "#FF00FF",
                                    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', legendFillColor: "#00FFFF",
                                    colorFunction: function (value, itemIndex, serie, group) {
                                        if (itemIndex !== undefined) {
                                            if (temp !== "" && temp2 !== "") {
                                                return (itemIndex === temp && serie.dataField === temp2) ? '#FFFF00' : '#00FFFF';
                                            }
                                            else return "#00FFFF";
                                       
                                        }
                                    }
                                }
                        ]
                    }
                    ]
            };
            $(document).click(function (e) {
                temp = "";
                temp2 = "";
                $('#chartContainer').jqxChart('update');

            });
            $('#chartContainer').on('click', function (e) {
                e.stopPropagation();
            })
            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 17, 2015 at 1:46 pm change style on click legend #67240

    arkgroup
    Participant

    OK. New version make it work.

    Thanks

  • Author
    Posts
Viewing 5 posts - 16 through 20 (of 20 total)
1 2

You must be logged in to reply to this topic.