|
Name |
Type |
title
|
string
|
Sets or gets the jqxChart title.
|
description
|
string
|
Sets or gets the jqxChart description.
|
source
|
object
|
Sets the chart's data source.
|
showBorderLine
|
bool
|
Determines whether to display the chart's border line.
|
borderLineColor
|
string
|
Sets or gets the chart's border line color.
|
borderLineWidth
|
double
|
Sets or gets the chart's border line width.
|
backgroundColor
|
string
|
|
backgroundImage
|
string
|
|
showLegend
|
bool
|
Determines whether to show or hide the chart series legend.
|
legendLayout
|
object
|
Sets the legend's layout. The expected object is with the following fields:
- "left" - legend's X position.
- "top" - legend's Y position.
- "width" - legend's width.
- "height" - legend's height.
- "flow" - 'horizontal' or 'vertical'.
|
padding
|
object
|
|
titlePadding
|
object
|
|
colorScheme
|
string
|
|
greyScale
|
bool
|
|
showToolTips
|
bool
|
|
toolTipShowDelay
|
double
|
|
toolTipHideDelay
|
double
|
|
toolTipMoveDuration
|
double
|
|
drawBefore
|
object
|
function for custom drawing before the title and other chart elements
|
draw
|
object
|
Determines the drawing function of jqxChart. When the property is set, you can override the jqxChart's drawing.
|
rtl
|
bool
|
Sets or gets a value indicating whether the Chart's layout is mirrored.
|
enableCrosshairs
|
bool
|
Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.
|
crosshairsColor
|
string
|
Gets or sets the color of the crosshairs lines.
|
crosshairsDashStyle
|
string
|
Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length.
|
crosshairsLineWidth
|
double
|
Gets or sets the width of the crosshairs lines.
|
columnSeriesOverlap
|
bool
|
|
enabled
|
bool
|
Gets or sets whether the chart widget in enabled or disabled state.
|
enableAnimations
|
bool
|
Determines if the animations are enabled. When you set this property it will turn on or off the animations for all series in all seriesGroups in the chart. You can override this property for individual seriesGroups and series.
|
animationDuration
|
double
|
Determines the animations duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range jqxChart will reset it to the default value of 1000.
|
enableAxisTextAnimation
|
bool
|
Determines if the animation of the axes text is enabled.
|
renderEngine
|
object
|
Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'. When the property is not set jqxChart will automatically select an optimal rendering engine depending on the browser capabilities.
|
xAxis
|
object
|
Sets the Chart's xAxis.
Example:
xAxis:
{
dataField: 'Date',
formatFunction: function (value) {
var months =
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return months[value.getMonth()];
},
type: 'date',
baseUnit: 'month',
flip: false,
tickMarks: {
visible: true,
step: 1,
color: '#888888'
},
unitInterval: 1,
gridLines: {
visible: true,
step: 3,
color: '#888888'
}
}
- visible - shows or hides the
xAxis axis.
- unitInterval - sets the interval between the units.
- dataField - points to a
data field in the data source.
- type - the type of the axis. Values can be:
- 'default' - auto detects and switches to 'basic', 'linear' or 'date'
- 'date'- when displaying dates
- 'basic' - displays all data points sequencially
- 'linear' - linear arrangement by
the value of the xAxis data field
- baseUnit - the base unit when used with 'date'
axis. Values can be 'year', 'month', 'day', 'hour', 'minute', 'second' or 'millisecond'.
- valuesOnTicks -
specifies whether the axis values will be aligned with the tick marks.
- dateFormat - optional date format for
parsing the data from the data source. Applicable when type is set to 'date'.
- axisSize - sets the size of
the xAxis.
- customDraw - boolean determining whether to draw the axis or the user will use APIs to draw it.
The default is false.
- flip - specifies whether the axis is displayed in reverse order.
- position - sets the axis position. Possible values: "top" and "bottom".
- padding - object describing the padding
of the axis
- top - top padding.
- bottom - bottom padding.
- title - object describing the title of the axis
- visible - boolean determining the visibility of the title.
- text - text of the title.
- class - CSS class of the title text.
- horizontalAlignment - horizontal alignment.
- verticalAlignment - horizontal alignment.
- tickMarks -
object describing the tick marks properties of the axis
- visible - true/false/'custom'
determining the visibility. When 'custom' is set, displays only custom values/offsets.
- step - interval steps between tick marks placements.
- dashStyle - tick marks dash
style, e.g. '2,2',
- lineWidth - line width in pixels of the tick marks.
- size - size in pixels of the tick marks. The default is 4.
- color - color of the tick marks, e.g.
'#757575'.
- custom - an array of custom values/offsets where a label/tickmark/gridline will be
displayed.
- gridLines - object describing the grid lines properties of the axis
- visible - true/false/'custom' determining the visibility. When 'custom' is set,
displays only custom values/offsets.
- step - interval steps between grid lines placements.
- dashStyle - grid lines dash style, e.g. '2,2',
- lineWidth - line width in pixels of
the grid lines.
- color - color of the tick marks, e.g. '#757575'.
- custom - an
array of custom values/offsets where a label/tickmark/gridline will be displayed.
- line - object describing the line properties of the axis
- visible - boolean determining the
visibility of the axis line.
- dashStyle - line dash style, e.g. '2,2'. The default is inherited from
the grid lines.
- lineWidth - line width. The default is inherited from the grid lines.
- color - color of axis line, e.g. '#757575'.
- labels - object
describing the labels properties of the axis
- visible - true/false/'custom' determining
the visibility of the axis labels. When 'custom' is set, displays only custom values/offsets.
- step - interval steps between label placements.
- class - CSS class of the labels.
- angle - text rotation angle.
- textRotationPoint - position to rotate the text around, e.g. 'lefttop',
'centertop' or 'rightbottom'
- autoRotate - boolean determining if auto rotation is enabled.
Applicable to polar and spider charts only.
- horizontalAligment - horizontal labels alignment
- verticalAligment - vertical labels alignment.
- offset - labels offset, e.g
{x: -5, y: 0}.
- formatSettings - object describing the format settings of the labels.
- formatFunction - callback function used to format the labels.
- custom - an array
of custom values/offsets where a label/tickmark/gridline will be displayed.
- logarithmicScale - determines whether to use logarithmic scale. The default value is 'false'.
- logarithmicScaleBase - base for logarithmic scale. The default value is 10.
- showGridLines - deprecated. (use the
visible property of gridLines)
- gridLinesInterval - deprecated. (use the step property of gridLines)
- gridLinesColor - deprecated. (use the color property of gridLines)
- gridLinesDashStyle - deprecated.
(use the dashStyle property of gridLines)
- showTickMarks - deprecated. (use the visible property of
tickMarks)
- tickMarksInterval - deprecated. (use the step property of tickMarks)
- tickMarksColor
- deprecated. (use the color property of tickMarks)
- tickMarksDashStyle - deprecated. (use the
dashStyle property of tickMarks)
- alternatingBackgroundColor - alternating background color between grid
lines
- alternatingBackgroundColor2 - second alternating background color
- alternatingBackgroundOpacity - opacity of the alternating background
- formatSettings - settings used to format
the displayed values.
- formatFunction - custom function to format the displayed values.
- toolTipFormatSettings - settings used to format xAxis values in tooltips.
- toolTipFormatFunction - custom
function to format xAxis values in tooltips.
- rangeSelector - definition of a range selector on the xAxis
|
valueAxis
|
object
|
Example: valueAxis:
{
title: { text: 'Values' },
unitInterval: 1,
minValue: 0,
maxValue: 100,
gridLines: { visible: true, step: 3, color: '#888888' }
}
valueAxis properties: - visible - shows or hides the valueAxis.
- unitInterval - sets the interval between the units.
- minValue - sets the minimum value of the valueAxis.
- maxValue - sets the maximum value of the valueAxis.
- baselineValue - sets the baseline value for the axis.
- logarithmicScale - determines whether to use logarithmic scale. The default value is 'false'.
- logarithmicScaleBase - base for logarithmic scale. The default value is 10.
- formatSettings - settings used to format the displayed values along the axis.
- formatFunction - custom function to format the displayed values along the axis.
- flip - specifies whether the values are displayed in reverse order.
- position - sets the axis position. Possible values: \\"left\\" and \\"right\\".
- padding - object describing the padding of the axis
- left - left padding.
- right - right padding.
- axisSize - sets the size of the axis.
- customDraw - boolean determining whether to draw the axis or the user will use APIs to draw it. The default is false.
- title - object describing the title of the valueAxis
- visible - boolean determining the visibility of the title.
- text - text of the title.
- class - CSS class of the title text.
- horizontalAlignment - horizontal alignment.
- verticalAlignment - horizontal alignment.
- tickMarks - object describing the tick marks properties of the valueAxis
- visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
- step - interval steps between tick mark placements.
- dashStyle - tick marks dash style, e.g. '2,2',
- lineWidth - line width in pixels of the tick marks.
- size - size in pixels of the tick marks. The default is 4.
- color - color of the tick marks, e.g. '#757575'.
- custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
- gridLines - object describing the grid lines properties of the valueAxis
- visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
- step - interval steps between grid line placements.
- dashStyle - grid lines dash style, e.g. '2,2',
- lineWidth - line width in pixels of the grid lines.
- color - color of the tick marks, e.g. '#757575'.
- custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
- line - object describing the line properties of the axis
- visible - boolean determining the visibility of the axis line.
- dashStyle - line dash style, e.g. '2,2'. The default is inherited from the grid lines.
- lineWidth - line width. The default is inherited from the grid lines.
- color - color of axis line, e.g. '#757575'.
- labels - object describing the labels properties of the axis
- visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
- step - interval steps between label placements.
- class - CSS class of the labels.
- angle - text rotation angle.
- textRotationPoint - position to rotate the text around, e.g. 'lefttop', 'centertop' or 'rightbottom'
- autoRotate - boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
- horizontalAligment - horizontal labels alignment.
- verticalAligment - vertical labels alignment.
- offset - labels offset, e.g {x: -5, y: 0}.
- formatSettings - object describing the format settings of the labels.
- formatFunction - callback function used to format the labels.
- custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
- showGridLines - deprecated. (use the visible property of gridLines)
- gridLinesInterval - deprecated. (use the step property of gridLines)
- gridLinesColor - deprecated. (use the color property of gridLines)
- gridLinesDashStyle - deprecated. (use the dashStyle property of gridLines)
- showTickMarks - deprecated. (use the visible property of tickMarks)
- tickMarksInterval - deprecated. (use the step property of tickMarks)
- tickMarksColor - deprecated. (use the color property of tickMarks)
- tickMarksDashStyle - deprecated. (use the dashStyle property of tickMarks)
- alternatingBackgroundColor - alternating background color between grid lines
- alternatingBackgroundColor2 - second alternating background color
- alternatingBackgroundOpacity - opacity of the alternating background
- bands - optional color bands dislayed in the chart's plot area
- minValue - start value of the color band.
- maxValue - end value of the color band.
- color - color used to fill the area between the minValue and the maxValue.
- opacity - fraction indicating the fill opacity.
|
categoryAxis
|
object
|
|
seriesGroups
|
object
|
The seriesGroups property is used to describe all series displayed on the chart. jqxChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns.
seriesGroups:
[
{
type: 'stackedarea100',
orientation: 'vertical',
series: [
{ dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
{ dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
{ dataField: 'Referral', displayText: 'Referral Traffic' }
],
bands:
[
{ minValue: 2000, maxValue: 2500, color: '#FF0000', opacity: 0.15},
{ minValue: 1000, maxValue: 1100, color: '#FF0000', opacity: 0.20}
]
}
]
The seriesGroups is an array of objects where each object represents one group. A group may have the following properties:
|
|
onToggle
|
Event
|
The event is raised when a serie is toggled by a user click in the chart's legend or through an API call.
|
onClick
|
Event
|
The event is raised when the user clicks on series element.
|
onRefreshBegin
|
Event
|
The event is raised when the chart begins rendering.
|
onRefreshEnd
|
Event
|
The event is raised when the chart finishes rendering.
|
onRangeSelectionChanging
|
Event
|
The event is raised after the chart's range selector position changes and after the chart ends rendering.
|
onRangeSelectionChanged
|
Event
|
The event is raised when the chart's range selector position changes and before the chart starts rendering.
|
|
Name |
Arguments |
Return Type |
getInstance
|
()
|
object
|
|
refresh
|
()
|
void
|
|
update
|
()
|
void
|
|
destroy
|
()
|
void
|
|
addColorScheme
|
(string schemeName, string[] colors)
|
void
|
|
removeColorScheme
|
(string schemeName)
|
void
|
|
getItemsCount
|
(double groupIndex, double serieIndex)
|
double
|
|
getItemCoord
|
(double groupIndex, double serieIndex, double itemIndex)
|
object
|
|
getXAxisRect
|
(double groupIndex)
|
object
|
|
getXAxisLabels
|
(double groupIndex)
|
object[]
|
|
getValueAxisRect
|
(double groupIndex)
|
object
|
|
getValueAxisLabels
|
(double groupIndex)
|
object[]
|
|
getColorScheme
|
(string colorScheme)
|
string[]
|
|
hideSerie
|
(double groupIndex, double serieIndex, double itemIndex)
|
void
|
Hides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie. The itemIndex parameter is optional and applicable to pie and donut series only.
|
showSerie
|
(double groupIndex, double serieIndex, double itemIndex)
|
void
|
Shows a chart serie. The result of calling this function is same as the user checking the legend box of a chart serie. The itemIndex parameter is optional and applicable to pie and donut series only.
|
hideToolTip
|
(double hideDelay)
|
void
|
|
showToolTip
|
(double groupIndex, double serieIndex, double itemIndex, double showDelay, double hideDelay)
|
void
|
|
saveAsJPEG
|
(string fileName, string exportServerUrl)
|
void
|
|
saveAsPNG
|
(string fileName, string exportServerUrl)
|
void
|
|
saveAsPDF
|
(string fileName, string exportServerUrl)
|
void
|
|
getXAxisValue
|
(double offset, double groupIndex)
|
object
|
|
getValueAxisValue
|
(double offset, double groupIndex)
|
object
|
|