jQuery UI Widgets Forums Chart colorFunction in Chart

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • colorFunction in Chart #87415

    Robert0916
    Participant

    Hello Everyone,

    I want to use colorFunction: function (value, itemIndex, serie, group) to change line color based on data, but I couldn’t use external variable outside this function, can any one has any ideas to use external variables?

    Thanks in advance.
    Robert

    colorFunction in Chart #87436

    Dimitar
    Participant

    Hello Robert,

    Here is an example based on the demo Line Serie with conditional colors that shows how to access external variables in colorFunction:

    <!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>
        <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/jqxchart.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: 'Quarter' },
                        { name: 'Change' }
                    ],
                    url: '../sampledata/us_gdp_2008-2013.csv'
                };
    
                var dataAdapter = new $.jqx.dataAdapter(
                    source,
                    {
                        async: false,
                        autoBind: true,
                        loadError: function (xhr, status, error) {
                            alert('Error loading "' + source.url + '" : ' + error);
                        }
                    }
                );
    
                settings = {
                    title: "U.S. GDP Percentage Change",
                    borderLineWidth: 1,
                    showBorderLine: true,
                    enableAnimations: true,
                    description: '(source: Bureau of Economic Analysis)',
                    showLegend: false,
                    padding: { left: 5, top: 5, right: 10, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    categoryAxis:
                    {
                        //description: 'Year and quarter',
                        dataField: 'Quarter',
                        unitInterval: 1,
                        textRotationAngle: -75,
                        formatFunction: function (value, itemIndex, serie, group) {
                            return value;
                        },
                        valuesOnTicks: false
                    },
                    colorScheme: 'scheme05',
                    seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                description: 'Percentage Change',
                                formatFunction: function (value) {
                                    return value + '%';
                                }
                            },
                            series:
    						    [
                                    {
                                        dataField: 'Change',
                                        displayText: 'Change',
    
                                        // Modify this function to return desired colors.
                                        // jqxChart will call the function for each data point.
                                        // Sequential points that have the same color will be
                                        // grouped automatically in a line segment
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            if (isNaN(itemIndex) !== true) {
                                                var change = (dataAdapter.records[itemIndex]).Change; // dataAdapter is an external variable
                                                return (change < 0) ? '#FF0000' : '#00FF00';
                                            }
                                        }
                                    }
    						    ]
                        }
    
                    ]
                };
    
                $("#chart1").jqxChart(settings);
            });
        </script>
    </head>
    <body class='default'>
        <div id="chart1" style="width:800px; 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.