Displaying WijCompositeChart series in different formats

WijCompositeChart allows you to draw multiple types of charts in one canvas simultaneously. You can create a chart that displays multiple types of series such as column, pie, bar and line in the same chart. You can format the chart labels using the chartLabelFormatString option. However, these options are set at the chart level and hence the same format and style is applied to the chart labels of all the series. This blog discusses how you can format the chart label of each series in a different format. Once the chart is rendered, you can simply traverse through the chart labels collection and verify which chart label belongs to which type of series. Depending on the type of the series, you can format the chart label. Here is the code, that formats the column series labels as percentage values and the line series chart labels as currency values.

$.each(seriesEles, function (sId, seriesEle)
{
seriesType = seriesEle.type;
if (seriesType === "column")
{
else = seriesEle.eles;
$.each(eles, function (idx, ele)
{
chartLabel = ele.dcl;
labelValue = parseFloat(chartLabel.attr("text")) / 100;
chartLabel.attr("text", Globalize.format(labelValue, "p2"));
});
}
else if (seriesType === "line")
{
eles = seriesEle.eles.dcl;
$.each(eles, function (idx, ele)
{
chartLabel = $(this)[0];
labelValue = parseFloat(chartLabel.attr("text"));
chartLabel.attr("text", Globalize.format(labelValue, "c"));
});
}
});

Here is how the final output looks like:

You can download the complete sample here.