jqChart - Pure HTML5 Charts for jQuery and ASP.NET Web Forms and MVC

Analog Clock with jqGauges - HTML5 jQuery Gauges

jqChart — Tue, 15 Jan 2013 14:59:22 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2013/01/15/analog-clock-with-jqgauges.aspx

Here is an example of creating analog clock with jqGauges - Analog Clock Example.

Getting Started with jqChart for ASP.NET Web Forms

jqChart — Tue, 09 Oct 2012 11:55:47 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2012/10/09/getting-started-with-jqchart-for-asp.net-web-forms.aspx

Introduction

jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers (IE 6+, Firefox, Chrome, Opera, Safari) and devices, including iOS and Android mobile devices.

Some of the key features are:

High performance rendering.
Animaitons.
Scrolling/Zoooming.
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 - Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar.
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 JavaScript framework is required. 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:

Visual Studio 2008
Visual Studio 2010
Visual Studio 2012

ASP.NET Web Forms support

Supported version - ASP.NET Web Forms 3.5, 4.0 and 4.5

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.dll) for WebForms 3.5, 4.0 and 4.5. This is the assembly that you can reference directly in your web project (or better yet, add it to your ToolBox and then drag & drop it from there).
[js] - The javascript files of jqChart and jqRangeSlider (and the needed libraries). You need to include them in your ASPX page, in order to gain the client side functionality of the chart.

The first file is "jquery-1.5.1.min.js" - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.

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 third is the jqChart javascript code itself, located in "jquery.jqChart.min.js".

The last one is the jqRangeSlider javascript, located in "jquery.jqRangeSlider.min.js". It is used when the chart zooming is enabled.
[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 - jqChart for ASP.NET Samples.
[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 site respectively).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="samples_cs.Default" %>

<%@ Register Assembly="JQChart.Web" Namespace="JQChart.Web.UI.WebControls" TagPrefix="jqChart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jqChart ASP.NET Sample</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" href="~/Content/themes/smoothness/jquery-ui-1.8.21.css" />
    <script src="<% = ResolveUrl("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
    <script src="<% = ResolveUrl("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script>
    <script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<% = ResolveUrl("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetData"
        TypeName="SamplesBrowser.Models.ChartData"></asp:ObjectDataSource>
    <jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
        <Title Text="Chart Title"></Title>
        <Animation Enabled="True" Duration="00:00:01" />
        <Axes>
            <jqChart:CategoryAxis Location="Bottom" ZoomEnabled="true">
            </jqChart:CategoryAxis>
        </Axes>
        <Series>
            <jqChart:ColumnSeries XValuesField="Label" YValuesField="Value1" Title="Column">
            </jqChart:ColumnSeries>
            <jqChart:LineSeries XValuesField="Label" YValuesField="Value2" Title="Line">
            </jqChart:LineSeries>
        </Series>
    </jqChart:Chart>
    </form>
</body>
</html>

Creating zoomable charts with jqChart - HTML5 jQuery Chart Plugin

jqChart — Wed, 05 Sep 2012 14:40:06 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2012/09/05/creating-zoomable-charts-with-jqchart---html5-jquery-chart-plugin.aspx

With jqChart you can easily create a zoomable chart. You just need to set "zoomEnabled" option of the axis to true.

For more info you can take a look at our live Zoomable Chart Example.

Getting Started with jqChart for ASP.NET MVC

jqChart — Wed, 24 Aug 2011 15:24:28 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2011/08/24/getting-started-with-jqchart-for-asp.net-mvc.aspx

Introduction

Some of the key features are:

High performance rendering.
Animaitons.
Scrolling/Zoooming.
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 - Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar.
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 JavaScript framework is required. We recommend using the latest official stable version of the jQuery library.

Visual Studio Support

Visual Studio 2008
Visual Studio 2010
Visual Studio 2012

ASP.NET MVC Framework support

Supported MVC version - ASP.NET MVC 2.0, 3.0 and 4.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, MVC3 and MVC4. 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 first file is "jquery-1.5.1.min.js" - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.

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 third is the jqChart javascript code itself, located in "jquery.jqChart.min.js".

The last one is the jqRangeSlider javascript, located in "jquery.jqRangeSlider.min.js". It is used when the chart zooming is enabled.
[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 - jqChart for ASP.NET MVC Samples.
[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" />

<%@ Page  Language="C#"  Inherits="System.Web.Mvc.ViewPage<IEnumerable<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.5.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")
                .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>
<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.5.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")
                .Series(series =>
                    {
                        series.Column().Title("Column")
                                       .XValues(el => el.Label)
                                       .YValues(el => el.Value1);
                    }
                )
                .Render() 
          )
    </div>
</body>
</html>

Which will produce a chart like:

Real-Time Charts with jqChart - HTML5 jQuery Chart Plugin

jqChart — Tue, 26 Jul 2011 17:37:26 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2011/07/26/real-time-charts-with-jqchart---html5-jquery-chart-plugin.aspx

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

Visit our live Live Data Chart sample.

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

jqChart — Tue, 05 Jul 2011 19:14:02 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2011/07/05/stock-and-candlestick-financial-charts-with-jqchart---html5-jquery.aspx

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.

Creating high performance charts with jqChart - HTML5 jQuery Chart Plugin

jqChart — Sun, 26 Jun 2011 19:09:35 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2011/06/26/creating-high-performance-charts-with-jqchart---html5-jquery-chart.aspx

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.

Getting Started with jqChart - HTML5 jQuery Chart Plugin

jqChart — Sat, 11 Jun 2011 15:11:55 GMT

Originally posted on: http://geekswithblogs.net/jqchart/archive/2011/06/11/html5_jquery_chart_plugin_getting_started.aspx

Introduction

Some of the key features are:

High performance rendering.
Animaitons.
Scrolling/Zoooming.
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 - Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar.
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 jqRangeSlider (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.5.1.min.js" - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.

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 third is the jqChart javascript code itself, located in "jquery.jqChart.min.js".

The last one is the jqRangeSlider javascript, located in "jquery.jqRangeSlider.min.js". It is used when the chart zooming is enabled.
[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 - jqChart Samples
[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" />

Include the Files

jqChart requires jQuery. jQuery 1.5.1 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:

<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="../css/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="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqRangeSlider.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:

Summary

That’s all. We created a basic chart using only HTML and JavaScript.