Direct Streaming to Browser

To add a chart in an ASP.NET web page, the chart image is usually created and stored in memory or as a temporary file, then an <IMG> tag is sent to the browser. The browser uses the URL in the <IMG> tag to load the chart image from a separate HTTP connection.

In the direct streaming method, an <IMG> is sent to the browser without creating the chart image first. When the browser uses the URL to load the chart image, the server creates the image on the fly and streams it back to the browser. In a typical case, the <IMG> tag is like:

<img src="createChart.aspx">

In the above, "createChart.aspx" is a script that creates the chart on the fly. It can then stream the chart image to the browser with Response.BinaryWrite. An example is:

[ASP.NET - VB Version]

<%@ Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%
'The data for the bar chart
Dim data() As Double = {85, 156, 179.5, 211, 123}

'The labels for the bar chart
Dim labels() As String = {"Mon", "Tue", "Wed", "Thu", "Fri"}

'Create a XYChart object of size 250 x 250 pixels
Dim c As XYChart = New XYChart(250, 250)

'Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200)

'Add a bar chart layer using the given data
c.addBarLayer(data)

'Set the x axis labels using the given labels
c.xAxis().setLabels(labels)

'output the chart
Response.ContentType = "image/png"
Response.BinaryWrite(c.makeChart2(Chart.PNG))
Response.End
%>

[ASP.NET - C# Version]

<%@ Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%
//The data for the bar chart
double[] data = {85, 156, 179.5, 211, 123};

//The labels for the bar chart
string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"};

//Create a XYChart object of size 250 x 250 pixels
XYChart c = new XYChart(250, 250);

//Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200);

//Add a bar chart layer using the given data
c.addBarLayer(data);

//Set the x axis labels using the given labels
c.xAxis().setLabels(labels);

//output the chart
Response.ContentType = "image/png";
Response.BinaryWrite(c.makeChart2(Chart.PNG));
Response.End();
%>

For ASP.NET MVC, the <IMG> URL can point to an action:

<img src="/myController/CreateChart">

The action can create the chart as usual, and stream the chart image to the browser using the File ActionResult. An example is:

public ActionResult CreateChart()
{
    //The data for the bar chart
    double[] data = {85, 156, 179.5, 211, 123};

    //The labels for the bar chart
    string[] labels = {"Mon", "Tue", "Wed", "Thu", "Fri"};

    //Create a XYChart object of size 250 x 250 pixels
    XYChart c = new XYChart(250, 250);

    //Set the plotarea at (30, 20) and of size 200 x 200 pixels
    c.setPlotArea(30, 20, 200, 200);

    //Add a bar chart layer using the given data
    c.addBarLayer(data);

    //Set the x axis labels using the given labels
    c.xAxis().setLabels(labels);

    //output the chart
    return File(c.makeChart2(Chart.PNG), "image/png");
}

Note that with the direct streaming method, you output HTML in the charting code, as the output is for the <IMG> tag, which supports only images.

There are two common methods to pass parameters to the charting code:

Pass Data as Query Parameters. For example:

<img src="createChart.aspx?data=23,45,55...">
Pass Data as Session Variables. This method is useful if the parameters are too long, as many servers and browsers support URL of around 2K bytes only.

If you are using the Visual Studio designer to layout a Web Form, an ASP.NET Image control can be used for the <IMG> tag. In this case, make sure the control size matches the chart size. For example, if the chart is 250 x 250 pixels, the control should also be 250 x 250 pixels. Otherwise, the browser will resize the chart image to fit the control, and this may result in suboptimal display of the chart image.

The advantage of direct streaming is its efficiency. The chart is generated on demand and then immediately streamed to the browser. Memory is only tied up for a short time. Without direct streaming, the chart image would need to be stored in memory or as a temporary file, waiting for the browser to load it using a separate HTTP connection. This may take a few to many seconds.

The main disadvantage of direct streaming is that the charting code can only output the chart image, but not other HTML or Javascript content. That means the chart cannot have tooltips, hot spots, programmable track cursors or zooming and scrolling features.