Render to HTML

BitmapGraphicsRendering, SvgGraphicsRendering, and SvgRendering generate raster or vector content that can be embedded in HTML.

The rendering targets accept dimensions expressed in pixels, while the rectangle supplied to Render uses points.

The following example converts chart dimensions from points to pixels by using C1XLBook.TwipsToPixels.

using C1.Excel;

float width = 450;
float height = 300;

int widthPx = C1XLBook.TwipsToPixels(20 * width);
int heightPx = C1XLBook.TwipsToPixels(20 * height);

Render to PNG

BitmapGraphicsRendering renders chart or diagram content to a raster image.

The following example renders a chart to PNG and converts the output to a Base64-encoded string for embedding in HTML.

using System;
using System.IO;
using C1.Chart;
using C1.Excel;
using C1.Util;

// chart is an existing configured FlexChart or FlexDiagram.

float width = 450;
float height = 300;

int widthPx = C1XLBook.TwipsToPixels(20 * width);
int heightPx = C1XLBook.TwipsToPixels(20 * height);

string png;

using (var rendering =
    new BitmapGraphicsRendering(widthPx, heightPx))
{
    chart.Render(rendering, 0, 0, width, height);

    using (var stream = new MemoryStream())
    {
        rendering.Bitmap.SaveAsPng(stream);
        png = Convert.ToBase64String(stream.ToArray());
    }
}

The resulting Base64-encoded PNG can be embedded using an HTML image element.

<img src="data:image/png;base64,[PNG DATA]">

BitmapGraphicsRendering relies on the imaging components supplied through C1.Excel.

Render to SVG With SvgGraphicsRendering

SvgGraphicsRendering generates SVG content through the DS graphics rendering engine.

using System.Text;
using System.Xml;
using C1.Chart;
using C1.Excel;
using C1.Util;

// chart is an existing configured FlexChart or FlexDiagram.
// width, height, widthPx, and heightPx are defined
// as shown in the preceding example.

string svg;

using (var rendering =
    new SvgGraphicsRendering(widthPx, heightPx))
{
    chart.Render(rendering, 0, 0, width, height);

    var builder = new StringBuilder();

    rendering.ToDocument().Save(
        builder,
        new XmlWriterSettings
        {
            Encoding = Encoding.UTF8,
            Indent = true
        });

    svg = builder.ToString();
}

svg = svg.Substring(svg.IndexOf("<svg"));

SvgGraphicsRendering renders text as vector outlines. The generated text is not selectable as ordinary text.

Render to SVG With SvgRendering

SvgRendering is designed for resource-constrained platforms such as Blazor, Android, and iOS. The following example renders chart content to SVG.

using C1.Chart;
using C1.Excel;
using C1.Util;

// chart is an existing configured FlexChart or FlexDiagram.
// width, height, widthPx, and heightPx are defined
// as shown in the preceding example.

string svg;

using (var rendering =
    new SvgRendering(widthPx, heightPx))
{
    chart.Render(rendering, 0, 0, width, height);

    svg = rendering.ToText();
}

SvgRendering produces vector output with selectable text. Text rendering depends on the fonts available in the viewing environment.

Embed SVG in HTML

SVG content generated by SvgGraphicsRendering or SvgRendering can be embedded directly in an HTML document.

The following example writes generated SVG markup into an HTML file.

using System.Xml;

// svg contains the generated SVG markup.

using (var writer = XmlWriter.Create(
    "Chart.html",
    new XmlWriterSettings { Indent = true }))
{
    writer.WriteStartElement("html");
    writer.WriteStartElement("body");

    writer.WriteRaw(svg);

    writer.WriteEndElement();
    writer.WriteEndElement();
}

The generated SVG markup can also be incorporated into dynamically generated HTML content.