Services > Image Services > Export Services > Export RadialGauge to Image |
This section shows how to call the Web API service project through a client application and add an export function for exporting RadialGauge control as an image.
Step 2: Run the Client Project
The following image shows how the RadialGauge appears after completing the steps above:
Complete the following steps to call the Web API service.
Add the following code to Views|RadialGauge|Index.cshtml to export the RadialGauge control to image.
Index.cshtml |
Copy Code
|
---|---|
<script type="text/javascript"> function exportImage() { var exporter = new wijmo.gauge.ImageExporter(); imageType = document.getElementById("mySelect").value; control = wijmo.Control.getControl('#radialGauge'); exporter.requestExport(control, "http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", { fileName: "exportRadialGauge", type: imageType, }); } </script> |
Add the following markup in <script> tags to export RadialGauge control to image.
JavaScript |
Copy Code
|
---|---|
<script type="text/javascript"> function exportImage() { var exporter = new wijmo.gauge.ImageExporter(); var radialGauge = wijmo.Control.getControl("#RadialGauge"); exporter.requestExport(radialGauge, " http://demos.componentone.com/ASPNET/WebAPI/api/export/image", { fileName: "exportRadialGauge", type: Png, }); } </script> |
Note: To use Wijmo 5 controls in your HTML application, you need to include references to few Wijmo files in your HTML pages. You may either download these wijmo files and copy them to appropriate folders in your application, or reference Wijmo files hosted in cloud on our Content Delivery Network (CDN). If you download and place the Wijmo script files in a folder named "Scripts", css files in a folder named "Styles", and script files specific to Wijmo controls to "Controls" folder, then add the following references within <head> tags of your HTML pages:
|
Add the following code in Views | RadialGauge | Index.cshtml to add buttons for export functionality.
Index.cshtml |
Copy Code
|
---|---|
<select id="mySelect"> <option selected>Png</option> <option>Jpg</option> <option>Gif</option> <option>Bmp</option> <option>Tiff</option> </select> <button onclick="exportImage()" title="Export">Export</button> |
Add the following markup within the <body> tags to create button for export function.
HTML |
Copy Code
|
---|---|
<button onclick="exportImage()" title="Export">Export</button> |
MVC Application
HTML Application
Export button appears along with the control, in the output. Use this button to export the control as image.
Explore detailed demo samples of image export service for MVC and Wijmo5 RadialGauge control in: |