Sets the HeatMap legend's settings.

Code example

Set the legendSettings property.

                                $("#jqxHeatMap").jqxHeatMap({
                                    legendSettings: {
                                        position: 'Bottom'
                                    }
                                });                        
                            

Legend Properties:

• position - sets the legend position. Possible options: 'Top', 'Bottom', 'Right', 'Left'

Sets the HeatMap palette's settings.

Code example

Set the paletteSettings property.

                                                $("#jqxHeatMap").jqxHeatMap({
                                                    paletteSettings: {
                                                        palette: [
                                                            { value: 0, color: '#5dc3f0', label: 'No commits' },
                                                            { value: 50, color: '#4bb1de' },
                                                            { value: 100, color: '#3885a6' }
                                                        ],
                                                        type: 'Gradient',
                                                        emptyPointColor: 'dodgerblue'
                                                    }
                                                });                        
                                            

Palette Properties:

• palette - sets the color collection for the heatmap cell.
  • value - palette color value
  • color - palette color
  • label - palette color label. This property is optional.

  
                                              [
                                                  { value: 0, color: '#5dc3f0', label: 'No commits' },
                                                  { value: 100, color: '#3885a6' }
                                              ]
                                          

• type - sets the color style. Possible options: 'Gradient' (render the cells with linear gradient color), 'Fixed' (render the cells with fixed color). Default value 'Gradient'.
• emptyPointColor - sets the color for the empty points. Default value '#eee'.

Sets or gets the items source.

Code example

Set the source property.

var data = [

[89, 39, 94, 55, 3],

[47, 47, 88, 10, 10]

[null, 58, 12, 82, 99]

];

$("#jqxHeatMap").jqxHeatMap({ source: data });

Get the source property.

var source = $('#jqxHeatMap').jqxHeatMap('source'); 

Sets or gets the jqxLoader's title.

Code examples

Set the title property.

$('#jqxHeatMap').jqxHeatMap({ title: 'Custom title' }); 

Get the title property:

var title = $('#jqxHeatMap').jqxHeatMap('title'); 

Callback function which allows you to customize the tooltip's content.

Code examples

Set the tooltipRender property.

$('#jqxHeatMap').jqxHeatMap({ tooltipRender: function (args) {
                                args.content = '
On ' + args.yLabel + ', ' + args.xLabel + ' has made ' +
                                        args.value + ' 000$
'
                                } 
                            }); 

Sets or gets the jqxHeatMap's width.

Code example

Set the width property.

$('#jqxHeatMap').jqxHeatMap({ width: '150px' });

Get the width property.

var width = $('#jqxHeatMap').jqxHeatMap('width');

Sets the HeatMap x axis settings.

Code example

Set the xAxis property.

                                                                $("#jqxHeatMap").jqxHeatMap({
                                                                    xAxis: {
                                                                        labels: ['Nancy', 'John', 'Terry', 'Marry'],
                                                                        opposedPosition: true,
                                                                        isInversed: true,
                                                                        minimum: new Date(2018, 6, 23),
                                                                        maximum: new Date(2019, 7, 5),
                                                                        labelFormat: 'long'
                                                                    },
                                                                });                        
                                                            

X axis Properties:

• labels - sets the x axis labels in case of not using minimum and maximum properties.
• opposedPosition - sets whether the axis to be rendered at the opposite side of its default position. Default value false.
• isInversed - sets whether the axis to be rendered in inversed position or not. Default value false.
• minimum - sets the minimum range of the x axis.
• maximum - sets the maximum range of the x axis.
• labelFormat - used to format the axis label when minimum and maximum properties are set. Possible options: 'short', 'numeric', '2-digit', 'narrow', 'short' or 'long'. Default value 'short'.

Sets the HeatMap y axis settings.

Code example

Set the yAxis property.

                                                                                $("#jqxHeatMap").jqxHeatMap({
                                                                                    yAxis: {
                                                                                        labels: ['Mon', 'Tue', 'Wed'],
                                                                                        opposedPosition: true,
                                                                                        isInversed: true
                                                                                    },
                                                                                });                        
                                                                            

Y axis Properties:

• labels - sets the y axis labels.
• opposedPosition - sets whether the axis to be rendered at the opposite side of its default position. Default value false.
• isInversed - sets whether the axis to be rendered in inversed position or not. Default value false.

Removes the HeatMap from the document and releases its resources.

Code example

Invoke the destroy method.

$('#jqxHeatMap').jqxHeatMap('destroy');
                        

Sets the x axis position in inversed manner or not.

Code example

Invoke the reverseXAxisPosition method.

$('#jqxHeatMap').jqxHeatMap('reverseXAxisPosition', true);
                        

Sets the y axis position in inversed manner or not.

Code example

Invoke the reverseYAxisPosition method.

$('#jqxHeatMap').jqxHeatMap('reverseYAxisPosition', true);
                                                        

Sets the legend position.

Code example

Invoke the setLegendPosition method.

$('#jqxHeatMap').jqxHeatMap('setLegendPosition', 'Left');
                                                                        

Sets the palette type.

Code example

Invoke the setPaletteType method.

$('#jqxHeatMap').jqxHeatMap('setPaletteType', 'Fixed');
                                                                                        

Sets the x axis at the opposite side of its default position.

Code example

Invoke the setOpposedXAxisPosition method.

$('#jqxHeatMap').jqxHeatMap('setOpposedXAxisPosition', true);
                                                                                                        

Sets the y axis at the opposite side of its default position.

Code example

Invoke the setOpposedYAxisPosition method.

$('#jqxHeatMap').jqxHeatMap('setOpposedYAxisPosition', true);