NOTE: The ValidateRequest setting in the ASPX declaration of the page should be set to false when you are exporting, since SVG data is XML based and this triggers the validation checks of ASP.NET.

In order to enable exporting, just include the jquery.jqChart.exporting.min.js file immediately after the javascript file the chart uses. (jquery.jqChart.min.js)

Exporting the chart is easy - please, take a look at the C#/VB.NET code tab for details. In essence, you can get all export details by calling the GetExportData() method of the chart. This will give you access to SVG stream of export data, which you can later easily convert to any image format and/or PDF - or in fact, anything else fom SVG.

In our example we are transforming the SVG to iamges and PDF with just a few lines of code using free open source PDF and Image tools (see C#/VB.NET code tab for details)
<%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQSuiteASPNETExample.examples.chart.export.export._default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>jqChart ASP.NET chart control - Exporting Data</title>        
    <!-- jQuery runtime minified -->
    <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>    
    <!-- The javascript source file of jqChart -->
    <script src="/js/trirand/jquery.jqChart.min.js" type="text/javascript"></script>    
    <!-- The javascript chart exprting module -->
    <script src="/js/trirand/jquery.jqChart.exporting.min.js" type="text/javascript"></script>        
    <style type="text/css">    
        body, html { font-size: 80%; }    
    </style>
</head>
<body>
    <form id="form1" runat="server">      
    
    <!-- The chart can be created declaratively in ASPX or in code-behind with C#/VB.NET code -->
    <trirand:JQChart 
        runat="server" 
        Width="600"
        Height="410"
        Type="AreaSpline"        
        ID="ExportChart">
        <Title Text="Average fruit consumption during one week"></Title>
        <Legend
            Layout="Vertical"
            Align="Left"
            VerticalAlign="Top"
            X="150"
            Y="100"
            Floating="true"
            BorderWidth="1"
            BackgroundColor="#FFFFFF"            
        />      
        <XAxis>
            <trirand:ChartXAxisSettings>
                <Categories>
                    <trirand:AxisCategory Text="Monday" />                    
                    <trirand:AxisCategory Text="Tuesday" />
                    <trirand:AxisCategory Text="Wednesday" />
                    <trirand:AxisCategory Text="Thursday" />
                    <trirand:AxisCategory Text="Friday" />                    
                    <trirand:AxisCategory Text="Saturday" />
                    <trirand:AxisCategory Text="Sunday" />                    
                </Categories>
            </trirand:ChartXAxisSettings>
        </XAxis>        
        <YAxis>
            <trirand:ChartYAxisSettings>
                <Title Text="Number of Units" />                
                <Labels Formatter="formatYAxisLabel" />
            </trirand:ChartYAxisSettings>
        </YAxis>
        <ToolTips Formatter="toolTipFormatter" />
        <PlotOptions>
            <Area FillOpacity="0.5" />
        </PlotOptions>        
        <Series>
            <trirand:ChartSeriesSettings Name="John">
                <Data>
                    <trirand:ChartPoint Y="3" />
                    <trirand:ChartPoint Y="4" />
                    <trirand:ChartPoint Y="3" />
                    <trirand:ChartPoint Y="5" />
                    <trirand:ChartPoint Y="4" />
                    <trirand:ChartPoint Y="10" />
                    <trirand:ChartPoint Y="12" />
                </Data>  
            </trirand:ChartSeriesSettings>
            <trirand:ChartSeriesSettings Name="Jane">
                <Data>
                    <trirand:ChartPoint Y="1" />
                    <trirand:ChartPoint Y="3" />
                    <trirand:ChartPoint Y="4" />
                    <trirand:ChartPoint Y="3" />
                    <trirand:ChartPoint Y="4" />
                    <trirand:ChartPoint Y="5" />
                    <trirand:ChartPoint Y="4" />
                </Data>                
            </trirand:ChartSeriesSettings>            
        </Series>
    </trirand:JQChart>    
    
    <script type="text/javascript">              
        
    function formatYAxisLabel()
    {
         return this.value;
    }
    
    function toolTipFormatter()
    {
         return this.x +': '+ this.y;
    }   
    
    </script>  
        
    
    <trirand:codetabs runat="server" id="tabs"></trirand:codetabs>  
    
    </form>  
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using Trirand.Web.UI.WebControls;
// Reference Svg.dll.
// The SVG library is a free open soure image and svg generation tool availble from
// http://svg.codeplex.com/
using Svg;
// Reference iTextSharp.dll
// iTextSharp is a free open source PDF generation tool available from
// http://sourceforge.net/projects/itextsharp/            
using iTextSharp.text.pdf;
using iTextSharp.text;
using System.Drawing.Imaging;

namespace JQSuiteASPNETExample.examples.chart.export.export
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)        
        {
            // Make sure you mark the page with ValidateRequest="False"
            // in the ASPX page header. SVG data used for export is XML based 
            // and will trigger the error.
            JQChartExportData exportData = ExportChart.GetExportData();
            MemoryStream exportStream = new MemoryStream();
            string fileExt = "";

            if (exportData.ExportActive)
            {
                // Reference Svg.dll.
                // The SVG library is a free open soure image and svg generation tool availble from
                // http://svg.codeplex.com/
                SvgDocument svgDoc = SvgDocument.Open(exportData.SvgStream);

                switch (exportData.Type)
                {
                    case "image/png":
                        svgDoc.Draw().Save(exportStream, ImageFormat.Png);
                        fileExt = "png";
                        break;
                    case "image/jpeg":
                        svgDoc.Draw().Save(exportStream, ImageFormat.Jpeg);
                        fileExt = "jpg";
                        break;
                    case "image/svg+xml":
                        exportStream = exportData.SvgStream;
                        fileExt = "svg";
                        break;
                    case "application/pdf":
                        exportStream = ExportToPDF(svgDoc, exportData);
                        fileExt = "pdf";
                        break;
                }

                Response.ClearContent();
                Response.ClearHeaders();
                Response.ContentType = exportData.Type;
                Response.AppendHeader("Content-Disposition", "attachment; filename=" + "chart" + "." + fileExt);
                Response.BinaryWrite(exportStream.ToArray());
                Response.End();
            }
        }

         private MemoryStream ExportToPDF(SvgDocument svgDoc, JQChartExportData exportData)
        {
            // Reference iTextSharp.dll
            // iTextSharp is a free open source PDF generation tool available from
            // http://sourceforge.net/projects/itextsharp/            
            Document pdfDoc = new Document(new iTextSharp.text.Rectangle((float)svgDoc.Width, (float)svgDoc.Height));
            MemoryStream imageStream = new MemoryStream();
            MemoryStream pdfStream = new MemoryStream();
            PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, pdfStream);
            
            // First step saving png that would be used in pdf
            svgDoc.Draw().Save(imageStream, ImageFormat.Png);

            // Creating pdf document
            pdfDoc = new Document(new iTextSharp.text.Rectangle((float)svgDoc.Width, (float)svgDoc.Height));
            // setting up margin to full screen image
            pdfDoc.SetMargins(0.0f, 0.0f, 0.0f, 0.0f);
            // creating image
            iTextSharp.text.Image pdfImage = iTextSharp.text.Image.GetInstance(imageStream.ToArray());
            pdfImage.ScaleToFit((float)svgDoc.Width, (float)svgDoc.Height);                

            // Insert content
            pdfWriter = PdfWriter.GetInstance(pdfDoc, pdfStream);
            pdfDoc.Open();
            pdfDoc.NewPage();
            pdfDoc.Add(pdfImage);
            pdfDoc.CloseDocument();        
        
            pdfDoc.Close();
            pdfDoc.Dispose();
            pdfWriter.Close();
            pdfWriter.Dispose();

            return pdfStream;
        }
    }
}
Switch theme:


Theming is based on the very popular jQuery ThemeRoller standard. This is the same theming mechanism used by jQuery UI and is now a de-facto standard for jQuery based components. The benefits of using ThemeRoller are huge. We can offer a big set of ready to use themes created by professional designers, including Windows-like themes (Redmond), Apple-like theme (Cupertino), etc. In addition to that any jQuery UI controls on the same page will pick the same theme.

Last, but not least, you can always roll your own ThemeRoller theme, using the superb Theme Editor

To use a theme, simply reference 2 Css files in your Html <head> section - the ThemeRoller theme you wish to use, and the jqGrid own ThemeRoller Css file. For example (Redmond theme):

<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />