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 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');

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

}                        

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

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.

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 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');

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');