Getting Started

Overview

Download and unzip the contents of the archive to any convenient location. The package contains the following folders:

[bin] - Contains the assembly DLLs of the product (JQChart.Web.Mvc.dll) for ASP.NET MVC3, MVC4 and MVC5. This is the assembly that you can reference directly in your MVC project.
[js] - The javascript files of jqChart and jqRangeSlider (and the needed libraries). You need to include them in your ASPX or Razor page, in order to gain the client side functionality of the chart. The files are:
- jquery.jqChart.min.js - this is the jqChart javascript code itself.
- jquery-1.11.1.min.js - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.
- excanvas.js - it is used from the versions of IE, which dosn't support canvas graphics.
- jquery.jqRangeSlider.min.js - this is the jqRangeSlider javascript code. It is used when the chart zooming is enabled.
- jquery.mousewheel.js - it is used for mouse wheel zooming.
[js/i18n] - contains the jqChart language packs.
[css] - Contains the Css files that the jqChart and the jqRangeSlider need.
[samples] - Contains some examples that use the jqChart. For full list of samples plese visit - http://www.jqchart.com/aspnetmvc/chart
[themes] - Contains the themes shipped with the products. It is used from the jqRangeSlider.

Since jqRangeSlider supports jQuery UI Themeroller, any theme compatible with jQuery UI ThemeRoller will work for jqRangeSlider as well. You can download any additional themes directly from jQuery UI's ThemeRoller site available here:

http://jqueryui.com/themeroller

or reference them from Microsoft's / Google's CDN.

    <link rel="stylesheet" type="text/css" media="screen" 
            href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />

The final result you will have in an ASPX page containing jqChart would be something similar to that (assuming you have copied the [js] to the Script folder and [css] to Content folder of your ASP.NET MVC site respectively).

<%@ Page  Language="C#"  Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.ChartData>>" %>
<%@ Import Namespace="JQChart.Web.Mvc" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script> 
    <script src="<%: Url.Content("~/Scripts/jquery.mousewheel.js") %>" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
    <div>
        <%= Html.JQChart()
                .Chart(Model)
                .ID("jqChart")
                .Width(500)
                .Height(300)
                .Title("Chart Title")
                .Legend(legend => legend.Title("Legend"))
                .Axes(axis =>
                    {
                        axis.CategoryAxis(Location.Bottom).ZoomEnabled(true);
                    }
                )
                .Series(series =>
                    {
                        series.Column()
                              .Title("Column")
                              .XValues(el => el.Label)
                              .YValues(el => el.Value1);

                        series.Spline()
                              .Title("Spline")
                                .XValues(el => el.Label)
                                .YValues(el => el.Value2);
                    }
                )
                .Render()%>
    </div>
</body>
</html>

Here is the same sample if you are using the Razor sintax:

@model IEnumerable<SamplesBrowser.Models.ChartData>
@using JQChart.Web.Mvc

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script> 
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
    <div>
          @(Html.JQChart()
                .Chart(Model)
                .ID("jqChart")
                .Width(500)
                .Height(300)
                .Title("Chart Title")
                .Legend(legend => legend.Title("Legend"))
                .Axes(axis =>
                    {
                        axis.CategoryAxis(Location.Bottom).ZoomEnabled(true);
                    }
                )
                .Series(series =>
                    {
                        series.Column()
                              .Title("Column")
                              .XValues(el => el.Label)
                              .YValues(el => el.Value1);

                        series.Spline()
                              .Title("Spline")
                              .XValues(el => el.Label)
                              .YValues(el => el.Value2);
                    }
                )
                .Render() 
          )
    </div>
</body>
</html>