@using Trirand.Web.Mvc

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET MVC - Column Chart With Negative Values</title>
    <!-- jQuery runtime minified -->    
    <script src="~/Scripts/jquery-3.0.0.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>
</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.Column,
                    Title = new ChartTitleSettings { Text = "Column chart with negative values" },
                    XAxis = new List<ChartXAxisSettings>
                    {
                        new ChartXAxisSettings
                        {
                            Categories = new List<string>
                            {
                                "Apples", "Oranges", "Pears", "Grapes", "Bananas"
                            }
                        }                        
                    },
                    ToolTip = new ChartToolTipSettings
                    {
                        Formatter = "formatToolTip"
                    },
                    Series = new List<ChartSeriesSettings>
                    {
                        new ChartSeriesSettings
                        {
                            Name = "John",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 5, 3, 4, 7, 2 }
                            )
                        },
                        new ChartSeriesSettings
                        {
                            Name = "Jane",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 2, -2, -3, 2, 1 }
                            )
                        },
                         new ChartSeriesSettings
                        {
                            Name = "Joe",
                            Data = new List<ChartPoint>().FromCollection(
                                new int [] { 3, 4, 4, -2, 5 }
                            )
                        },
                    }
                }
                , "AreaSplineChart")
)   
        
        
        <script type="text/javascript">
        
        function formatToolTip()
        {
            return this.x +': '+ this.y +' mm';
        }
        
        
        </script>  
        
        <br /><br />
        
                
        
    </div>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCDemo.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        public ActionResult ColumnBarColumnNegativeValues()
        {
            return View();
        }
    }
}
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" />