Image Exports

In this topic, you'll learn how to add references for the chartexport and wijbarchart, and add a selection of five image export types to an HTML project using HTML markup and jQuery script.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script>

References

Copy Code

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

Add the following markup within the <body> tags to create the barchart widget, drop-down selector, and button.

The <div> element creates the barchart widget, and we call its id attribute in jQuery to initialize it.
The <input> element creates the button, and we call its id attribute in jQuery to export the chart in the click function.
The <select> element creates the dropdown list, and we call its id attribute in jQuery to collect the value to use for the exportFileType option.

Markup	Copy Code
<div id="wijbarchart" style="width: 400px; height: 300px"> <input type="button" value="Export to Image" id="exportImage"/> <select id="exporttype"> <option selected="selected" value="Jpg">Export To Jpg</option> <option value="Png">Export To Png</option> <option value="Gif">Export To Gif</option> <option value="Bmp">Export To Bmp</option> <option value="Tiff">Export To Tiff</option> </select> </div>

Markup

Copy Code

<div id="wijbarchart" style="width: 400px; height: 300px">
<input type="button" value="Export to Image" id="exportImage"/>
<select id="exporttype">
    <option selected="selected" value="Jpg">Export To Jpg</option>
    <option value="Png">Export To Png</option>
    <option value="Gif">Export To Gif</option>
    <option value="Bmp">Export To Bmp</option>
    <option value="Tiff">Export To Tiff</option>
</select>
</div>

Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data, and to export the chart when the button is clicked using the following settings.

A type variable collects the selected export type value from the <select> dropdown.
The path to the chart export API is directed to the ComponentOne demo server.
The chart to export is set to the id attribute of the barchart widget's markup.
The type of image to export is taken from the type variable.
The name of the exported file is set to MyChartImageExport.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijbarchart", "chartexport"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ seriesList: [{ label: "US", legendEntry: true, data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] } }] }); }); $("#exportImage").button().click(function () { var type = $("#exporttype").val(); wijmo.exporter.exportChart({ serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart", chart: $("#wijbarchart").data("wijmo-wijbarchart"), exportFileType: wijmo.exporter.ExportFileType[type], fileName: "MyChartImageExport" }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijbarchart", "chartexport"], function () {
    $(document).ready(function () {
        $("#wijbarchart").wijbarchart({
            seriesList: [{
                label: "US",
                legendEntry: true,
                data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }
            }]
        });
    });
    $("#exportImage").button().click(function () {
        var type = $("#exporttype").val();
        wijmo.exporter.exportChart({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart",
            chart: $("#wijbarchart").data("wijmo-wijbarchart"),
            exportFileType: wijmo.exporter.ExportFileType[type],
            fileName: "MyChartImageExport"
        });                
    });
});
</script>

Save your HTML file and open it in a browser. The widget appears like the following live widget. Drop down the export types to select an image type, and click the Export to Image button. The file appears in your Downloads folder.

Reference

ChartExportSetting Interface