jQuery UI Widgets › Forums › Chart › colorFunction in Chart
Tagged: Angular chart, chart, colorFunction, conditional colors, external variable, jquery chart, jqxChart, scope, variable
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 8 years, 4 months ago.
-
AuthorcolorFunction in Chart Posts
-
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.
RobertHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.