jQuery UI Widgets Forums Chart Apply color scheme individual series wise

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 8 months ago.

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

  • vinodn
    Participant

    Hi,

    I would like to apply specific color to individual series charts.

    Say for example in the below image, I want cash to be in blue and debt in yellow. This should be the same across all types of chart in my site. If in any chart Cash doesn’t appear, the blue color shouldn’t get assigned to debt or any other value. Same with debt. How can I hard code this?


    Dimitar
    Participant

    Hi vinodn,

    You can achieve this by using the series colorFunction callback. Here is an example, based on the demo Pie Series:

    <!DOCTYPE html>
    <html 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="../../../jqwidgets/jqxcore.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/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare chart data as an array
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: 'Browser' },
                        { name: 'Share' }
                    ],
                    url: '../sampledata/desktop_browsers_share_dec2011.txt'
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Desktop browsers share",
                    description: "(source: wikipedia.org)",
                    enableAnimations: true,
                    showLegend: false,
                    showBorderLine: true,
                    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    colorScheme: 'scheme02',
                    seriesGroups:
                        [
                            {
                                type: 'pie',
                                showLabels: true,
                                series:
                                    [
                                        {
                                            dataField: 'Share',
                                            displayText: 'Browser',
                                            labelRadius: 120,
                                            initialAngle: 15,
                                            radius: 170,
                                            centerOffset: 0,
                                            formatSettings: { sufix: '%', decimalPlaces: 1 },
                                            colorFunction: function (value, itemIndex, serie, group) {
                                                switch (dataAdapter.records[itemIndex].Browser) {
                                                    case 'Internet Explorer':
                                                        return '#6495ED';
                                                    case 'Firefox':
                                                        return '#D2691E';
                                                    case 'Chrome':
                                                        return '#FFD700';
                                                    case 'Safari':
                                                        return '#696969';
                                                    case 'Opera':
                                                        return '#B22222';
                                                    default:
                                                        return '#DCDCDC';
                                                }
                                            }
                                        }
                                    ]
                            }
                        ]
                };
    
                // setup the chart
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id='chartContainer' style="width: 850px; height: 500px;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.