Skip to main content

WebCharts

WebCharts lets a Wisej.NET application on .NET Framework use the Microsoft Chart Controls, the System.Windows.Forms.DataVisualization.Charting library that WinForms applications have used for years. Its Chart control exposes the familiar ChartAreas and Series collections. The chart is drawn on the server as a PNG at the control's current size, and the browser displays that image.

Its main use is porting a WinForms application whose charts are built with Microsoft Chart Controls: the chart code carries over almost unchanged.

.NET Framework 4.8 only, not on NuGet

WebCharts targets net48 only. System.Windows.Forms.DataVisualization doesn't exist on .NET 8, so the extension can't be used in a .NET Core application. It isn't published on NuGet either. Build it from source and reference the assembly. On .NET 8, use ChartJS, ChartJS3 or ChartJS4 instead, which draw in the browser and are interactive.

Getting started​

Reference the built Wisej.Web.Ext.WebCharts.dll in a .NET Framework 4.8 Wisej.NET project, together with the framework assemblies System.Windows.Forms.DataVisualization and System.Web. The Chart control then appears in the toolbox, and the designer draws a live preview of it.

using Charting = System.Windows.Forms.DataVisualization.Charting;

private void Page1_Load(object sender, EventArgs e)
{
    this.chart1.ChartAreas.Add(new Charting.ChartArea("Default"));

    var sales = new Charting.Series("Sales")
    {
        ChartType = Charting.SeriesChartType.Column,
        ChartArea = "Default"
    };
    sales.Points.AddXY("Q1", 120);
    sales.Points.AddXY("Q2", 145);
    sales.Points.AddXY("Q3", 98);
    this.chart1.Series.Add(sales);

    this.chart1.Update();
}

Everything under ChartAreas and Series is the standard Microsoft Chart Controls object model: chart types, axes, labels, legends, palettes, data binding with Points.DataBindXY, and so on. The Microsoft documentation covers it in full.

How it renders​

The control holds a Microsoft Chart that never creates a window. When the browser asks for the chart, the control sets that chart to the control's width and height, saves it as a PNG straight into the HTTP response, and the browser shows it as the control's background image.

Call Update after changing the chart

The image isn't regenerated when you change ChartAreas, Series or their data points. After any change at runtime, call Update(). That sends the browser a new image URL, and the browser then downloads the new PNG.

What that means in practice:

  • No interactivity in the browser. There are no tooltips, no hover effects and no click events on data points. It's a picture of the chart.
  • Every refresh is a round trip. Each update renders and downloads a full image, so it isn't meant for data that changes several times a second. For live data, use SmoothieChart or ChartJS with UpdateData.
  • Resizing re-renders. The image is drawn at the control's size, so it stays sharp when the control is docked or anchored.
tip

Use BeginInit and EndInit around a batch of changes to suspend the chart's internal processing, as the designer-generated code does.

API reference​