Using Microsoft's Chart Controls In An ASP.NET Application: Serializing Chart Data

Introduction

Given this functionality, it should come as no surprise that the Microsoft Chart Controls also support serialization. Serialization is the process of persisting the state of a control or an object to some other medium, such as to disk. Deserialization is the inverse process, and involves taking the persisted data and recreating the control or object. With just a few lines of code you can persist the appearance settings, the data, or both to a file on disk or to any stream. Likewise, it takes just a few lines of codes to reconstitute a chart from the persisted information.

This article shows how to use the Microsoft Chart Control's serialization functionality by examining a demo application that allows users to create custom charts, specifying the data to plot and some appearance-related settings. The user can then save a "snapshot" of this chart, which persists its appearance and data to a record in a database. From another page, users can view these saved chart snapshots. Read on to learn more!

An Overview of the Demo Application

Note that there's also a "Save Chart As Snapshot" button. If the user clicks this they are shown an interface where they can enter a name for the snapshot.

Entering a name and clicking the "Save Chart Snapshot" button serializes the chart's appearance settings and its data, storing the resulting serialized information to a database table (ChartSnapshots).

On another page users can select from the saved snapshots and view a chart. A drop-down list shows each saved snapshot. Selecting displays the snapshot title, the date the snapshot was taken, and the chart data. The screen shot below shows this page when the user has opted to load the "Condiments, 1996, SeaGreen" snapshot, which is the one we created and saved in the above screen shot.

Keep in mind that the serialized chart information in this demo includes both the appearance-related settings (the palette selection, the chart's height and width, and so forth) and chart data, meaning that if a user views the snapshot at a later point in time they will be seeing the data from when the snapshot was generated. In other words, if the user creates a snapshot on February 1st, 2010 that shows the year to date sales for 2010 and then views that snapshot again on February 15th, it's vital to realize that the data will show the year to date sales as of February 1st, when the snapshot was taken, and not as of the date when the snapshot is viewed. If the charts are being populated with historical data then this is of no concern, but such a snapshot feature would not be useful when viewing charts whose data is still being updated.

Serializing Chart Information

1. Indicate whether you want to serialize the chart data, the appearance properties, or both by setting the Serializer's Content property to one of the following values:

   Setting	Description
   Appearance	Serializes all non-default appearance-related properties, such as line color, chart height, etc.
   Data	Serializes all data values in the chart; does not serialize appearance-related properties.
   Default	Serializes all non-default chart content, including the chart data and the appearance-related properties.
   All	Serializes all chart content, including the chart data and the appearance-related properties.

2. Call the Serializer property's Save method, passing in either: a file name (if you want to serialize to disk); a stream; or an XmlWriter or TextWriter object.

'Need to rebind the data to the chart so that the Series Points collection is populated (otherwise the data won't be serialized) chtCategorySales.DataBind() Dim serializedChartContent As String = String.Empty 'Serialize the chart Using writer As New StringWriter    'Serialize all content to a StringWriter    chtCategorySales.Serializer.Content = SerializationContents.Default    chtCategorySales.Serializer.Save(writer)    'Dump the contents to a string    serializedChartContent = writer.ToString()    'Close the StringWriter    writer.Close() End Using

The above code starts by rebinding the data to the Chart control. By default, the chart data is not persisted in view state and must be rebound on each page load. If you bind the chart to a data source control, as this example does, then this happens automatically during the page lifecycle, but that automatic binding occurs later in the page lifecycle than the Button's Click event handler, which is where the above code lives. Consequently, if we do not explicitly rebind the data to the chart then the serialized output will not contain any of the chart's data points (since they haven't been added to the chart yet).

Next, a StringWriter object is created (writer). This object will be used to hold the serialized content. The Serializer's Content property is then set to Default, indicating that we want to serialize all data points and non-default appearance-related settings. The actual serialization occurs on the next line, when we call the Serializer object's Save method, passing in the StringWriter. Finally, the contents written to the StringWriter are dumped out to a string, serializedChartContent, and the StringWriter is closed.

After the above code runs, the contents of serializedChartContent along with the snapshot title entered by the user are added to a new record in the ChartSamples table.

If you look at the serialized data in the database table you'll see that the Chart control serializes its appearance-related settings and data points using XML that's nearly identical to the Chart control's declarative syntax. Here's a snippet. You can see the full XML by examining the contents in the ChartSamples table. (They are also displayed in a TextBox at the bottom of the ViewChartSnapshots.aspx page.)

<?xml version="1.0" encoding="utf-16"?> <Chart Width="550" Height="350">    <Series>       <Series Name="SalesByMonth" XValueMember="Month" YValueMembers="Total" ...>          <Points>             <DataPoint XValue="7" YValues="2177.8" />             <DataPoint XValue="8" YValues="2333.8" />             <DataPoint XValue="9" YValues="1864" />             ...          </Points>       </Series>    </Series>    <ChartAreas>       <ChartArea Name="MainChartArea">          <AxisY>             <LabelStyle Format="C0" />             <StripLines>                <StripLine TextAlignment="Near" IntervalOffset="3243.0499999999997" ... />             </StripLines>          </AxisY>          <AxisX>             <MajorGrid Enabled="False" />             <CustomLabels>                <CustomLabel FromPosition="0.5" ToPosition="1.5" Text="Jan" />                <CustomLabel FromPosition="1.5" ToPosition="2.5" Text="Feb" />                <CustomLabel FromPosition="2.5" ToPosition="3.5" Text="Mar" />                ...             </CustomLabels>          </AxisX>       </ChartArea>    </ChartAreas> </Chart>

Deserializing The Persisted Chart Information

1. Add a Chart control to the page
2. Indicate what data to deserialize by setting the Chart control's Serializer object's Content property accordingly.
3. Call the Serializer object's Load method, passing in the serialized information either as: a file name (if the chart was serialized to disk); as a stream; or as an XmlReader or TextReader object.

<asp:Chart ID="chtViewer" runat="server" />

The page also includes a DropDownList control that's populated with the records in the ChartSnapshots table. Selecting an option from the list causes a postback. On postback the code connects to the database, gets back the snapshot's title, date created, and serialized information, and then runs the following code:

'Display the snapshot in the Chart control lblSnapshotTitle.Text = String.Format("{0} (Snapshot taken {1:d})", SnapshotTitle, SnapshotDate) txtSnapshotData.Text = SnapshotData Using reader As New StringReader(SnapshotData)    chtViewer.Serializer.Content = SerializationContents.Default    chtViewer.Serializer.Load(reader)    reader.Close() End Using

Here, the variables SnapshotTitle, SnapshotDate, and SnapshotData hold the values returned from the database. A StringReader object is created to read the contents of the chart's persisted information (SnapshotData). The Chart control's Serializer object has its Content configured to deserialize the data and non-default appearance-related properties, while the Load method does the actual deserialization logic, reconstituting the chart based on the contents of SnapshotData.

And that's all there is to it. With the above code, a user

Conclusion

The Chart control's serialization capabilities can be used for shorter-term serialization. For example, if you have a Chart control that gets its data from a slow data source, you could cache the chart data in view state or for a short duration in the .NET data cache. The Samples Environment for Microsoft Chart Controls includes a demo that stores the serialized content in view state so that the chart can be reconstructed on postbacks without having to re-query its underlying data store.

Happy Programming!