Analog Clock with jqGauges - HTML5 jQuery Gauges


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

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



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

 

author: jqChart | Posted On Tuesday, January 15, 2013 9:59 AM | Comments (0)

Getting Started with jqChart for ASP.NET Web Forms


 

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

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.

jqChart

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>
 

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

author: jqChart | Posted On Tuesday, October 9, 2012 7:55 AM | Comments (0)

Creating zoomable charts with jqChart - HTML5 jQuery Chart Plugin


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

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.




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

 

author: jqChart | Posted On Wednesday, September 5, 2012 10:40 AM | Comments (0)

Getting Started with jqChart for ASP.NET MVC


 

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

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 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" />

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<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:

jqChart
 

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

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

Real-Time Charts with jqChart - HTML5 jQuery Chart Plugin


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

           

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

           

Visit our live Live Data Chart sample.




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

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

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


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

 

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.



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

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

Creating high performance charts with jqChart - HTML5 jQuery Chart Plugin


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

 

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.        




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

 

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

Getting Started with jqChart - HTML5 jQuery Chart Plugin


 

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

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.
  • 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:
 

 

jqChart

Summary

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

 

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

author: jqChart | Posted On Saturday, June 11, 2011 11:11 AM | Comments (0)