@using Trirand.Web.Mvc

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET MVC - Export Chart to SVG, Image, PDF</title>
    <!-- jQuery runtime minified -->    
    <script src="~/Scripts/jquery-3.2.1.min.js" type="text/javascript"></script>  
    <!-- Include the javascript client-side file for jqChart -->
    <script type="text/javascript" src="~/Scripts/trirand/jquery.jqChart.min.js"></script>
    <!-- Include the exporting client-side file for jqChart -->
    <script type="text/javascript" src="~/Scripts/trirand/jquery.jqChart.exporting.min.js"></script>
</head>

<body>
    <div>
        <!--
        The Html.Trirand().JQChart() helper has two parameters
            - the model of the chart -- all chart properties, data and settings
            - the ID of the chart -- can be used for client-side manipulation
        In this example we are using hardcoded model in the View, but you can contruct the model in 
        the controller based on runtime criteria and database data and pass the model 
        to the View using ViewData
        -->
        @(Html.Trirand().JQChart(
                new JQChart
                {
                    Width = 600,
                    Height = 410,
                    Type = ChartType.AreaSpline,
                    Title = new ChartTitleSettings
                    {
                        Text = "Average fruit consumption during one week"
                    },
                    Legend = new ChartLegendSettings
                    {
                        Layout = ChartLegendLayout.Vertical,
                        Align = ChartHorizontalAlign.Left,
                        VerticalAlign = ChartVerticalAlign.Top,
                        X = 150,
                        Y = 100,
                        Floating = true,
                        BorderWidth = 1,
                        BackgroundColor = "#FFFFFF"
                    },
                    XAxis = new List<ChartXAxisSettings>()
                    {
                        new ChartXAxisSettings
                        {
                            Categories = new List<string> {
                                    "Monday", 
                                    "Tuesday", 
                                    "Wednesday", 
                                    "Thursday", 
                                    "Friday", 
                                    "Saturday", 
                                    "Sunday"
                            }                            
                        }
                    },
                    YAxis = new List<ChartYAxisSettings>
                    {
                        new ChartYAxisSettings
                        {
                            Title = new ChartTitleSettings { Text = "Fruit Units" }                            
                        }
                    },
                    ToolTip = new ChartToolTipSettings
                    {
                        Formatter = "toolTipFormatter"
                    },
                    PlotOptions = new ChartPlotOptionsSettings
                    {
                        AreaSpline = new ChartAreaSplineSettings
                        {
                            FillOpacity = 0.5
                        }
                    },
                    Series = new List<ChartSeriesSettings>()
                    {
                        new ChartSeriesSettings
                        {
                            Name = "John",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 3, 4, 3, 5, 4, 10, 12 }
                            )                            
                        },
                        new ChartSeriesSettings
                        {
                            Name = "Jane",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 1, 3, 4, 3, 3, 5, 4 }
                            )                            
                        }
                    }
                }
                , "ExportImageChart")
)   
        
        
        <script type="text/javascript">
        
        function toolTipFormatter()
        {
            return this.x +': '+ this.y +' units';
        }
        
        
        </script>   
        
        <br /><br />
        
               
        
    </div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Trirand.Web.Mvc;
using System.IO;
using System.Drawing.Imaging;

// The iTextSharp library is a free open source PDF generation tool available from
// http://sourceforge.net/projects/itextsharp/
using iTextSharp.text.pdf;
using iTextSharp.text;

// The SVG library is a free open soure image and svg generation tool availble from
// http://svg.codeplex.com/
using Svg;

namespace MVCDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        // *************************
        // Must mark the action with ValidateInput(false)
        // since SVG export data might be considered harmful by default
        // *************************
        [ValidateInput(false)]
        public ActionResult ExportImage()
        {
            JQChart chart = new JQChart();
            JQChartExportData exportData = chart.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();
            }

            return View();
        }

        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 = null;
            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" />