JqxChart

Description

jqxChart is an easy to use chart widget based on the popular jQuery library.

jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently jqxChart supports the following series types:

• column - simple column series
• stackedcolumn - stacked column series
• stackedcolumn100 - percentage stacked columns
• line - simple streight lines connecting the value points
• stackedline - stacked lines
• stackedline100 - percentage stacked lines
• spline - smooth lines connecting the value points
• stackedspline - smooth stacked lines
• stackedspline100 - percentage stacked smooth lines
• area - area connecting the value points with streight lines
• stackedarea- stacked area with streight lines between the points
• stackedline100 - percentage stacked area
• areaspline - smooth area connecting the value points
• stackedareaspline - smooth stacked areas
• stackedareaspline100 - percentage stacked smooth area
• pie - circular chart divided into sectors, illustrating proportion
• scatter - data is displayed as a collection of points
• bubble - data is displayed as a collection of bubbles

Properties and Methods

See the complete documentation at jqWidget's site: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-getting-started.htm

Example

Dim data, source, dataAdapter
data = generatedata(50)     'generatedata is a function which returns grid data
source = {localdata: data, datatype: "array"}
dataAdapter = new $.jqx.dataAdapter(source)
              
Grid1_settings.source = dataAdapter
Grid1_settings.columns = [ _
    { text: "First Name", dataField: "firstname", width: 100 }, _
    { text: "Last Name", dataField: "lastname", width: 100 }, _
    { text: "Product", dataField: "productname", width: 180 }, _
    { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
    { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
  ]

Output

See above.