FlexChart Export

Saving charts as images for inclusion in other documents is a common requirement. Some browsers support this as a context menu option, but not all.

The FlexChart's saveImageToFile method makes this really easy:

Save as:

// This file locates: "Scripts/Lesson/C1FlexChart/Export.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // save chart image to file
    document.getElementById('saveButtons').addEventListener('click', function (e) {
        if (e.target instanceof HTMLButtonElement) {
            theChart.saveImageToFile('FlexChart.' + e.target.textContent);
        }
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: Export
        public ActionResult Export()
        {
            ViewBag.Points1 = Models.FlexChartData.GetPoints(50, 0, 3);
            ViewBag.Points2 = Models.FlexChartData.GetPoints(40, 100, 12);
            ViewBag.Points3 = Models.FlexChartData.GetPoints(30, -100, 24);
            return View();
        }
    }
}

@using LearnMvcClient.Models
 
@{ 
    IEnumerable<FlexChartData.Point> points1 = ViewBag.Points1;
    IEnumerable<FlexChartData.Point> points2 = ViewBag.Points2;
    IEnumerable<FlexChartData.Point> points3 = ViewBag.Points3;
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.Export_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.Export_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.Export_Text2)
</p>
 
<p id="saveButtons">
    @Html.Raw(Resources.C1FlexChart.Export_Text3)
    <button class="btn btn-default">PNG</button>
    <button class="btn btn-default">JPEG</button>
    <button class="btn btn-default">SVG</button>
</p>
 
@(Html.C1().FlexChart().Id("theChart")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Scatter)
    .Header(Resources.C1FlexChart.Export_Text4)
    .AxisY(ab=>ab.AxisLine(true))
    .Series(sb=>
    {
        sb.Add().Bind("X", "Y", points1).Name(Resources.C1FlexChart.Export_Text5);
        sb.Add().Bind("X", "Y", points2).Name(Resources.C1FlexChart.Export_Text6);
        sb.Add().Bind("X", "Y", points3).Name(Resources.C1FlexChart.Export_Text7);
    })
)