Getting Started with jqChart for ASP.NET MVC

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:

Share This Post:
Short Url: http://wblo.gs/c9P

author: jqChart | Posted On Wednesday, August 24, 2011 11:24 AM | Feedback (0)

Real-Time Charts with jqChart - HTML5 jQuery Chart Plugin

With jqChart jQuery Plugin is easy to create real-time web charts using only HTML and JavaScript.

Visit our live Live Data Chart sample.

Share This Post:
Short Url: http://wblo.gs/c4R

author: jqChart | Posted On Tuesday, July 26, 2011 1:37 PM | Feedback (0)

Stock and Candlestick Financial Charts with jqChart - HTML5 jQuery Chart Plugin

In jqChart - HTML5 jQuery Chart Plugin version 1.5.1.0 we added Financial chart types - Stock Chart and Candlestick Chart.

Visit our live Stock Chart sample.

Visit our live Candlestick Chart sample.

Share This Post:
Short Url: http://wblo.gs/c0L

author: jqChart | Posted On Tuesday, July 05, 2011 3:14 PM | Feedback (0)

Creating high performance charts with jqChart - HTML5 jQuery Chart Plugin

The render speed of the jqChart- HTML5 jQuery Chart Plugin is optimized for handling a large set of data.

Look at our live performance sample.

Share This Post:
Short Url: http://wblo.gs/bya

author: jqChart | Posted On Sunday, June 26, 2011 3:09 PM | Feedback (0)

Getting Started with jqChart - HTML5 jQuery Chart Plugin

Introduction

jqChart is a jQuery plugin to draw charts and graphs using HTML5 canvas. jqChart produces Excel like charts with many features.

Some of the key features are:

High performance rendering.
Real-time chart manipulation.
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.
Sensible defaults for ease of use.

System Requirements

jQuery JavaScript framework is required. We recommend using the latest official stable version of the jQuery library.

Browser Support

jqChart supports all major browsers:

Internet Explorer - 6+
Firefox
Google Chrome
Opera
Safari

Installation

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

[js] - The javascript files of jqChart (and the needed libraries). You need to include them in your HTML 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 don'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 - jqChart Samples

Include the Files

jqChart requires jQuery. jQuery 1.4.4 is included in the distribution. To use jqChart include jquery, the jqChart jQuery plugin and optionally the excanvas script for IE support in your web page:

<script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" 
    src="../js/excanvas.js"></script><![endif]-->

IMPORTANT: Use the 'excanvas.js' included in our package. It has some modifications and it is a little different from the standard one.

Add a jqChart container

Add a container (target) to your web page where you want your chart to show up. Be sure to give your target a width and a height:

<div id="jqChart" style="width: 500px; height: 300px;"></div>

Create a chart

Then, create the actual chart by calling the jqChart plugin with the id of your target and some data:

$('#jqChart').jqChart({
    title: { text: 'Chart Title' },
    series: [
                {
                    type: 'column',
                    title: 'Column',
                    data: [62, 70, 68, 58, 52, 60, 48]
                }
            ]
});

Which will produce a chart like:

Jump Menu

So what are all these buttons for?

Personalize

Text Size

Layout

Navigation Position

jqChart - Pure HTML5 Chart for jQuery and ASP.NET MVC

High performant HTML5 Canvas Charts and Graphs for jQuery and ASP.NET MVC. Cross-browser support. Bar, Column, Line, Spline, Area, Pie, Scatter, Bubble, Financial (Stock and Candlestick) and Real-Time charts.

Getting Started with jqChart for ASP.NET MVC

Introduction

System Requirements

Browser Support

jQuery version support

Visual Studio Support

ASP.NET MVC Framework support

Installation

Real-Time Charts with jqChart - HTML5 jQuery Chart Plugin

Stock and Candlestick Financial Charts with jqChart - HTML5 jQuery Chart Plugin

Creating high performance charts with jqChart - HTML5 jQuery Chart Plugin

Getting Started with jqChart - HTML5 jQuery Chart Plugin

Introduction

System Requirements

Browser Support

Installation

Include the Files

Add a jqChart container

Create a chart

Summary

Me

Twitter

Archives

Syndicate