Adding Custom Charts to Izenda

We often get asked how many different types of charts we support. While there are about a hundred variations we support out of the box, our underlying Dundas API can generate pretty much any chart style or type imaginable.  If you’d like us to create a custom chart for you, just send us a picture of what it should look like.

Supporting additional chart types involves adding UI elements to the chart tab and applying the behavior via the CustomizeChart() method.  In this article we will add an average line to our plot chart.

So let’s say we want a plot chart that shows an average line. First, we need to add “Average” to the advanced properties of the chart tab. You can register custom properties of following types:

  • Boolean (Shown as Checkbox): CheckBoxChartProperty
  • String (Shown as Textbox): TextboxChartProperty
  • String (Shown as Combobox): DropdownChartProperty

Also you register add properties depending on chart type. Following chart types are present:

  • Bar chart: DundasBarChart
  • Funnel chart: DundasFunnelChart
  • Pie or doughnut chart: DundasPieChart
  • Simple plot: DundasPlotChart
  • Trend chart: DundasTrendChart

We can add this code in the ConfigureSettings() method.

public class CustomAdHocConfig : FileSystemAdHocConfig
{
....
public override void ConfigureSettings()
{
foreach (Izenda.AdHoc.Chart chart in AdHocSettings.Charts.AllValues)
if (chart is DundasPlotChart //other possible values are DundasBarChart, DundasFunnelChart, DundasPieChart, DundasTrendChart
if (!chart.Properties.Contains("Average"))
chart.Properties.Add("Average", new CheckBoxChartProperty(false, "Show Average Line")); //also possible DropdownChartProperty, TextboxChartProperty
}
....
}

As a result, we get an additional checkbox “Show Average Line” among the chart properties.

Now the value of this property can be used during chart rendering. This occurs in another method in the Global.asax, which is shown at the following piece of code:


public classCustomAdHocConfig : FileSystemAdHocConfig
{
....
public override void CustomizeChartobject chart, Hashtable properties)
{
if (!properties.ContainsKey("Average"))
return;
if ((bool) properties["Average"]) {
Dundas.Charting.WebControl.Chart dundasChart = (Dundas.Charting.WebControl.Chart) chart;
int seriesNum = dundasChart.Series.Count;
for int index = 0; index < seriesNum; index++) {
Series series = dundasChart.Series[index];
if (series.Points.Count == 0)
continue;
int yCnt = 0;
double ySum = 0;
foreach (DataPoint point in series.Points)
foreach (double value in point.YValues) {
ySum += value;
yCnt++;
}
ySum /= yCnt;
>Series average = dundasChart.Series.Add("Average_" + series.Name);
average.MarkerStyle = MarkerStyle.None;
average.Type = SeriesChartType.Line;
average.Color = Color.FromArgb(255, 255, 0, 0);
foreach (DataPoint point in dundasChart.Series[0].Points)
average.Points.Add(new DataPoint(point.XValue, ySum));
}
}
}
....
}

Here we first verify that property exists (was registered before), and then check its value. If it is true, we draw average line at the chart. We’ve now given the user the ability to customize charts by adding an average line.  In industries where variation from the norm is important, this is a critical feature. Izenda’s underlying platform is capable of delivering millions of different specialized charts.  This method may be used to enhance the visual appeal of the charts and dashboards. A good way to brainstorm is to search Google images for something like “pie chart” to see what our friends in the industry are doing.