Sparkline Charts

Example
Basic Sparklines inside Data Table Columns
Customer IDTotal FreightLineAreaBarWinLoss
ALFKI$225.58
ANATR$97.42
ANTON$268.52
AROUT$471.95
BERGS$1,559.52
BLAUS$168.26
BLONP$623.66
BOLID$191.17
BONAP$1,357.87
BOTTM$793.95

  This Sparkline example includes:

  • Custom theme
  • Sparkline.Line, .Area, .Bar, and .WinLoss elements, embedded in data table
  • Minimal attribute settings

<DataTable SortArrows="True" ID="dtSparklines1" Width="800" WidthScale="px" AjaxPaging="True" Caption="Basic Sparklines inside data table">
  <DataLayer Type="XMLFile" XMLFile="NW_Orders.xml" ID="dlOrders1">
    <GroupFilter GroupColumn="CustomerID">
      <GroupAggregateColumn AggregateColumn="Freight" AggregateFunction="Sum" ID="aggFreight" />
    </GroupFilter>
    <SequenceColumn ID="seq" />
    <ConditionFilter Condition="&lt;=10" />
  </DataLayer>
  <DataTableColumn ID="colCustomerID" Header="Customer ID">
    <Label ID="lblCustomerID" Caption="" />
    <DataColumnSort DataColumn="CustomerID" />
  </DataTableColumn>
  <DataTableColumn ID="colTotalFreight" Header="Total Freight" Class="ThemeAlignRight ThemeAlignCenter">
    <Label ID="lblFreight" Caption="" Format="Currency" />
    <DataColumnSort DataColumn="aggFreight" DataType="Number" />
  </DataTableColumn>
  <DataTableColumn Header="Line" ID="dtcLine">
    <Sparkline Type="Line" SparklineDataColumn="Freight" ChartHeight="15" ID="spkLine" ChartWidth="100" AggregateFunction="Sum" TimePeriod="Month" TimePeriodDataColumn="OrderDate">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkLineXML">
        <Note Note="Use Contain Filter: Sparkline data needs to be limited to that related to current data table row." />
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
    </Sparkline>
  </DataTableColumn>
  <DataTableColumn Header="Area" ID="dtcArea">
    <Sparkline Type="Area" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkArea" AggregateFunction="Sum" TimePeriodDataColumn="OrderDate" TimePeriod="Month">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkAreaXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
    </Sparkline>
  </DataTableColumn>
  <DataTableColumn Header="Bar" ID="dtcBar">
    <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkBar" AggregateFunction="Average" TimePeriod="Month" TimePeriodDataColumn="OrderDate">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
    </Sparkline>
  </DataTableColumn>
  <DataTableColumn Header="WinLoss" ID="dtcWinLoss">
    <Sparkline Type="WinLoss" SparklineDataColumn="Freight" ChartHeight="15" ChartWidth="100" ID="spkWinLoss" AggregateFunction="Sum" WinLossThresholdValue="50" TimePeriod="Month" TimePeriodDataColumn="OrderDate">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkWinLossXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
    </Sparkline>
  </DataTableColumn>
</DataTable>
<DataTable SortArrows="True" ID="dtSparklines1" Width="800" WidthScale="px" AjaxPaging="True" Caption="Basic Sparklines inside data table"> <DataLayer Type="XMLFile" XMLFile="NW_Orders.xml" ID="dlOrders1"> <GroupFilter GroupColumn="CustomerID"> <GroupAggregateColumn AggregateColumn="Freight" AggregateFunction="Sum" ID="aggFreight" /> </GroupFilter> <SequenceColumn ID="seq" /> <ConditionFilter Condition="&lt;=10" /> </DataLayer> <DataTableColumn ID="colCustomerID" Header="Customer ID"> <Label ID="lblCustomerID" Caption="" /> <DataColumnSort DataColumn="CustomerID" /> </DataTableColumn> <DataTableColumn ID="colTotalFreight" Header="Total Freight" Class="ThemeAlignRight ThemeAlignCenter"> <Label ID="lblFreight" Caption="" Format="Currency" /> <DataColumnSort DataColumn="aggFreight" DataType="Number" /> </DataTableColumn> <DataTableColumn Header="Line" ID="dtcLine"> <Sparkline Type="Line" SparklineDataColumn="Freight" ChartHeight="15" ID="spkLine" ChartWidth="100" AggregateFunction="Sum" TimePeriod="Month" TimePeriodDataColumn="OrderDate"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkLineXML"> <Note Note="Use Contain Filter: Sparkline data needs to be limited to that related to current data table row." /> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> </Sparkline> </DataTableColumn> <DataTableColumn Header="Area" ID="dtcArea"> <Sparkline Type="Area" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkArea" AggregateFunction="Sum" TimePeriodDataColumn="OrderDate" TimePeriod="Month"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkAreaXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> </Sparkline> </DataTableColumn> <DataTableColumn Header="Bar" ID="dtcBar"> <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkBar" AggregateFunction="Average" TimePeriod="Month" TimePeriodDataColumn="OrderDate"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> </Sparkline> </DataTableColumn> <DataTableColumn Header="WinLoss" ID="dtcWinLoss"> <Sparkline Type="WinLoss" SparklineDataColumn="Freight" ChartHeight="15" ChartWidth="100" ID="spkWinLoss" AggregateFunction="Sum" WinLossThresholdValue="50" TimePeriod="Month" TimePeriodDataColumn="OrderDate"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkWinLossXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> </Sparkline> </DataTableColumn> </DataTable>
...with Custom Colors, Tooltip Panels, and DrillDown
Customer IDTotal FreightLineAreaBarWinLoss
ALFKI$225.58
ANATR$97.42
ANTON$268.52
AROUT$471.95
BERGS$1,559.52
BLAUS$168.26
BLONP$623.66
BOLID$191.17
BONAP$1,357.87
BOTTM$793.95

  This Sparkline example includes:

  • Sparkline.Line, .Area, .Bar, and .WinLoss elements, embedded in data table
  • Custom color settings
  • Tooltip panels for more info
  • Click to drilldown, passing Customer ID

<DataTable SortArrows="True" ID="dtSparklines2" Width="800" WidthScale="px" AjaxPaging="True" Caption="...with Custom Colors, Tooltip Panels, and DrillDown">
  <DataLayer Type="XMLFile" XMLFile="NW_Orders.xml" ID="dlOrders2">
    <GroupFilter GroupColumn="CustomerID">
      <GroupAggregateColumn AggregateColumn="Freight" AggregateFunction="Sum" ID="aggFreight" />
    </GroupFilter>
    <SequenceColumn ID="seq" />
    <ConditionFilter Condition="&lt;=10" />
  </DataLayer>
  <DataTableColumn ID="colCustomerID" Header="Customer ID">
    <Label ID="lblCustomerID" Caption="" />
    <DataColumnSort DataColumn="CustomerID" />
  </DataTableColumn>
  <DataTableColumn ID="colTotalFreight" Header="Total Freight" Class="ThemeAlignRight ThemeAlignCenter">
    <Label ID="lblFreight" Caption="" Format="Currency" />
    <DataColumnSort DataColumn="aggFreight" DataType="Number" />
  </DataTableColumn>
  <DataTableColumn Header="Line" ID="dtcLine">
    <Sparkline Type="Line" SparklineDataColumn="Freight" ChartHeight="15" ID="spkLine" LineWidth="2" ChartWidth="100" AggregateFunction="Sum" Color="Green" BackgroundColor="Beige" TimePeriod="Month" TimePeriodDataColumn="OrderDate">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkLineXML">
        <Note Note="Use Contain Filter: Sparkline data needs to be limited to that related to current data table row." />
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
      <Action Type="Report">
        <Target Type="Report" Report="ChartCanvas.DrillDownTarget" />
        <LinkParams PassedData="" />
      </Action>
    </Sparkline>
    <TooltipPanel ID="ttpLine" Width="200" WidthScale="px">
      <Label Caption="Total Monthly Freight line chart&#xD;&#xA;for customer &quot;&quot;" ID="lblTooltip" />
    </TooltipPanel>
  </DataTableColumn>
  <DataTableColumn Header="Area" ID="dtcArea">
    <Sparkline Type="Area" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkArea" AggregateFunction="Sum" Color="red" ChartSymbolEdgeColor="blue" AreaGradientColor="blue" TimePeriodDataColumn="OrderDate" TimePeriod="Month">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkAreaXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
      <Action Type="Report">
        <Target Type="Report" Report="ChartCanvas.DrillDownTarget" />
        <LinkParams PassedData="" />
      </Action>
    </Sparkline>
    <TooltipPanel ID="ttpArea" Width="200" WidthScale="px">
      <Label Caption="Total Monthly Freight area chart for customer &quot;&quot;" ID="lblTooltip" />
    </TooltipPanel>
  </DataTableColumn>
  <DataTableColumn Header="Bar" ID="dtcBar">
    <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkBar" AggregateFunction="Average" TimePeriod="Month" TimePeriodDataColumn="OrderDate" Color="#B3AA00">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
      <Action Type="Report">
        <Target Type="Report" Report="ChartCanvas.DrillDownTarget" />
        <LinkParams PassedData="" />
      </Action>
    </Sparkline>
    <TooltipPanel ID="ttpBar" Width="200" WidthScale="px">
      <Label Caption="Average Monthly Freight bar chart for customer &quot;&quot;" ID="lblTooltip" />
    </TooltipPanel>
  </DataTableColumn>
  <DataTableColumn Header="WinLoss" ID="dtcWinLoss">
    <Sparkline Type="WinLoss" SparklineDataColumn="Freight" Color="green" ChartHeight="15" ChartWidth="100" ID="spkWinLoss" NegativeColor="red" AggregateFunction="Sum" WinLossThresholdValue="50" TimePeriod="Month" TimePeriodDataColumn="OrderDate">
      <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkWinLossXML">
        <ContainFilter DataColumn="CustomerID" SearchString="" />
      </DataLayer>
      <Action Type="Report">
        <Target Type="Report" Report="ChartCanvas.DrillDownTarget" />
        <LinkParams PassedData="" />
      </Action>
    </Sparkline>
    <TooltipPanel ID="ttpWinLoss" Width="200" WidthScale="px">
      <Label Caption="Monthly freight variations with respect to threshold value (50) for &quot;&quot;&#xD;&#xA;" ID="lblTooltip" />
    </TooltipPanel>
  </DataTableColumn>
</DataTable>
<DataTable SortArrows="True" ID="dtSparklines2" Width="800" WidthScale="px" AjaxPaging="True" Caption="...with Custom Colors, Tooltip Panels, and DrillDown"> <DataLayer Type="XMLFile" XMLFile="NW_Orders.xml" ID="dlOrders2"> <GroupFilter GroupColumn="CustomerID"> <GroupAggregateColumn AggregateColumn="Freight" AggregateFunction="Sum" ID="aggFreight" /> </GroupFilter> <SequenceColumn ID="seq" /> <ConditionFilter Condition="&lt;=10" /> </DataLayer> <DataTableColumn ID="colCustomerID" Header="Customer ID"> <Label ID="lblCustomerID" Caption="" /> <DataColumnSort DataColumn="CustomerID" /> </DataTableColumn> <DataTableColumn ID="colTotalFreight" Header="Total Freight" Class="ThemeAlignRight ThemeAlignCenter"> <Label ID="lblFreight" Caption="" Format="Currency" /> <DataColumnSort DataColumn="aggFreight" DataType="Number" /> </DataTableColumn> <DataTableColumn Header="Line" ID="dtcLine"> <Sparkline Type="Line" SparklineDataColumn="Freight" ChartHeight="15" ID="spkLine" LineWidth="2" ChartWidth="100" AggregateFunction="Sum" Color="Green" BackgroundColor="Beige" TimePeriod="Month" TimePeriodDataColumn="OrderDate"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkLineXML"> <Note Note="Use Contain Filter: Sparkline data needs to be limited to that related to current data table row." /> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> <Action Type="Report"> <Target Type="Report" Report="ChartCanvas.DrillDownTarget" /> <LinkParams PassedData="" /> </Action> </Sparkline> <TooltipPanel ID="ttpLine" Width="200" WidthScale="px"> <Label Caption="Total Monthly Freight line chart&#xD;&#xA;for customer &quot;&quot;" ID="lblTooltip" /> </TooltipPanel> </DataTableColumn> <DataTableColumn Header="Area" ID="dtcArea"> <Sparkline Type="Area" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkArea" AggregateFunction="Sum" Color="red" ChartSymbolEdgeColor="blue" AreaGradientColor="blue" TimePeriodDataColumn="OrderDate" TimePeriod="Month"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkAreaXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> <Action Type="Report"> <Target Type="Report" Report="ChartCanvas.DrillDownTarget" /> <LinkParams PassedData="" /> </Action> </Sparkline> <TooltipPanel ID="ttpArea" Width="200" WidthScale="px"> <Label Caption="Total Monthly Freight area chart for customer &quot;&quot;" ID="lblTooltip" /> </TooltipPanel> </DataTableColumn> <DataTableColumn Header="Bar" ID="dtcBar"> <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="100" ChartHeight="15" ID="spkBar" AggregateFunction="Average" TimePeriod="Month" TimePeriodDataColumn="OrderDate" Color="#B3AA00"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> <Action Type="Report"> <Target Type="Report" Report="ChartCanvas.DrillDownTarget" /> <LinkParams PassedData="" /> </Action> </Sparkline> <TooltipPanel ID="ttpBar" Width="200" WidthScale="px"> <Label Caption="Average Monthly Freight bar chart for customer &quot;&quot;" ID="lblTooltip" /> </TooltipPanel> </DataTableColumn> <DataTableColumn Header="WinLoss" ID="dtcWinLoss"> <Sparkline Type="WinLoss" SparklineDataColumn="Freight" Color="green" ChartHeight="15" ChartWidth="100" ID="spkWinLoss" NegativeColor="red" AggregateFunction="Sum" WinLossThresholdValue="50" TimePeriod="Month" TimePeriodDataColumn="OrderDate"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkWinLossXML"> <ContainFilter DataColumn="CustomerID" SearchString="" /> </DataLayer> <Action Type="Report"> <Target Type="Report" Report="ChartCanvas.DrillDownTarget" /> <LinkParams PassedData="" /> </Action> </Sparkline> <TooltipPanel ID="ttpWinLoss" Width="200" WidthScale="px"> <Label Caption="Monthly freight variations with respect to threshold value (50) for &quot;&quot;&#xD;&#xA;" ID="lblTooltip" /> </TooltipPanel> </DataTableColumn> </DataTable>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis orci nec metus dignissim tincidunt. Ut malesuada egestas est in porta. Fusce placerat orci ut elit dictum vulputate. Nulla et eros in lectus ullamcorper facilisis. Donec id neque augue, sed vulputate mauris. Nullam ut massa nec nisl aliquam suscipit. Donec commodo, nulla non mattis ullamcorper, quam mauris imperdiet nisl, quis placerat sapien arcu a lacus. Sed porta augue sit amet eros eleifend lobortis. Nam commodo luctus purus, in gravida risus congue.

Nullam ut massa nec

  This Sparkline example includes:

  • Sparkline.Bar, embedded in HTML table
  • Custom theme
  • Custom color settings

<Rows Width="800" WidthScale="px">
  <Row>
    <Column ID="colText" Width="65" WidthScale="%" Class="font11pt,ThemeAlignLeft">
      <Label Caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis orci nec metus dignissim tincidunt. Ut malesuada egestas est in porta. Fusce placerat orci ut elit dictum vulputate. Nulla et eros in lectus ullamcorper facilisis. Donec id neque augue, sed vulputate mauris. Nullam ut massa nec nisl aliquam suscipit. Donec commodo, nulla non mattis ullamcorper, quam mauris imperdiet nisl, quis placerat sapien arcu a lacus. Sed porta augue sit amet eros eleifend lobortis. Nam commodo luctus purus, in gravida risus congue." ID="lblText" />
    </Column>
    <Column ID="colSparkline" Class="ThemeAlignCenter">
      <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="170" ChartHeight="50" Color="DarkOrange" ID="spkBar2" AggregateFunction="Average" TimePeriod="Week" TimePeriodDataColumn="OrderDate" BackgroundColor="AliceBlue">
        <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML2">
          <ContainFilter DataColumn="CustomerID" SearchString="ALFKI" />
        </DataLayer>
      </Sparkline>
      <LineBreak LineCount="2" />
      <Label Caption="Nullam ut massa nec" ID="lblChartCaption" Class="font9pt" />
    </Column>
  </Row>
</Rows>
<Rows Width="800" WidthScale="px"> <Row> <Column ID="colText" Width="65" WidthScale="%" Class="font11pt,ThemeAlignLeft"> <Label Caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis orci nec metus dignissim tincidunt. Ut malesuada egestas est in porta. Fusce placerat orci ut elit dictum vulputate. Nulla et eros in lectus ullamcorper facilisis. Donec id neque augue, sed vulputate mauris. Nullam ut massa nec nisl aliquam suscipit. Donec commodo, nulla non mattis ullamcorper, quam mauris imperdiet nisl, quis placerat sapien arcu a lacus. Sed porta augue sit amet eros eleifend lobortis. Nam commodo luctus purus, in gravida risus congue." ID="lblText" /> </Column> <Column ID="colSparkline" Class="ThemeAlignCenter"> <Sparkline Type="Bar" SparklineDataColumn="Freight" ChartWidth="170" ChartHeight="50" Color="DarkOrange" ID="spkBar2" AggregateFunction="Average" TimePeriod="Week" TimePeriodDataColumn="OrderDate" BackgroundColor="AliceBlue"> <DataLayer Type="XMLFile" XMLFile="NW_SparklineOrderInfo.xml" ID="dlSparkBarXML2"> <ContainFilter DataColumn="CustomerID" SearchString="ALFKI" /> </DataLayer> </Sparkline> <LineBreak LineCount="2" /> <Label Caption="Nullam ut massa nec" ID="lblChartCaption" Class="font9pt" /> </Column> </Row> </Rows>