Methods and Events

20 Nov 201719 minutes to read

Public Methods

Redraw the chart

The redraw method is used for redrawing the entire chart. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

JAVASCRIPT

// Redraw Chart
var chartObj = $("#container").data("ejChart");
chartObj.redraw();

 //other way of using redraw method
$("#container").ejChart("redraw");

Animating the chart

The animate method animates the series and/or indicators in Chart. When parameter is not passed to this method, then all the series and indicators present in Chart are animated.

JAVASCRIPT

var chartObj  = $("#container").data("ejChart");
//animating series array
chartObj.animate(chartObj.model.series);

Events

Annotation Click

The annotationClick event is triggered while clicking the annotation

JAVASCRIPT

//annotationClick event for chart

$("#container").ejChart({

    annotationClick: function (args) {
              //Do something
    }
   
});

Animation Complete

The animationComplete event is triggered after the series animation is completed.
This event will be triggered for each series when the animation is enabled.

JAVASCRIPT

//animationComplete event for chart

$("#container").ejChart({

     animationComplete: function (argument) {
     //Do something
 }
});

Axis Label Click

The axisLabelClick event is triggered while clicking the axis labels.

JAVASCRIPT

//axisLabelClick event for chart

$("#container").ejChart({

    axisLabelClick: function (args) {
              //Do something
    }
   
});

Axes Label Rendering

The axesLabelRendering event is triggered before rendering the labels. This event is triggered for each label in axis. You can use this event to add custom text to axis labels.

JAVASCRIPT

//axesLabelRendering event for chart

$("#container").ejChart({

    axesLabelRendering: function (args) {
            //Do something
    }
   
});

Axis Label Mouse Move

The axisLabelMouseMove event is triggered on moving mouse over the axis label.

JAVASCRIPT

//axisLabelMouseMove event for chart

$("#container").ejChart({

    axisLabelMouseMove: function (args) {
              //Do something
    }
   
});

Axes Labels Initialize

The axesLabelsInitialize event is triggered during the initialization of axis labels.

JAVASCRIPT

//axesLabelsInitialize event for chart

$("#container").ejChart({

    axesLabelsInitialize: function (args) {
            //Do something
    }
    
});

Axes Range Calculate

The axesRangeCalculate event is triggered during axes range calculation.
This event is triggered for each axis present in Chart. You can use this event to customize axis range as required.

JAVASCRIPT

//axesRangeCalculate event for chart

$("#container").ejChart({

      axesRangeCalculate: function (args) {
              //Do something
      }
      
});

Axes Title Rendering

The axesTitleRendering event is triggered before rendering the axis title. This event is triggered for each axis with title. You can use this event to add custom text to axis title.

JAVASCRIPT

//axesTitleRendering event for chart

$("#container").ejChart({

     axesTitleRendering: function (args) {
             //Do something
     }
     
});

After Resize

The afterResize event is triggered after the chart is resized

JAVASCRIPT

//afterResize event for chart

$("#container").ejChart({

    afterResize: function (args) {
              //Do something
    }
   
});

Before Resize

The beforeResize event is triggered while the chart is changing.

JAVASCRIPT

//beforeResize event for chart

$("#container").ejChart({

    beforeResize: function (args) {
              //Do something
    }
   
});

Chart Click

The chartClick event is triggered while clicking the chart

JAVASCRIPT

//chartClick event for chart

$("#container").ejChart({

    chartClick: function (args) {
              //Do something
    }
   
});

Chart Double Click

The chartDoubleClick event is triggered on double clicking the chart.

JAVASCRIPT

//chartDoubleClick event for chart

$("#container").ejChart({

    chartDoubleClick: function (args) {
              //Do something
    }
   
});

Chart Mouse Move

The chartMouseMove event is triggered while moving the mouse over the chart.

JAVASCRIPT

//chartMouseMove event for chart

$("#container").ejChart({

    chartMouseMove: function (args) {
              //Do something
    }
   
});

Chart Mouse Leave

The chartMouseLeave event is triggered when the mouse pointer leaves the chart.

JAVASCRIPT

//chartMouseLeave event for chart

$("#container").ejChart({

    chartMouseLeave: function (args) {
              //Do something
    }
   
});

Chart Area Bounds Calculate

The chartAreaBoundsCalculate event is triggered during the calculation of chart area bounds. You can use this event to customize the bounds of chart area.

JAVASCRIPT

//chartAreaBoundsCalculate event for chart

$("#container").ejChart({

    chartAreaBoundsCalculate: function (args) {
            //Do something
    }
    
});

Create

The create event is triggered after the chart is created.

JAVASCRIPT

//Create event for chart

$("#container").ejChart({

     create: function (args) {
             //Do something
     }
     
});

Drag Start

The dragStart event is triggered when the dragging is started.

JAVASCRIPT

//Drag Start event for chart

$("#container").ejChart({

    dragStart: function (args) {
              //Do something
    }
   
});

Dragging

The dragging event is triggered while dragging.

JAVASCRIPT

//Dragging event for chart

$("#container").ejChart({

    dragging: function (args) {
              //Do something
    }
   
});

Drag End

The dragEnd event is triggered when the dragging is completed.

JAVASCRIPT

//DragEnd event for chart

$("#container").ejChart({

    dragEnd: function (args) {
              //Do something
    }
   
});

Destroy

The destroy event is triggered when chart is destroyed completely.

JAVASCRIPT

//Destroy event for chart

$("#container").ejChart({

     destroy: function (args) {
             //Do something
     }
     
});

Display Text Rendering

The displayTextRendering event is triggered before rendering the data labels.
This event is triggered for each data label in the series. You can use this event to add custom text in data labels.

JAVASCRIPT

//displayTextRendering event for chart

$("#container").ejChart({

    displayTextRendering: function (args) {
             //Do something
    }
	
});

Error Bar Rendering

The errorBarRendering event is triggered when the error bar is rendering.

JAVASCRIPT

//errorBarRendering event for chart

$("#container").ejChart({

    errorBarRendering: function (args) {
              //Do something
    }
   
});

Legend Bounds Calculate

The legendBoundsCalculate event is triggered during the calculation of legend bounds.
You can use this event to customize the bounds of legend.

JAVASCRIPT

//legendBoundsCalculate event for chart

$("#container").ejChart({

     legendBoundsCalculate: function (args) {
              //Do something
     }
     
});

Legend Item Click

The legendItemClick event is triggered on clicking the legend item.

JAVASCRIPT

//legendItemClick event for chart

$("#container").ejChart({

     legendItemClick: function (args) {
              //Do something
     }
     
});

Legend Item Mouse Move

The legendItemMouseMove event is triggered when moving mouse over legend item. You can use this event for hit testing on legend items.

JAVASCRIPT

//legendItemMouseMove event for chart

$("#container").ejChart({

    legendItemMouseMove: function (args) {
             //Do something
    }
    
});

Legend Item Rendering

The legendItemRendering event is triggered before rendering the legend item. This event is fired for each legend item in Chart.
You can use this event to customize legend item shape or add custom text to legend item.

JAVASCRIPT

//legendItemRendering event for chart

$("#container").ejChart({

    legendItemRendering: function (args) {
            //Do something
    }
    
});

Load

The load event is triggered before loading the chart.

JAVASCRIPT

//load event for chart

$("#container").ejChart({

    load: function (args) {
             //Do something
    }
    
});

Multi Level Label Click

The multiLevelLabelClick event is triggered on the clicking the Multi level labels of the chart .

JAVASCRIPT

//MultilevelLabelsClick event for chart

$("#container").ejChart({

    multiLevelLabelClick: function (args) {
              //Do something
    }
   
});

Multi Level Label Rendering

The multiLevelLabelRendering event is triggered when multi level labels are rendering.

JAVASCRIPT

//multi level labels rendering event for chart

$("#container").ejChart({

  multiLevelLabelRendering: function (args) {
              //Do something
    }
   
});

Point Region Click

The pointRegionClick event is triggered on clicking a point in chart. You can use this event to handle clicks made on points.

JAVASCRIPT

//pointRegionClick event for chart

$("#container").ejChart({

    pointRegionClick: function (args) {
             //Do something
    }
    
});

Point Region Mouse Move

The pointRegionMouseMove event is triggered when mouse is moved over a point.

JAVASCRIPT

//pointRegionMouseMove event for chart

$("#container").ejChart({

    pointRegionMouseMove: function (args) {
                  //Do something
    }
   
});

Pre Render

The preRender event is triggered before rendering the chart.

JAVASCRIPT

//preRender event for chart

$("#container").ejChart({

    preRender: function (args) {
              //Do something
    }
   
});

Range Selected

The rangeSelected event is triggered after the data is selected in the chart

JAVASCRIPT

//rangeSelected event for chart

$("#container").ejChart({

    rangeSelected: function (args) {
             //Do something
    }
    
});

Series Region Click

The seriesRegionClick event is triggered after selecting a series. This event is triggered after selecting a series only if selection mode is enabled in the series.

JAVASCRIPT

//series Region click event for chart

$("#container").ejChart({

    seriesRegionClick: function (args) {
              //Do something
    }
    
});

Series Rendering

The seriesRendering event is triggered before rendering a series. This event is fired for each series in Chart.

JAVASCRIPT

//seriesRendering event for chart

$("#container").ejChart({

    seriesRendering: function (args) {
              //Do something
    }
    
});

Symbol Rendering

The symbolRendering event is triggered before rendering the marker symbols. This event is triggered for each marker in Chart.

JAVASCRIPT

//symbolRendering event for chart

$("#container").ejChart({
 
    symbolRendering: function (args) {
              //Do something
    }
    
});

Trendline Rendering

The trendlineRendering event is triggered when trendlines are rendering.

JAVASCRIPT

//trendline rendering event for chart

$("#container").ejChart({

  trendlineRendering: function (args) {
              //Do something
    }
   
});

Title Rendering

The titleRendering event is triggered before rendering the Chart title. You can use this event to add custom text in Chart title.

JAVASCRIPT

//titleRendering event for chart

$("#container").ejChart({

    titleRendering: function (args) {
              //Do something
    }
    
});

Sub Title Rendering

The subtitleRendering event is triggered before rendering the Chart Sub title.

JAVASCRIPT

//SubtitleRendering event for chart

$("#container").ejChart({

    subTitleRendering: function (args) {
              //Do something
    }
    
});

The tooltipInitialize event is triggered before rendering the tooltip. This event is fired when tooltip is enabled and mouse is hovered on a Chart point. You can use this event to customize tooltip before rendering.

JAVASCRIPT

//toolTipInitialize event for chart
 
$("#container").ejChart({

    toolTipInitialize: function (args) {
              //Do something
    }
    
});

The trackAxisTooltip event is triggered before rendering crosshair tooltip in axis. This event is fired for each axis with crosshair label enabled. You can use this event to customize crosshair label before rendering

JAVASCRIPT

//trackAxisToolTip event for chart

$("#container").ejChart({

    trackAxisToolTip: function (args) {
              //Do something
    }
    
});

The trackTooltip event is triggered before rendering trackball tooltip. This event is fired for each series in Chart because trackball tooltip is displayed for all the series. You can use this event to customize the text displayed in trackball tooltip.

JAVASCRIPT

//trackToolTip event for chart

$("#container").ejChart({

    trackToolTip: function (args) {
              //Do something
    }
   
});

Scroll Start

The scrollStart event is triggered when scroll starts.

JAVASCRIPT

//scroll start event for chart

$("#container").ejChart({

   scrollStart: function (args) {}

});

Scroll End

The scrollEnd event is triggered after scrolling is completed.

JAVASCRIPT

//Scroll End event for chart
$("#container").ejChart({

   scrollEnd: function (args) {}

});

Scroll Changed

The scrollChanged event is triggered after the scrollbar position is changed.

JAVASCRIPT

//scrollbarChanged event for chart

$("#container").ejChart({

   scrollChanged: function (args) {}
});

Zoomed

The zoomed event is triggered after zooming the chart while using the rectangle zooming.

JAVASCRIPT

//zoomed event for chart

$("#container").ejChart({

    zoomed: function (args) {
            //Do something
    }
   
});

Methods and Events

Public Methods

Redraw the chart

Animating the chart

Events

Annotation Click

Animation Complete

Axis Label Click

Axes Label Rendering

Axis Label Mouse Move

Axes Labels Initialize

Axes Range Calculate

Axes Title Rendering

After Resize

Before Resize

Chart Click

Chart Double Click

Chart Mouse Move

Chart Mouse Leave

Chart Area Bounds Calculate

Create

Drag Start

Dragging

Drag End

Destroy

Display Text Rendering

Error Bar Rendering

Legend Bounds Calculate

Legend Item Click

Legend Item Mouse Move

Legend Item Rendering

Load

Multi Level Label Click

Multi Level Label Rendering

Point Region Click

Point Region Mouse Move

Pre Render

Range Selected

Series Region Click

Series Rendering

Symbol Rendering

Trendline Rendering

Title Rendering

Sub Title Rendering

Tooltip Initialize

Track Axis Tooltip

Track tooltip

Scroll Start

Scroll End

Scroll Changed

Zoomed