ActiveReports 18 .NET Edition
Report Authors / Design Reports / Design Page/RDLX Reports / Tutorials: Report Controls in Page/RDLX Reports / Sparkline Control
In This Topic
    Sparkline Control
    In This Topic

    Line and Area Sparklines

    Let us create a report that displays the call center data trend compared to the target (times measured in seconds). Each sparkline control will display data for three criteria - call hold time, call duration, and abandoned calls.

    Call Center Dashboard Report with Sparkline control 

    Create a Report

    In the ActiveReports Designer, create a new RDLX report. 

    If you are creating a new report in the Visual Studio Integrated Designer, see Quick Start.

    Bind Report to Data

    As you create a new report, you can configure the report data connection in the Report Wizard. You can also access the Report Data Source  dialog by right-clicking the Data Sources node in the Report Explorer and then selecting the Add Data Source option. This report uses the 'CallCenter.xml' data source that you can download from GitHub. See XML for details on binding to XML data.

    1. On the Choose Data Source Type screen of the wizard, select XML and click Next.
    2. To specify XML File Path, click the Browse button and navigate to the desired file on your system. This report uses the 'CallCenter.xml' sample data source that can be downloaded from GitHub.
    3. Click the Next option and configure the following two datasets - Targets and CallAverages.
    4. Enter Targets into the Name field and select the node from the data tree in the Path section to generate the path. The resulting query is displayed in the Query field.
    5. Click Add to add the second dataset.
    6. Enter CallAverages into the Name field and select the node from the data tree in the Path section to generate the path. The resulting query is displayed in the Query field.
    7. Click Next to proceed to the final screen of the Report Wizard.
    8. Review the summary of the report and click Finish to successfully add the report with the JSON data source.   

    Design Report Layout

    Report with Sparkline control
    1. Drag and drop three TextBox controls and place them one below another. These controls will be the criterion labels. Set their Value property as follows:        
      • TextBox2: Hold Time
      • TextBox3: Call Duration
      • TextBox4: Abandoned
    2. Drag and drop a TextBox control near Hold Time and set its Value to =Last(Fields!AvgHold.Value, "CallAverages").
    3. Drag and drop a TextBox control near Call Duration and set its Value to =Last(Fields!AvgDuration.Value, "CallAverages").
    4. Drag and drop a TextBox control near Abandoned and set its Value to =Last(Fields!Abandonments.Value, "CallAverages").
    5. Drag and drop a TextBox control above the last three TextBoxes and set its Value to 'Actual'.
    6. Drag and drop the Sparkline control against Hold Time and set its Name to HoldTimeSparkline.
    7. Set the following properties of the HoldTimeSparkline to some suitable values, for example:
      • SeriesValue: =Fields!AvgHold.Value / First(Fields!THoldTime.Value, "Targets")
      • LowerBound: 1
      • UpperBound: 1.005
      • RangeVisibility: True            
      • DataSetName: CallAverages
    8. Drag and drop the Sparkline control against Call Duration and set its Name to CallDurationSparkline.
    9. Set the following properties of the CallDurationSparkline to some suitable values, for example:
      • SeriesValue: =Fields!AvgDuration.Value / First(Fields!TDuration.Value, "Targets")
      • LowerBound: 1
      • UpperBound: 1.005
      • RangeVisibility: True            
      • DataSetName: CallAverages
    10. Drag and drop the Sparkline control against Abandoned and set its Name to AbandonementsSparkline.
    11. Set the following properties of the AbandonementsSparkline to some suitable values, for example:
      • SeriesValue: =Fields!Abandonments.Value
      • LowerBound: 1
      • UpperBound: 1.005    
      • RangeVisibility: True
      • DataSetName: CallAverages
         
    12. Drag and drop the TextBox control above the last three sparklines and set its Value to 'Today (compared to target)'.
    13. Drag-drop a TextBox control below the Sparkline controls and set its Value to '(Times measured in seconds)'.
    14. To create the report's title, drag and drop the TextBox control onto the report’s designer and set its Value to 'Call Center Dashboard: Overall Performance'.
    15. Modify the appearance of the report and preview.

    Whisker and Column Sparklines

    You can use a whisker sparkline to render “win/loss/tie” scenarios (for example, sports statistics) or “true/false” scenarios (for example, was the sales goal met or the temperature above average).

    Let us create a report to show the statistics for the football game using Sparkline controls of type Whisker and Column.

    Whisker and Column Sparkline

    Create a Report

    In the ActiveReports Designer, create a new RDLX report. 

    Bind Report to Data

    Connect to a Data Source

    1. As you create a new report, bind data to connect to the 'FootballStatistics.xml' data source on GitHub. See XML Provider page for details on binding with XML data. The connection string for our data is as shown:
      Connection String
      Copy Code 
      xmldoc=C:\Data\FootballStatistics.xml

      Add Data Set

    2. Add the following dataset with the Query as shown:
      Query
      Copy Code 
      //Game

    Design Report Layout

    1. Drag and drop the List data region inside which we will drop all the controls.
      1. Set the DataSetName to 'Games'.
      2. Click open the Property dialog.
      3. Go to Detail Grouping and set the Group on expression to =[Team].
      4. Click OK to close the dialog.
    2. Drag and drop a TextBox control inside the List data region and set its Value to 'Win/Loss Record'
    3. Drag and drop the Sparkline control inside the List data region, below the textbox added in the previous step, and, with the sparkline selected, set the properties as follows:
      • Sparkline Type: Whiskers
      • SeriesValue: Set this property to  =Fields!WinLossTie.Value from the connected data set.
      • FillStyle > FillColor: #f26324
      • Click open the Properties dialog, go to the Sorting page, and set the expression to =Fields!Date.Value and Direction to 'Ascending'
    4. Now drag and drop a few more text boxes inside the List data region to show passing and rushing trends and some sparklines to visualize the corresponding data as shown:
      Whiskers Sparkline
    5. Fill in the text in the text boxes as shown above, and set the corresponding sparkline properties as follows:
      Under 'Passing Trends',
      • Select the sparkline next to 'Completions' text and set the SeriesValue to =Fields!PassCMP.Value
      • Select the sparkline next to 'Yards' and set the SeriesValue to =Fields!PassYDS.Value
      • Select the sparkline next to 'Interceptions' and set the SeriesValue to =Fields!PassINT.Value

      Under 'Rushing Trends',

      • Select the sparkline next to 'Carries' and set the SeriesValue to =Fields!RushATT.Value
      • Select the sparkline next to 'Yards' and set the SeriesValue to =Fields!RushYDS.Value
    6. To set the common properties of the sparklines added in the previous step, select the following properties:
      • SparklineType: Columns7
      • FillStyle > FillColor: #f26324
      • Click open the Properties dialog, go to the Sorting page and set the expression to =Fields!Date.Value and Direction to 'Ascending'
    7. To create the report's title, drag and drop the TextBox control inside the List data region on the top of the report and set its Value to =[Team].
    8. Modify the appearance of the report and preview.

    Stacked Bar Sparkline

    Let us create a report that shows the stacked bar sparkline use case. We will build our player performance data in the report to show the comparative scores of two players.

    Sparkline Stacked Bar

    Create a Report

    In the ActiveReports Designer, create a new RDLX report. 

    Bind Report to Data

    Connect to a Data Source

    1. As you create a new report, bind data to the players.csv file. See CSV Provider page for details on binding with CSV data. The connection string for our data is as shown:
      Connection String
      Copy Code 
      Path=data\\MyOrders.csv;Locale=en-US;TextQualifier=";ColumnsSeparator=,;RowsSeparator=\r\n;HasHeaders=True

    Design Report Layout

    Sparkline Stacked Bar

    1. Drag and drop the Tablix data region onto the report's designer.
    2. Drag and drop the [Round] field onto the Row Group area.
    3. In the Values area, write the expression =Sum([Points]) to calculate the sum of points.
    4. To add a new column, right-click anywhere on the second column of the Tablix and select Insert Column > Outside Group.
    5. Drag and drop the Sparkline control in the third cell.
    6. With the Sparkline selected, set the following properties:
      • DataSetName: Players
      • SeriesValue: =Fields!Points.Value
      • SparklineType: StackedBar
      • FillStyle > FillColor: Coral
    7. Modify the appearance of the report and preview.
    See Also
    Tutorial: Sparkline Control