Making SVG Charts with Common Objects

• Download source - 78.14 KB

Introduction

This article tries to explain how we can make some interesting charts such as Pie chart, Histogram chart and Linear chart to represent data.

My project contains two libraries in order to create one of those charts. The first library (SVGObjects) contains some of the common svg objects that we need to create a well formatted svg document. Of course, we can add more if needed. We'll use the second library (Charts) to format the charts. Notice that we only have one way to input data to be transformed, this is using a DataTable. Of course, we can modify the projects, adding more interfaces in order to accept other types of objects that contain data such as Hashtables or XmlNodes.

Background

Charts is a hierarchical class library. All classes used to create those charts have the method GenerateChart. The only thing that we have to do to call this method is to pass in the chart data with a DataTable object containing two columns, one with the chart labels as strings and one with the chart values as doubles.

There are some interesting features:

1. Using guide lines
   We can set WithGuideLines property in order to create four guide lines in whatever of AxisChart's class, to understand the data representation better. 
2. Dividing the legend
   In some cases, using the Linear chart, we'll be interested to divide the legend in a certain amount of items. This probably happens when we have a lot of rows in the DataTable. To reduce the number of these items, when we create the object, we must pass the number of items that we want to use.

Using the Code

It's very easy to create charts with the Chart library. We just need to instantiate an object of the required chart class (e.g. PieChart), passing these parameters to the constructor: width, height and number of legend items.

Creating a Pie Chart

private void button1_Click(object sender, EventArgs e)
{
    DataTable tbValues = GetData();
    PieChart chees = new PieChart(300, 200, tbValues.Rows.Count);
    XmlDocument xml = chees.GenerateChart(tbValues, "name", "value");
    SaveDocument(xml);
}

Creating a Histogram Chart

private void button2_Click(object sender, EventArgs e)
{
    DataTable tbValues = GetData();
    HistogramChart hist = new HistogramChart(300, 200, tbValues.Rows.Count);
    XmlDocument xml = hist.GenerateChart(tbValues, "name", "value");
    SaveDocument(xml);
}

Creating a Linear Chart

private void button3_Click(object sender, EventArgs e)
{
    DataTable tbValues = GetData();
    LinealChart line = new LinealChart(300, 200, tbValues.Rows.Count);
    XmlDocument xml = line.GenerateChart(tbValues, "name", "value");
    SaveDocument(xml);
}

The objects that are used by SVGObjects library contain the main attributes to make a chart. In some cases, the attribute names are not the same as the names of the svg elements they represent and some of their properties are omitted. This is to simplify the object creation. To address that, the Charts library needs to transform those objects to a well formatted svg document.
In order to do this, the library uses an XSLT template.

Transforming to a Well Formatted svg Document

protected XmlDocument Transform()
{
    XmlDocument xmlResult = new XmlDocument();
    XslCompiledTransform xslt = new XslCompiledTransform();
    xslt.Load(AppDomain.CurrentDomain.BaseDirectory + @"\Charts.xslt");
    XPathNavigator nav = this.Doc.ToXml().CreateNavigator();
    StringBuilder sw = new StringBuilder();
    XmlWriter xr = XmlWriter.Create(sw, null);
    xslt.Transform(nav, xr);
    xmlResult.LoadXml(sw.ToString());
    return xmlResult;
}

History

• 4^th November, 2009: Initial post