Client-Side Events

The Bootstrap Sparkline control provides several client-side events fired at different moments of the control's life cycle. Use the checkboxes below to specify which events should be added to the log.

Trace Events:
<dx:BootstrapSparkline ID="SparklineCilentSideEvents" ClientInstanceName="SparklineCilentSideEvents" runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
    <ClientSideEvents Drawn="onDrawn" Init="onInit" TooltipHidden="onTooltipHidden" TooltipShown="onTooltipShown" />
<demo:EventMonitor runat="server" EventNames="TooltipShown TooltipHidden Init Drawn"
    ControlID="SparklineCilentSideEvents" />
function onDrawn(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Drawn');
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
function onTooltipHidden(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipHidden');
function onTooltipShown(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'TooltipShown');

Exporting API

You can export and print the Sparkline control using the client-side ExportTo and Print methods. The following export formats are supported:

  • PNG
  • PDF
  • JPEG
  • SVG
  • GIF

The following client-side events are fired during the export process:

  • Exporting - Fires before sparkline data is exported.
  • Exported - Fires after sparkline data has been exported.
  • FileSaving - Fires before a file with exported data is saved on the user's local storage.
Trace Events:
<dx:BootstrapButton runat="server" ClientSideEvents-Click="exportSparkline" Text="Export Sparkline" UseSubmitBehavior="false" AutoPostBack="false"></dx:BootstrapButton>
<dx:BootstrapButton runat="server" ClientSideEvents-Click="printSparkline" Text="Print Sparkline" UseSubmitBehavior="false" AutoPostBack="false"></dx:BootstrapButton>
<dx:BootstrapSparkline ID="ClientSideMethodsSparkline" ClientInstanceName="ClientSideMethodsSparkline" runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
    <ClientSideEvents Exported="onExported" Exporting="onExporting" FileSaving="onFileSaving" />
<demo:EventMonitor runat="server" EventNames="Exporting Exported FileSaving"
    ControlID="ClientSideMethodsSparkline" />
function onExported(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exported');
function onExporting(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Exporting');
function onFileSaving(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'FileSaving');
function exportSparkline() {
    ClientSideMethodsSparkline.ExportTo("Sparkline", "PNG");
function printSparkline() {
Screen Size
Color Themes
Demo QR Code