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,  
        });  
    }  


~~~

3. 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:

   ~~~

    Png  
    Jpg  
    Gif  
    Bmp  
    Tiff  

Export  

~~~

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