Web API: Export FlexChart to an Image

When you want your MVC FlexChart available outside your application, for example in a report, Web API lets you export your chart as just about any image type you might want.

There are three steps to exporting your FlexChart:

  1. Step 1: Create a FlexChart
  2. Step 2: Call the Service
  3. Step 3: Run the Project

You should have a FlexChart project ready to go; we're focusing on the Web API side of the project. So, start with a basic FlexChart application:


Step 2: Call the Service

  1. Add a C1 Web API Client JavaScript file and its reference to your MVC project.
  2. Create a function, using Client JavaScript Helper, to implement the export functionality by adding the following code to Views|FlexChart|Index.cshtml:


    function exportImage() {  
        var exporter = new wijmo.chart.ImageExporter();  
        imageType = document.getElementById("mySelect").value;  
        control = wijmo.Control.getControl('#flexChart');  
        exporter.requestExport(control, "http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", {  
            fileName: "exportFlexChart",  
            type: imageType,  

  1. Add a button and call the export functionality on its button click for initiating export request by adding the following code in Views | FlexChart | Index.cshtml:





Step 3: Run the Project

  • Click Build | Build Solution to build the project
  • Select F5 to run the project

When you run your application, it should resemble the following image:

» For more information on Web API, see the documentation


GrapeCity Developer Tools
comments powered by Disqus