Official Site | Samples | Download | Documentation | Forum | Twitter

Introduction

jqChart draws charts and graphs using HTML5 Canvas. There is no image generation. No need for 3rd party plugins like Flash or Silverlight.

Some of the key features are:

  • High performance rendering.
  • Support for unlimited number of data series and data points.
  • Support for unlimited number of chart axes.
  • True DateTime Axis.
  • Logarithmic and Reversed axis scale.
  • Large set of chart types - Column, Stacked Column, Bar, Stacked Bar, Line, Spline, Area, Spline Area, Pie, Scatter, Bubble.
  • Financial Charts - Stock Chart and Candlestick Chart
  • The different chart types can be easily combined.

System Requirements

Browser Support

jqChart supports all major browsers:

  • Internet Explorer - 6+
  • Firefox
  • Google Chrome
  • Opera
  • Safari

jQuery version support

jQuery 1.4.4+ is supported. We recommend using the latest official stable version of the jQuery library.

Visual Studio Support

jqChart for ASP.NET does not require using Visual Studio. You can use your favourite code editor. Still, the product has been tested with several versions of Visual Studio .NET and you can find the list of supported versions below: Supported versions
  • Visual Studio 2008
  • Visual Studio 2010

ASP.NET MVC Framework support

Supported MVC version - ASP.NET MVC 2.0 and 3.0

Installation

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 MVC2 and MVC3 . This is the assembly that you can reference directly in your MVC project.
  • [js] - The javascript files of jqChart (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 first file is "jquery-1.4.4.min.js" - this is the official jQuery library on which jqChart is built upon. The second file you need is the "excanvas.js" javascript file. It is used from the versions of IE, which dosn't support canvas graphics. The last one is the jqChart javascript code itself, located in "jquery.jqChart.min.js"
  • [samples] - Contains some examples that use the jqChart. For full list of samples plese visit - samples

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 of your ASP.NET MVC site respectively).

 

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqChart.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")
                .Series(series =>
                    {
                        series.Column().Title("Column")
                                       .XValues(el => el.Label)
                                       .YValues(el => el.Value1);
                    }
                )
                .Render()%>
    </div>
</body>
</html>
Here is the same sample if you are using the Razor sintax: 

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqChart.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")
                .Series(series =>
                    {
                        series.Column().Title("Column")
                                       .XValues(el => el.Label)
                                       .YValues(el => el.Value1);
                    }
                )
                .Render() 
          )
    </div>
</body>
</html>

Which will produce a chart like:

jqChart
 

Official Site | Samples | Download | Documentation | Forum | Twitter