Methods and Events
6 Mar 20188 minutes to read
Methods
redraw()
This methods redraws the entire sparkline. You can call redraw()
whenever you update, add or remove points from the data source or whenever you want to refresh the UI.
<div id="container">
<ej-sparkline></ej-sparkline>
</div>
<script>
// Destroys range navigator
$("#container").ejRangeNavigator("redraw");
</script>
Events
load
The load
event is fired before loading the sparkline.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-load=load></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.load="onLoad"
});
function onLoad(sender) {
// do something
}
</script>
</body>
loaded
The loaded
event is fired after sparkline in loaded.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-loaded=loaded></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.loaded="onLoaded"
});
function onLoaded(sender) {
// do something
}
</script>
</body>
tooltipInitialize
Fires before rendering trackball tooltip. You can use tooltipInitialize
event to customize the text displayed in trackball tooltip.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-tooltipinitialize="tooltip"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.tooltip="onTooltipInitialize"
});
function onTooltipInitialize(sender) {
// do something
}
</script>
</body>
seriesRendering
Fires before rendering a series. The seriesRendering
event is fired for each series in Sparkline.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-seriesrendering="seriesRendering"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.seriesRendering="onSeriesRender"
});
function onSeriesRender(sender) {
// do something
}
</script>
</body>
pointRegionMouseMove
The pointRegionMouseMove
event is fired when mouse is moved over a point.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-pointregionmousemove="regionMouseMove"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.regionMouseMove="onRegionMouseMove"
});
function onRegionMouseMove(sender) {
// do something
}
</script>
</body>
pointRegionMouseClick
The pointRegionMouseClick
event is fired on clicking a point in sparkline. You can use this event to handle clicks made on points.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-pointregionmouseclick="regionMouseClick"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.regionMouseClick="onRegionMouseClick"
});
function onRegionMouseClick(sender) {
// do something
}
</script>
</body>
sparklineMouseMove
The sparklineMouseMove
is fired on moving mouse over the sparkline.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-sparklinemousemove="sparklineMouseMove"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.sparklineMouseMove="onSparklineMouseMove"
});
function onSparklineMouseMove(sender) {
// do something
}
</script>
</body>
sparklineMouseLeave
The sparklineMouseLeave
event is fired on moving mouse outside the sparkline.
<body ng-controller="SparkCtrl">
<div id="container" >
<ej-sparkline e-sparklinemouseleave="sparklineMouseLeave"></ej-sparkline>
</div>
<script>
angular.module('SparkApp', ['ejangular'])
.controller('SparkCtrl', function ($scope) {
$scope.sparklineMouseLeave="onSparklineMouseLeave"
});
function onSparklineMouseLeave(sender) {
// do something
}
</script>
</body>