Chart PDF Exports

In this topic, you'll learn how to add references for the chartexport and wijbarchart to an HTML project using HTML markup and jQuery script, and to customize a number of PDF settings for the export.

Quick Start

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 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.
Drop down and copy markup to paste inside the body tags
Markup
Copy Code

<div id="wijbarchart" style="width: 400px; height: 300px"> <input type="button" value="Export to PDF" id="exportPDF"/> </div>

Markup	Copy Code
<div id="wijbarchart" style="width: 400px; height: 300px"> <input type="button" value="Export to PDF" id="exportPDF"/> </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.

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 file to export is set to Pdf.
The name of the exported file is set to MyChartPDFExport.
The pdf options are set to favor speed over quality, and to allow editing and copying of content only if you supply the owner password when opening the file, and to allow opening the file only if you supply the user password.

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] } }] }); }); $("#exportPDF").button().click(function () { wijmo.exporter.exportChart({ serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart", chart: $("#wijbarchart").data("wijmo-wijbarchart"), exportFileType: wijmo.exporter.ExportFileType.Pdf, fileName: "MyChartPDFExport", pdf: { imageQuality: wijmo.exporter.ImageQuality.Low, compression: wijmo.exporter.CompressionType.BestSpeed, fontType: wijmo.exporter.FontType.Standard, author: "Ninja Code Monkey", creator: "Wijmo wijbarchart", subject: "Console Wars", title: "Console Wars", producer: "Wijmo exporter", keywords: "Wii, XBOX360, PS3", encryption: wijmo.exporter.PdfEncryptionType.Standard128, ownerPassword: "MINE!", userPassword: "ours", allowCopyContent: false, allowEditAnnotations: true, allowEditContent: false, allowPrint: true } }); }); }); </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] }
            }]
        });
    });
    $("#exportPDF").button().click(function () {
        wijmo.exporter.exportChart({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/chart",
            chart: $("#wijbarchart").data("wijmo-wijbarchart"),
            exportFileType: wijmo.exporter.ExportFileType.Pdf,
            fileName: "MyChartPDFExport",
            pdf: {
                imageQuality: wijmo.exporter.ImageQuality.Low,
                compression: wijmo.exporter.CompressionType.BestSpeed,
                fontType: wijmo.exporter.FontType.Standard,
                author: "Ninja Code Monkey",
                creator: "Wijmo wijbarchart",
                subject: "Console Wars",
                title: "Console Wars",
                producer: "Wijmo exporter",
                keywords: "Wii, XBOX360, PS3",
                encryption: wijmo.exporter.PdfEncryptionType.Standard128,
                ownerPassword: "MINE!",
                userPassword: "ours",
                allowCopyContent: false,
                allowEditAnnotations: true,
                allowEditContent: false,
                allowPrint: true
            }
        });
    });
});
</script>

Save your HTML file and open it in a browser. The widget appears like the following live widget. Click the Export to PDF button. The file appears in your Downloads folder. Open the file with the owner or user password to see the differences in what is allowed.

Reference

PdfSetting Interface

ExportSetting Interface

ChartExportSetting Interface