Introduction

jqxChart is a lightweight and powerful chart widget written 100% in javascript. It offers many advanced features and supports three different rendering technologies - SVG, HTML5 Canvas & VML. You can use jqxChart to add interactive charts to your website, build custom dashboards, or use it in your mobile applications. jqxChart offers excellent cross-browser compatibility and works well with both desktop and mobile browsers. jqxChart is being used by thousands of individual developers, small companies as well as a significant percentage of the Furtune 100 companies.

Basic concepts

Before you start using jqxChart you need to learn how it works and some basic concepts. Depending on which features you use, your chart may contain the following elements:

• horizontal axis (xAxis)
• vertical axis (valueAxis)
• title & description
• one or more series groups and series
• grid lines & tick marks
• legend
• border line
• background
• tooltips
• annotations
• range selector

Some simple charts may not have all of these elements, while complicated charts could be highly customized and even include additional elements added through custom drawing.

Take a look at the following picture to learn more about the different elements:

Getting Started

Include all required javascript and css files

jqxChart requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxdata.js
• jqxdraw.js
• jqxchart.core.js
• jqxchart.rangeselector.js
• jqxchart.annotations.js
• jqxchart.waterfall.js

Define an element which will serve as a container for the chart and initialize the chart.

<script src="~/jqwidgets/jqxchart.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.StockPrice>
@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "ASP .NET MVC Zooming Chart Example";
    Padding padding = new Padding() { Left = 5, Top = 5, Right = 30, Bottom = 5 };
    Padding titlePadding = new Padding() { Left = 30, Top = 5, Right = 0, Bottom = 10 };
    Rectangle legendPosition = new Rectangle(){ Left = 520, Top = 140, Width = 100, Height = 100 };
    FormatSettings formatSettings = new FormatSettings() { Sufix = "%", DecimalPlaces = 1 };
    DateTime minDate = new DateTime(2012, 1, 1);
    DateTime maxDate = new DateTime(2013, 12, 31);
}
<script>
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    function labelsCustomFormatFn (value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function rangeSelectorLabelsCustomFormatFn(value) {
        return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
    };
    function toolTipCustomFormatFn(value, itemIndex, serie, group, categoryValue, categoryAxis) {
        var dataItem = dataAdapter.records[itemIndex];
        return '<DIV style="text-align:left"><b>Date: ' +
                category-value.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                '</b><br />Open price: $' + dataItem.Open +
                '</b><br />Close price: $' + dataItem.Close +
                '</b><br />Daily volume: ' + dataItem.Volume +
                 '</DIV>';
    };
</script>
<jqx-chart style="width: 850px; height: 500px;" title="My Title" source="Model">
     <jqx-chart-x-axis type="AxisType.Date" base-unit="BaseUnit.Day" datafield="Date" min-value="minDate" max-value="maxDate">
       <jqx-chart-range-selector size="80" min-value="minDate" datafield="Close" base-unit="BaseUnit.Month" serieType="SerieType.Area" background-color="white">
           <jqx-chart-labels format-function="rangeSelectorLabelsCustomFormatFn()"></jqx-chart-labels>
       </jqx-chart-range-selector>
        <jqx-chart-labels format-Function="labelsCustomFormatFn()"></jqx-chart-labels>
     </jqx-chart-x-axis>
    <jqx-chart-value-axis text="Price per share [USD]">
        <jqx-chart-labels horizontal-aligment="HorizontalAlignment.Right"></jqx-chart-labels>
    </jqx-chart-value-axis>
     <jqx-chart-series-groups>   
         <jqx-chart-serie-group toolTip-format-function=toolTipCustomFormatFn() type=SerieType.Line>
            <jqx-chart-series>
                <jqx-chart-serie datafield='Close' display-text='Close Price' line-width="1" line-width-selected="1"></jqx-chart-serie>
            </jqx-chart-series>
         </jqx-chart-serie-group>
    </jqx-chart-series-groups>
</jqx-chart>

Basic Sample