## Properties

Name | Type | Default
--- | --- | ---
title | String | ''
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');
description | String | ''
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');
showBorderLine | Boolean | true
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');
borderLineColor | String | #888888
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');
borderLineWidth | Number | 1
Sets the chart's border line width Example:
        $('#jqxChart').jqxChart({borderLineWidth: 1});

        // refresh the chart element
        $('#jqxChart').jqxChart('refresh');
backgroundColor | String | White
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');
backgroundImage | String | ''
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');
showLegend | Boolean | false
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');
padding | Padding | { left: 5, top: 5, right: 5, bottom: 5 }
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');
titlePadding | Padding | { left: 2, top: 2, right: 2, bottom: 2 }
Sets the padding of the chart's title. Example:
        $('#jqxChart').jqxChart({titlePadding: { left: 10, top: 10, right: 10, bottom: 10 }});
        $('#jqxChart').jqxChart('refresh');
colorScheme | String | 'scheme01'
Sets the chart's color pallete. jqxChart suppports 11 color schemes from 'scheme01' to 'scheme11'. Example:
        $('#jqxChart').jqxChart({colorScheme: 'scheme06'});
        $('#jqxChart').jqxChart('refresh');
greyScale | Boolean | false
Determines whether to display the chart using grey scale colors. Example:
        $('#jqxChart').jqxChart({greyScale: true});
showToolTips | Boolean | true
Enables or disables the chart tooltips. Example:
        $('#jqxChart').jqxChart({showToolTips: false});
        $('#jqxChart').jqxChart('refresh');
toolTipShowDelay | Number | 500
Determines the tooltips show delay in milliseconds. Values may range from 0 to 10000 [ms] Example:
        $('#jqxChart').jqxChart({toolTipShowDelay: 2000});
        $('#jqxChart').jqxChart('refresh');
toolTipHideDelay | Number | 4000
Determines the tooltips hide delay in milliseconds. Example:
        $('#jqxChart').jqxChart({toolTipHideDelay: 5000});
        $('#jqxChart').jqxChart('refresh');
enabled | Boolean | true
Sets the chart widget in enabled or disabled state. Example:
        $('#jqxChart').jqxChart({enabled: false});
        $('#jqxChart').jqxChart('refresh');
source | Object | null
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);
categoryAxis | Object | null
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'
    }
textRotationAngle - sets the rotation angle of the text. 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. baseUnit - the base unit when used with 'date' axis. Values can be 'year', 'month' or 'date'. valuesOnTicks - specifies whether the axis values are aligned with the tick marks. flip - specifies whether the axis values area displayed in reverse order. 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. unitInterval - sets the interval between the units. showGridLines - displays the grid lines. gridLinesColor - set the grid lines color. gridLinesInterval - sets the interval between the grid lines. 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.
seriesGroups | Object | null
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' }
                ]
        }
    ]
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 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 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. 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 - color for the serie. Takes precedence over the colorScheme property. formatSettings - data formatting settings for the values in the serie. formatFunction - data formatting function for the values in the serie. 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. 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. 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.
enableAnimations | Boolean | false
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 | Number | 1000
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.
renderEngine | String | ''
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');

## Events

Name | Arguments |
--- | --- | ---
mouseover | Object |
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});
        }
mouseout | Object |
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});
        }
click | Object |
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});
        }

## Methods

Name | Arguments | Return Value
--- | --- | ---
refresh | None | None
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');
addColorScheme | schemeName, array of colors | None
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');
removeColorScheme | schemeName | None
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');
getColorScheme | schemeName | array of colors or undefined
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');
saveAsJPEG | fileName, exportServer | 'chart.jpeg', ''
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');
saveAsPNG | fileName, exportServer | 'chart.png', ''
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');