Izenda Logo

This documentation is for the legacy Izenda 6 product. Documentation for the new Izenda 7 product can be found at https://www.izenda.com/docs/

Basic Charts

Purpose

Customizing the chart colors allows you to inject a bit of your own branding, or any other color scheme, into Izenda's reports.

Example

This image depicts a pie chart with custom colors set to Blue, Red, Yellow and Green.

Pie chart with custom colors

Implementation

The following code snippet should be added to the default.master page in a webforms implementation, or in Views/Shared/_SiteLayout.cshtml in an MVC implementation:

<script type="text/javascript">
  htmlChartColors = ['Blue', 'Red', 'Yellow', 'Green'];
</script>

This would achieve the color scheme from the example image above.

Note: you will need a recent copy of the Izenda core product. This ability was added in 6.7.0.264, and can be downloaded here

Visualizations

Visualizations use the D3 javascript library, which means that to customize the colors used in a specific visualization you must modify that feature's base code. There is no global setting to change the colors used in a visualization, as each visualization has its own independent codebase.

Example

Here, the Heatmap visualization has been customized to use two colors - red and green.

Custom Colors used in a visualization

Implementation

Here we have customized the Color function in the base visualization definition, located by default at .\Resources\Vis\Rectangular\Heatmap\View.html

var items = vis.getItems(), sum = 0, avg = 0;
for (var i = 0; i < items.length; ++i) {
	sum += vis.unitValue(items[i], s.props.metric);
}
avg = sum / items.length;

function color(d) {
	// val - value of the current rectangle.
	var val = vis.unitValue(d, s.props.metric);

	return (val > avg) ? "#FF0000" : "#00FF00";
}

The basic steps involved here are:

  • Determine the value of each item
  • Establish an average of all values in the dataset,
  • Color each value red (#FF0000) if it is above the average, and green (#00FF00) if it is below.