Sets the title of the chart.

Example:

    // select the chart element and change the title to 'New Title'
    $('#jqxChart').jqxChart({title: 'New Title'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Sets the description text of the chart.

Example:

    // select the chart element and change the description to 'New description'
    $('#jqxChart').jqxChart({description: 'New description'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Determines whether to display the chart's border line

Example:

    // hide the border line
    $('#jqxChart').jqxChart({showBorderLine: 'false'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Sets the chart's border color.

Example:

    // select the chart element and change the default border color.
    $('#jqxChart').jqxChart({borderLineColor: 'Blue'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Sets the chart's border line width

Example:

    $('#jqxChart').jqxChart({borderLineWidth: 1});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Sets the chart's background color.

Example:

    // select the chart element and change the default background color.
    $('#jqxChart').jqxChart({backgroundColor: 'Gray'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Sets the chart's background image.

Example:

    // select the chart element and set background image.
    $('#jqxChart').jqxChart({backgroundImage: '../images/chart_background.jpg'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Determines whether to show or hide the chart series legend.

Example:

    // select the chart element and hides the legend
    $('#jqxChart').jqxChart({showLegend: false});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

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'.

Example:

Code example

$('#jqxChart').jqxChart({legendLayout : { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' }}); 

Sets the left,top, right & bottom padding of the Chart.

Example:

    $('#jqxChart').jqxChart({padding: { left: 10, top: 10, right: 10, bottom: 10 }});
    $('#jqxChart').jqxChart('refresh');

Sets the padding of the chart's title.

Example:

    $('#jqxChart').jqxChart({titlePadding: { left: 10, top: 10, right: 10, bottom: 10 }});
    $('#jqxChart').jqxChart('refresh');

Sets the chart's color pallete. jqxChart suppports 11 color schemes from 'scheme01' to 'scheme11'.

Example:

    $('#jqxChart').jqxChart({colorScheme: 'scheme06'});
    $('#jqxChart').jqxChart('refresh');

Determines whether to display the chart using grey scale colors.

Example:

    
    $('#jqxChart').jqxChart({greyScale: true});

Enables or disables the chart tooltips.

Example:

    $('#jqxChart').jqxChart({showToolTips: false});
    $('#jqxChart').jqxChart('refresh');

Determines the tooltips show delay in milliseconds. Values may range from 0 to 10000 [ms]

Example:

    $('#jqxChart').jqxChart({toolTipShowDelay: 2000});
    $('#jqxChart').jqxChart('refresh');

Determines the tooltips hide delay in milliseconds.

Example:

    $('#jqxChart').jqxChart({toolTipHideDelay: 5000});
    $('#jqxChart').jqxChart('refresh');

User defined tooltips text formatting callback function.

Sets or gets a value indicating whether the Chart's layout is mirrored.

Example:

Code example

Set the rtl property.

$('#jqxChart').jqxChart({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxChart').jqxChart('rtl'); 

Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.

Example:

    $('#jqxChart').jqxChart(enableCrosshairs', false);

Gets or sets the color of the crosshairs lines.

Example:

    $('#jqxChart').jqxChart('crosshairsColor', '#AA55AA'});

Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length.

Example:

    $('#jqxChart').jqxChart('crosshairsDashStyle', '1,1'});

Gets or sets the width of the crosshairs lines.

Example:

    $('#jqxChart').jqxChart('crosshairsLineWidth', 2.0});

Gets or sets whether the chart widget in enabled or disabled state.

Example:

    $('#jqxChart').jqxChart({enabled: false});
    $('#jqxChart').jqxChart('refresh');

Sets the chart's data source.

Example:

    var source =
    {
        datatype: "tab",
        datafields: [
            { name: 'Date'},
            { name: 'Referral'},
            { name: 'SearchPaid'},
            { name: 'SearchNonPaid'}
        ],
        url: '../sampledata/website_analytics.txt'
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
        {
            async: false,
            autoBind: true,
        });

    // prepare jqxChart settings
    var settings = {
        title: "Visual Web Traffic Analysis",
        description: "Unique site visitors in 2011",
        source: dataAdapter,
        categoryAxis:
        {
            dataField: 'Date',
            unitInterval: Math.round(dataAdapter.records.length / 12),
            showGridLines: false
        },
        colorScheme: 'scheme06',
        seriesGroups:
        [
            {
                type: 'stackedarea100',
                valueAxis:
                {
                    unitInterval: 500,
                    description: 'Daily visitors'
                },
                series: [
                        { dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
                        { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
                        { dataField: 'Referral', displayText: 'Referral Traffic' }
                    ]
            }
        ]
    };

    // setup the chart
    $('#jqxChart').jqxChart(settings);

Sets the Chart's categoryAxis.

Example:

categoryAxis:
{
    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,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: '#888888',
    unitInterval: 2,
    showGridLines: true,
    gridLinesInterval: 3,
    gridLinesColor: '#888888'
}                        

• dataField - points to a data field in the data source.
• type - the type of the axis. Values can be 'default' or 'date' when displaying dates.
• unitInterval - sets the interval between the units.
• 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.
• showTickMarks - when this property is true, the ticks are displayed in the categoryAxis.
• tickMarksInterval - sets the interval between each tick mark.
• tickMarksColor - sets the color of the tick marks.
• tickMarksDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
• showGridLines - displays the grid lines.
• gridLinesInterval - sets the interval between the grid lines.
• gridLinesColor - set the grid lines color.
• gridLinesDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
• axisSize - sets the size of the categoryAxis.
• formatSettings - settings used to format the displayed values.
• formatFunction - custom function to format the displayed values.
• toolTipFormatSettings - settings used to format category axis values in tooltips.
• toolTipFormatFunction - custom function to format category axis values in tooltips.
• textRotationAngle - rotation of the text along the axis (0-360) degrees.
• textRotationPoint - position to rotate the text around, e.g. 'left', 'center' or 'right'
• textOffset - horizontal and vertical text position offset, e.g. {x: 5, y: 2}
• horizontalTextAlignment - horizontal alignment for the values along the axis.
• verticalTextAlignment - vertical alignment for the values along the axis.
• horizontalDescriptionAlignment - horizontal alignment for the axis description text
• verticalDescriptionAlignment - vertical alignment for the axis description text.

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',
            valueAxis:
            {
                unitInterval: 500,
                flip: false,
                minValue: 0,
                maxValue: 3000,
                displayValueAxis: true,
                description: 'Daily visitors',
                axisSize: 'auto',
                tickMarksColor: '#888888'
            },
            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:

• type - sets the chart type. 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
  • rangecolumn - floating column between two values
  • 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
  • stepline - step line
  • stackedstepline - stacked step line
  • stackedstepline100 - percentage stacked step line
  • area - area connecting the value points with streight lines
  • stackedarea- stacked area with streight lines between the points
  • rangearea - floating area between pairs of value points
  • stackedline100 - percentage stacked area
  • splinearea - smooth area connecting the value points
  • splinerangearea - smooth floating area between pairs of value points
  • stackedsplineara - smooth stacked area
  • stackedsplinearea100 - percentage stacked smooth area
  • steplinearea - step area connecting the value points
  • stackedsteplineara - step stacked area
  • stackedsteplinearea100 - percentage stacked step area
  • pie - circular chart divided into sectors, illustrating proportion
  • donut - chart divided into circular sectors with different inner and outer radius
  • scatter - data is displayed as a collection of points
  • bubble - data is displayed as a collection of bubbles
• orientation - specifies the orientation of the series group.
  • vertical - the valueAxis is displayed along the y-Axis and the categoryAxis along the x-Axis.
  • horizontal - the valueAxis is displayed along the x-Axis and the categoryAxis along the y-Axis.
• polar - a boolean value. When polar is set to 'true' the chart will render in polar coordinates.
• radius - the radius of the polar coordinate system. Not used when polar is set to false.
• startAngle - the starting angle (in degrees) of the polar coordinate system. Not used when polar is set to false.
• offsetX - horizontal position of the center of the polar coordinate system. Not used when polar is set to false.
• offsetY - vertical position of the center of the polar coordinate system. Not used when polar is set to false.
• series - an array of Chart series.

  Each serie has the following properties:

  • dataField - name of the field in the data source.
  • displayText - name to display for this serie.
  • colorScheme - color palette to use when rendering the serie.
  • color - (Deprecated) fill color for the serie.
  • lineColor - Line color for the serie.
  • lineColorSelected - Line color for the serie when selected.
  • fillColor - Fill color for the serie.
  • fillColorSelected - Fill color for the serie when selected.
  • lineColorSymbol - Line color for the marker symbols in serie.
  • lineColorSymbolSelected - Line color for the marker symbols in the serie when selected.
  • fillColorSymbol - Fill color for the marker symbols in the serie.
  • fillColorSymbolSelected - Fill color for the the marker symbols in serie when selected.
  • greyScale - boolean that determines whether to display the serie in grey scale.
  • formatSettings - data formatting settings for the values in the serie.
  • formatFunction - data formatting function for the values in the serie.
  • toolTipFormatSettings - tooltip data formatting settings for the values in the serie.
  • toolTipFormatFunction - tooltip data formatting function for the values in the serie.
  • toolTipLineColor - determines the tooltip's border lines color.
  • toolTipBackground - determines the tooltip's background.
  • toolTipClass - determines the tooltip's CSS class name.
  • useGradient - determines whether to use color gradients.
  • opacity - determines the opacity of the items in this serie.
  • lineWidth - determines the line tickness of the items in this serie.
  • lineDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
  • symbolType - determines the symbol type displayed for the data points in the serie. This parameter is applicable to line and area series only. Acceptable values are: 'none', 'circle', 'square', 'diamond', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right'
  • showLabels - determines whether to display the data point label.
  • labelsOffset - determines the offset from the data point of the data point label. The property should be specified in the following format: {x: 0, y: 0}.
  • labelsAngle - determines the rotation angle of the data point labels.
  • radius - determines the pie chart's radius.
  • labelRadius - determines the radius of the displayed labels in a pie/donut chart.
  • innerRadius - determines the radius of the inner circle in a donut chart.
  • initialAngle - determines the initial rendering angle of the series in a pie/donut chart.
  • centerOffset - determines the offset from the center point in a pie/donut chart.
• valueAxis - sets the value axis options.
  • unitInterval - sets the interval between the units.
  • description - sets the description text of the valueAxis.
  • minValue - sets the minimum value of the valueAxis.
  • maxValue - sets the maximum value of the valueAxis.
  • 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.
  • displayValueAxis - shows or hides the valueAxis.
  • axisSize - sets the size of the axis.
  • showTickMarks - when this property is true, the ticks are displayed in the valueAxis.
  • tickMarksInterval - sets the interval between each tick mark.
  • tickMarksColor - sets the color of the tick marks.
  • tickMarksDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
  • showGridLines - when this property is true, grid lines are displayed along the values of the axis.
  • gridLinesInterval - sets the interval between the grid lines.
  • gridLinesColor - sets the color of the grid lines.
  • gridLinesDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
  • 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.
  • textRotationAngle - rotation of the text along the axis (0-360) degrees.
  • textRotationPoint - position to rotate the text around, e.g. 'left', 'center' or 'right'
  • textOffset - horizontal and vertical text position offset, e.g. {x: 5, y: 2}
  • horizontalTextAlignment - horizontal alignment for the values along the axis.
  • verticalTextAlignment - vertical alignment for the values along the axis.
  • horizontalDescriptionAlignment - horizontal alignment for the axis description text
  • verticalDescriptionAlignment - vertical alignment for the axis description text.
  • position - sets the axis position. Possible values: "left" and "right".
• 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.
• greyScale - boolean that determines whether to display the series in the group in grey scale.

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.

Determines if the animation of the axes text is enabled.

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.

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.

Example:

    
    $('#jqxChart').jqxChart({renderEngine: 'HTML5'});
    $('#jqxChart').jqxChart('refresh');

The event is raised when the user moves the cursor above a series element. Example:

    // get the series groups of an existing chart
    var groups = $('#jqxChart').jqxChart('seriesGroups');
    
    // add a mouseover event handler function to the 1st group    
    if (groups.length > 0)
    {
        groups[0].mouseover = function(e)
        {
            alert('event = ' + e.event + ' index = ' + e.elementIndex );
        }
        
        // update the group
        $('#jqxChart').jqxChart({seriesGroups: groups});
    }

The event is raised when the user moves the cursor out of a series element. Example:

    // get the series groups of an existing chart
    var groups = $('#jqxChart').jqxChart('seriesGroups');
    
    // add a mouseout event handler function to the 1st group    
    if (groups.length > 0)
    {
        groups[0].mouseout = function(e)
        {
            alert('event = ' + e.event + ' index = ' + e.elementIndex );
        }
        
        // update the group
        $('#jqxChart').jqxChart({seriesGroups: groups});
    }

The event is raised when the user clicks on series element. Example:

    // get the series groups of an existing chart
    var groups = $('#jqxChart').jqxChart('seriesGroups');
    
    // add a click event handler function to the 1st group    
    if (groups.length > 0)
    {
        groups[0].click = function(e)
        {
            alert('event = ' + e.event + ' index = ' + e.elementIndex );
        }
        
        // update the group
        $('#jqxChart').jqxChart({seriesGroups: groups});
    }

Refreshes the content of the chart widget after a property or data update. Example:

    // select the chart element and change the color scheme
    $('#jqxChart').jqxChart({colorScheme: 'scheme02'});
    
    // refresh the chart element
    $('#jqxChart').jqxChart('refresh');

Updates the values of the chart series without full refresh of the entire chart. The method should be used for animation of frequently changing values. See the live updates example in the product demo. Example:

    updateDataValues();
    
    // update the chart series
    $('#jqxChart').jqxChart('update');

Adds a new color sheme. If a scheme with the same name already exists the method will update its colors.

Example:

    // setup the chart
    var myChart = $('#jqxChart').jqxChart(settings);

    // add a new color scheme named 'myScheme'
    myChart.jqxChart('addColorScheme', 'myScheme', ['#FF0000', '#00FF00', '#0000FF']);

    // apply the new scheme by setting the chart's colorScheme property
    myChart.jqxChart('colorScheme', 'myScheme');

    // refresh the chart
    myChart.jqxChart('refresh');

Removes an existing color scheme. If the scheme does not exist the method has no effect.

Example:

    // remove an existing color scheme named 'myScheme'
    $('#jqxChart').jqxChart('removeColorScheme', 'myScheme');

Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined.

Example:

    // get the colors of a scheme named 'myScheme'
    var schemeColors = $('#jqxChart').jqxChart('getColorScheme', 'myScheme');

Exports the chart's content as JPEG image.
The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com.

Example:

    
    $('#jqxChart').jqxChart('saveAsJPEG', 'myChart.jpeg');

Exports the chart's content as PNG image.
The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com.

Example:

    $('#jqxChart').jqxChart('saveAsPNG', 'myChart.png');