ejSparkline

11 Jul 201824 minutes to read

Essential sparkline can be easily configured to the DOM element, such as div. You can create a Sparkline with highly customizable look and feel.

Syntax

$(element).ejSparkline();

Example

HTML

<div id="container"></div> 
 
<script>
// Create Sparkline
$('#container').ejSparkline();      
</script>

Requires

module:jQuery.js
module:ej.core.js
module:ej.data.js
module:ej.sparkline.js
module:ej.globalize.js

Members

background `string`

Background color of the plot area.

Default Value

transparent

Example

$("#container").ejSparkline({

    background : "gray" 
                          
});

Try it: JS Playground Sample

fill `string`

Fill color for the sparkline series.

Default Value

“#33ccff”

Example

$("#container").ejSparkline({
    fill : "green"                  
});

Try it: JS Playground

stroke `string`

Border color of the series.

Default Value

null

Example

$("#container").ejSparkline({
    stroke: "green"                   
});

border `object`

Options for customizing the color, opacity and width of the sparkline border.

border.color `string`

Border color of the sparkline.

Default Value

transparent

Example

$("#container").ejSparkline({

   border: { color: "green" }                      

});

border.width `number`

Width of the Sparkline border.

Default Value

Example

$("#container").ejSparkline({

   border: { width: 2 }                      

});

width `number`

Border width of the series.

Default Value

Example

$("#container").ejSparkline({
    width : 2                   
});

opacity `number`

Opacity of the series.

Default Value

Example

$("#container").ejSparkline({
    opacity : 2                  
});

highPointColor `string`

Color for series high point.

Default Value

null

Example

$("#container").ejSparkline({
    highPointColor : "green"                  
});

Try it: JS Playground

lowPointColor `string`

Color for series low point.

Default Value

null

Example

$("#container").ejSparkline({
    lowPointColor : "green"                  
});

Try it: JS Playground

startPointColor `string`

Color for series start point.

Default Value

null

Example

$("#container").ejSparkline({
    startPointColor : "green"                  
});

Try it: JS Playground

endPointColor `string`

Color for series end point.

Default Value

null

Example

$("#container").ejSparkline({
    endPointColor : "green"                  
});

Try it: JS Playground

negativePointColor `string`

Color for series negative point.

Default Value

null

Example

$("#container").ejSparkline({
    negativePointColor : "green"                  
});

Try it: JS Playground

rangeBandSettings `object`

Options for customizing the color, opacity of the sparkline start and end range.

rangeBandSettings.startRange `number`

Start value of the range band.

Default Value

null

Example

$("#container").ejSparkline({
     rangeBandSettings:{
        startRange : 2
    }                  
});

rangeBandSettings.endRange `number`

End value of the range band.

Default Value

null

Example

$("#container").ejSparkline({
    rangeBandSettings:{
        endRange : 2
    }                  
});

rangeBandSettings.opacity `number`

Range band opacity of the series.

Default Value

Example

$("#container").ejSparkline({
     rangeBandSettings:{
        opacity : 2
    }                  
});

rangeBandSettings.color `string`

Range band color of the series.

Default Value

transparent

Example

$("#container").ejSparkline({
    rangeBandSettings:{
        color : 'purple'
    }                  
});

locale `string`

Name of the culture based on which sparkline should be localized.

Default Value

“en-US”

Example

$("#container").ejSparkline({
    locale : "en-US"
});

palette `string`

Name of a field in data source, where the fill color for all the data points is generated.

Default Value

””

Example

$("#container").ejSparkline({
    palette : "ColorFieldName"                  
});

isResponsive `boolean`

Controls whether sparkline has to be responsive or not.

Default Value

true

Example

$("#container").ejSparkline({

   isResponsive : true             

});

enableCanvasRendering `boolean`

Controls whether Sparkline has to be rendered as Canvas or SVG.Canvas rendering supports all functionalities in SVG rendering.

Default Value

false

Example

$("#container").ejSparkline({

    enableCanvasRendering : true             

});

Try it: JS Playground Sample

enableGroupSeparator `boolean`

Specify to convert the date object to string, using locale settings.

Default Value

false

Example

$("#container").ejSparkline({

    enableGroupSeparator : true

});

dataSource `object`

Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.

Default Value

null

Example

$("#container").ejSparkline({
    
    dataSource: data
                       
});

Try it : JS Playground Sample

xName `string`

Name of the property in the datasource that contains x value for the series.

Default Value

null

Example

$("#container").ejSparkline({
    
    xName: "XValue"
                       
});

Try it: JS Playground Sample

yName `string`

Name of the property in the datasource that contains y value for the series.

Default Value

null

Example

$("#container").ejSparkline({
    
    yName: "YValue"
                       
});

Try it: JS Playground Sample

padding `number`

Gap or padding for sparkline.

Default Value

Example

$("#container").ejSparkline({

    padding : 5                     

});

type `enum`

Specifies the type of the series to render in sparkline.

Name	Type	Description
Area	string	Specifies the series type as area.
Line	string	Specifies the series type as line.
Column	string	Specifies the series type as column.
Pie	string	Specifies the series type as pie.
WinLoss	string	Specifies the series type as WinLoss.

Default Value

“line”. See Type

Example

$("#container").ejSparkline({
    type : "area"                  
});

Try it: JS Playground Sample

theme `enum`

Specifies the theme for Sparkline.

Name	Type	Description
Azure	string	The Sparkline will be displayed in azure theme
FlatLight	string	The Sparkline will be displayed in light flat theme
FlatDark	string	The Sparkline will be displayed in dark flat theme
Azuredark	string	The Sparkline will be displayed in dark azure theme
Lime	string	The Sparkline will be displayed in lime theme
LimeDark	string	The Sparkline will be displayed in dark lime theme
Saffron	string	The Sparkline will be displayed in saffron theme
SaffronDark	string	The Sparkline will be displayed in dark saffron theme
GradientLight	string	The Sparkline will be displayed in light gradient theme
GradientDark	string	The Sparkline will be displayed in dark gradient theme

Default Value

“Flatlight”. See Theme

Example

$("#container").ejSparkline({

   theme : "flatdark"            

});

Try it: JS Playground Sample

tooltip `object`

Options to customize the tooltip.

tooltip.visible `boolean`

Show/hides the tooltip visibility.

Default Value

false

Example

$("#container").ejSparkline({

   tooltip :{visible :true}              

});

Try it: JS Playground Sample

tooltip.fill `string`

Fill color for the sparkline tooltip.

Default Value

“white”

Example

$("#container").ejSparkline({
    tooltip:{
        fill : "green"
    }                  
});

Try it: JS Playground

tooltip.template `string`

Custom template to the tooltip.

Default Value

””

Example

$("#container").ejSparkline({
    tooltip :{template : "item"}                  
});

Try it: JS Playground Sample

tooltip.border `object`

Options for customizing the border of the tooltip.

tooltip.border.color `string`

Border color of the tooltip.

Default Value

“transparent”

Example

$("#container").ejSparkline({
    tooltip:{
        border:{color : "green"}
    }                  
});

tooltip.border.width `number`

Border width of the tooltip.

Default Value

Example

$("#container").ejSparkline({
    tooltip :{border :{width : 2}}                  
});

tooltip.font `object`

Options for customizing the font of the tooltip.

tooltip.font.color `string`

Font color of the text in the tooltip.

Default Value

“#111111”

Example

$("#container").ejSparkline({
tooltip :{font :{color : "green"}}                 
});

tooltip.font.fontFamily `string`

Font Family for the tooltip.

Default Value

“Segoe UI”

Example

$("#container").ejSparkline({
tooltip :{ font : { fontFamily : "Algerian"}}                 
});

tooltip.font.fontStyle `enum`

Specifies the font Style for the tooltip.

Name	Type	Description
Normal	string	Specifies the fontStyle as normal.
Italic	string	Specifies the fontStyle as italic.

Default Value

“Normal”

Example

$("#container").ejSparkline({
tooltip : {font :{fontStyle : "italic"}}                 
});

tooltip.font.fontWeight `enum`

Specifies the font weight for the tooltip.

Name	Type	Description
Regular	string	Specifies the font weight as regular.
Bold	string	Specifies the font weight as bold.
Lighter	string	Specifies the font weight as lighter.

Default Value

“Regular”

Example

$("#container").ejSparkline({
tooltip :{font :{fontWeight : "lighter"}}                 
});

tooltip.font.opacity `number`

Opacity for text in the tooltip.

Default Value

Example

$("#container").ejSparkline({
tooltip :{font :{opacity : 0.5}}                 
});

tooltip.font.size `string`

Font size for text in the tooltip.

Default Value

“8px”

Example

$("#container").ejSparkline({
tooltip :{font :{size : "14px"}}                 
});

markerSettings `object`

Options for displaying and customizing marker for a data point.

markerSettings.opacity `number`

Controls the opacity of the marker.

Default Value

Example

$("#container").ejSparkline({
    markerSettings:{
        opacity : 2
    }                  
});

markerSettings.visible `boolean`

Controls the visibility of the marker shape.

Default Value

false

Example

$("#container").ejSparkline({
    markerSettings :{ visible : true}                  
});

markerSettings.width `number`

width of the marker shape.

Default Value

Example

$("#container").ejSparkline({
    markerSettings :{width : 2}                  
});

markerSettings.fill `string`

Color of the marker shape.

Default Value

“white”

Example

$("#container").ejSparkline({
    markerSettings : { fill : "green" }                  
});

markerSettings.border `object`

Options for customizing the border of the marker shape.

markerSettings.border.color `string`

Border color of the marker shape.

Default Value

“transparent”

Example

$("#container").ejSparkline({
    markerSettings:{
        border:{color : "green"}
    }                  
});

markerSettings.border.opacity `number`

Controls the opacity of the marker border.

Default Value

Example

$("#container").ejSparkline({
    markerSettings:{
        border:{opacity : 2}
    }                  
});

markerSettings.border.width `number`

Border width of the marker shape.

Default Value

null

Example

$("#container").ejSparkline({
    markerSettings :{border :{width : 2}}                  
});

Try it: JS Playground Sample

size `object`

Options to customize the Sparkline size.

Try it: JS Playground Sample

size.height `string`

Height of the Sparkline. Height can be specified in either pixel or percentage.

Default Value

’’

Example

$("#container").ejSparkline({

   size :{height : '80%'}          

});

size.width `string`

Width of the Sparkline. Width can be specified in either pixel or percentage.

Default Value

’’

Example

$("#container").ejSparkline({

   size :{width : '80%'}          

});

axisLineSettings `object`

Options for customizing the color,dashArray and width of the axisLine.

Try it: JS Playground Sample

axisLineSettings.visible `boolean`

Controls the visibility of the axis.

Default Value

false

Example

$("#container").ejSparkline({
    axisLineSettings : {visible:true}                  
});

axisLineSettings.color `string`

Color of the axis line.

Default Value

‘#111111’

Example

$("#container").ejSparkline({

   axisLineSettings: { color: "green" }                      

});

axisLineSettings.width `number`

Width of the axis line.

Default Value

Example

$("#container").ejSparkline({

   axisLineSettings: { width: 2 }                      

});

axisLineSettings.dashArray `number`

Dash array of the axis line.

Default Value

Example

$("#container").ejSparkline({

   axisLineSettings: { dashArray: 2 }                      

});

Methods

redraw()

Redraws the entire sparkline. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

Returns: void

Example

// Redraw Sparkline
var sparklineObj = $("#container").data("ejSparkline");
sparklineObj.redraw();

$("#container").ejSparkline("redraw");

Events

load

Fires before loading the sparkline.

Example

//load event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

loaded

Fires after loaded the sparkline.

Example

//loaded event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

tooltipInitialize

Fires before rendering trackball tooltip. You can use this event to customize the text displayed in trackball tooltip.

Example

//ToolTip event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event
JS `locationX`	Object	X Location of the trackball tooltip in pixels
JS `locationY`	Object	Y Location of the trackball tooltip in pixels
JS `pointIndex`	number	Index of the point for which trackball tooltip is displayed
JS `currentText`	string	Text to be displayed in trackball tooltip. Use this option to add custom text in trackball tooltip

seriesRendering

Fires before rendering a series. This event is fired for each series in Sparkline.

Example

//seriesRendering event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event
JS `minX`	Object	Minimum x value of the data point
JS `minY`	Object	Minimum y value of the data point
JS `maxX`	Object	Maximum x value of the data point
JS `maxY`	Object	Maximum y value of the data point

pointRegionMouseMove

Fires when mouse is moved over a point.

Example

//pointRegionMouseMove event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event
JS `locationX`	number	X-coordinate of point in pixel
JS `locationY`	number	Y-coordinate of point in pixel
JS `pointIndex`	number	Index of the point in series
JS `seriesType`	string	Type of the series

pointRegionMouseClick

Fires on clicking a point in sparkline. You can use this event to handle clicks made on points.

Example

//pointRegionClick event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event
JS `locationX`	number	X-coordinate of point in pixel
JS `locationY`	number	Y-coordinate of point in pixel
JS `pointIndex`	number	Index of the point in series
JS `seriesType`	string	Type of the series

sparklineMouseMove

Fires on moving mouse over the sparkline.

Example

//sparklineMouseMove event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

sparklineMouseLeave

Fires on moving mouse outside the sparkline.

Example

//sparklineMouseLeave event for sparkline

$("#container").ejSparkline({

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

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

Click

Fires, on clicking the sparkline.

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

Example

//Click event for sparkline

 $("#container").ejSparkline({


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

doubleClick

Fires, on double clicking the sparkline.

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

Example

//DoubleClick event for sparkline

 $("#container").ejSparkline({


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

rightClick

Fires, on right clicking the sparkline.

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the sparkline model object
JS `type`	string	Name of the event

Example

//RightClick event for sparkline

 $("#container").ejSparkline({

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

ejSparkline

Syntax

Example

Requires

Members

background string

Default Value

Example

fill string

Default Value

Example

stroke string

Default Value

Example

border object

border.color string

Default Value

Example

border.width number

Default Value

Example

width number

Default Value

Example

opacity number

Default Value

Example

highPointColor string

Default Value

Example

lowPointColor string

Default Value

Example

startPointColor string

Default Value

Example

endPointColor string

Default Value

Example

negativePointColor string

Default Value

Example

rangeBandSettings object

rangeBandSettings.startRange number

Default Value

Example

rangeBandSettings.endRange number

Default Value

Example

rangeBandSettings.opacity number

Default Value

Example

rangeBandSettings.color string

Default Value

Example

locale string

Default Value

Example

palette string

Default Value

Example

isResponsive boolean

Default Value

Example

enableCanvasRendering boolean

Default Value

Example

enableGroupSeparator boolean

Default Value

Example

dataSource object

Default Value

Example

xName string

Default Value

Example

yName string

Default Value

Example

padding number

background `string`

fill `string`

stroke `string`

border `object`

border.color `string`

border.width `number`

width `number`

opacity `number`

highPointColor `string`

lowPointColor `string`

startPointColor `string`

endPointColor `string`

negativePointColor `string`

rangeBandSettings `object`

rangeBandSettings.startRange `number`

rangeBandSettings.endRange `number`

rangeBandSettings.opacity `number`

rangeBandSettings.color `string`

locale `string`

palette `string`

isResponsive `boolean`

enableCanvasRendering `boolean`

enableGroupSeparator `boolean`

dataSource `object`

xName `string`

yName `string`

padding `number`

type `enum`

theme `enum`

tooltip `object`

tooltip.visible `boolean`

tooltip.fill `string`

tooltip.template `string`

tooltip.border `object`

tooltip.border.color `string`

tooltip.border.width `number`

tooltip.font `object`

tooltip.font.color `string`

tooltip.font.fontFamily `string`

tooltip.font.fontStyle `enum`

tooltip.font.fontWeight `enum`

tooltip.font.opacity `number`

tooltip.font.size `string`

markerSettings `object`

markerSettings.opacity `number`

markerSettings.visible `boolean`

markerSettings.width `number`

markerSettings.fill `string`

markerSettings.border `object`

markerSettings.border.color `string`

markerSettings.border.opacity `number`

markerSettings.border.width `number`

size `object`

size.height `string`