JqxChart: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 33: Line 33:


<pre>
<pre>
Dim data, source, dataAdapter
Function Button1_onclick()
data = generatedata(50)     'generatedata is a function which returns grid data
  'Render the chart.
source = {localdata: data, datatype: "array"}
  $("#Chart2").jqxChart(Chart2_settings);
dataAdapter = new $.jqx.dataAdapter(source)
End Function
             
 
Grid1_settings.source = dataAdapter
JavaScript
Grid1_settings.columns = [ _
var  sampleData = [
    { text: "First Name", dataField: "firstname", width: 100 }, _
      { Day:'Monday', Keith:30, Erica:15, George: 25},
    { text: "Last Name", dataField: "lastname", width: 100 }, _
      { Day:'Tuesday', Keith:25, Erica:25, George: 30},
    { text: "Product", dataField: "productname", width: 180 }, _
      { Day:'Wednesday', Keith:30, Erica:20, George: 25},
    { text: "Quantity", dataField: "quantity", width: 80, cellsalign: "right" }, _
      { Day:'Thursday', Keith:35, Erica:25, George: 45},
    { text: "Unit Price", dataField: "price", width: 90, cellsalign: "right", cellsformat: "c2" }, _
      { Day:'Friday', Keith:20, Erica:20, George: 25},
    { text: "Total", dataField: "total", cellsalign: "right", minwidth: 100, cellsformat: "c2" } _
      { Day:'Saturday', Keith:30, Erica:20, George: 30},
  ]
      { Day:'Sunday', Keith:60, Erica:45, George: 90}
  ];
Chart2_settings.source = sampleData;
Chart2_settings.categoryAxis = {
            dataField: 'Day',
            showGridLines: false};
Chart2_settings.seriesGroups =
        [
            {
                type: 'column',
                columnsGapPercent: 30,
                seriesGapPercent: 0,
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    description: 'Time in minutes'
                },
                series: [
                        { dataField: 'Keith', displayText: 'Keith'},
                        { dataField: 'Erica', displayText: 'Erica'},
                        { dataField: 'George', displayText: 'George'}
                    ]
            }
        ]
 
End JavaScript
</pre>
</pre>



Revision as of 21:33, 4 January 2013

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/jqxcalendar/jquery-calendar-getting-started.htm

Example

Function Button1_onclick()
  'Render the chart.
  $("#Chart2").jqxChart(Chart2_settings);
End Function

JavaScript
var  sampleData = [
      { Day:'Monday', Keith:30, Erica:15, George: 25},
      { Day:'Tuesday', Keith:25, Erica:25, George: 30},
      { Day:'Wednesday', Keith:30, Erica:20, George: 25},
      { Day:'Thursday', Keith:35, Erica:25, George: 45},
      { Day:'Friday', Keith:20, Erica:20, George: 25},
      { Day:'Saturday', Keith:30, Erica:20, George: 30},
      { Day:'Sunday', Keith:60, Erica:45, George: 90}
  ];
				
Chart2_settings.source = sampleData;
Chart2_settings.categoryAxis = {
            dataField: 'Day',
            showGridLines: false};
Chart2_settings.seriesGroups =
        [
            {
                type: 'column',
                columnsGapPercent: 30,
                seriesGapPercent: 0,
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    description: 'Time in minutes'
                },
                series: [
                        { dataField: 'Keith', displayText: 'Keith'},
                        { dataField: 'Erica', displayText: 'Erica'},
                        { dataField: 'George', displayText: 'George'}
                    ]
            }
        ]

End JavaScript

Output

See above.