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" />
</dx:BootstrapSparkline>
<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" />
</dx:BootstrapSparkline>
<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() {
    ClientSideMethodsSparkline.Print();
}
Screen Size
Color Themes
Demo QR Code