This example demonstrates how to customize the icons associated with series entries of the legend on an Area chart data, via JavaScript code customizations.
JavaScript Code - Use this chart-level attribute to customize your chart attributes and data. To customize your chart, a callback function, options.dataFilter, must be defined. Within that function, apply your customizations to the data. Any chart initialization changes, to attributes such as the chart title, type, or orientation, can also be made. The JavaScript Code used on this example is as follows:
function( options ) {
// Setup a callback function which gets called when data is retrieved, to manipulate the series data
options.dataFilter = function( data ) {
// Define a new legend, rather than using the default legend behavior applied to the chart
data.legend = {
sections:[{ items:[] }]
}
// Loop through the chart series, to define the new legend
for ( var i = 0; i < data.series.length; i++ ) {
// Manually add each series to the legend
// Note: We assume that images exist in Shared Components 'Static Application Files', with a size of 16x16 pixel for every series entry.
// The variable 'gAppImages' is defined in the page attribute 'Function and Global Variable Declaration'
data.legend.sections[ 0 ].items.push( {
text: data.series[ i ].name,
color: data.series[ i ].color,
symbolType: "image",
source: gAppImages + "legend/" + data.series[ i ].name + ".png"
});
// Do not automatically include the series in the legend
data.series[ i ].displayInLegend = 'off';
}
return data;
}
return options;
}
For more information on the JET chart legend options, refer to the Oracle JET LegendItem symbolType attributes in the ojChart API.
For more information on the Area chart style settings, refer to the Oracle JET Cookbook Area Chart: Styles example.