These examples demonstrate the various ways to control the colors used for the chart series.
Default Color Palette - The JET chart color palette is integrated with Universal Theme. So you can easily change the default color palette using Theme Roller, allowing you to globally define the colour scheme for your application - for your charts and all other components. Simply launch Theme Roller on your chart page, click the Show All button, to expose all available groups, then scroll down to the Palette group and start making your color selections. Once you've defined your selection, click 'Save As' to save the changes to a new Theme Style. Then click 'Set as Current', to apply your changes to the application. Note that the changed color palette will be applied to all components of your application, not just to charts.
Series-Level Color Attribute - We declaratively support the definition of a series color via the series-level Color attribute. You can type the color, or use the Quick Pick or Color Picker, to make your selection.
SQL Series-Defined Colors - If you wish to apply colors based on a column in your table, or dynamically via your SQL query, then all you need to do is include the column/alias in your query and reference it in the series-level Color attribute. For example:
select a.product_name,
b.quantity,
b.customer,
case when b.quantity > 50 then 'gold'
when b.quantity <= 30 then 'red'
when b.quantity > 30 then 'green'
else 'blue'
end colors
from eba_demo_chart_products a, eba_demo_chart_orders b
where a.product_id = b.product_id
and customer = 'Store A'
...where a column alias COLORS has been defined. The column alias can then be referenced in the series color via the series-level Color attribute, using
&COLORS. syntax.
Custom Colors via JavaScript - Use the chart-level advanced attribute JavaScript Code to customize the chart colors at chart initialization. For example,:
function( options ){
// Setup a callback function which gets called when data is retrieved, it allows to manipulate the series
options.dataFilter = function( data ) {
data.series[ 0 ].items[0].color = "red";
data.series[ 0 ].items[1].color = "blue";
data.series[ 0 ].items[2].color = "yellow";
data.series[ 0 ].items[3].color = "green";
data.series[ 0 ].items[4].color = "purple";
return data;
};
// Set chart initialization options
return options;
}
Sort Order - These examples demonstrate the use of an ORDER BY in the chart SQL Query to control the sort ordering of a single-series chart.