Control a date range with scripting and a slider

Contents[Hide]

1. Overview

The purpose of this article is to incorporate the necessary scripts to add functionality to a slider control. We will be adding a date range view parameter to an already existing chart and attaching a slider control to the value of the view parameter. This will allow you to control the visible date range on a chart by changing the location of the slider knobs.

2. Prerequisites

  • An understanding on how to use browser developer tools
  • An existing dashboard
  • An existing chart with a date hierarchy set to Day level representing the X Axis

3. Setup

3.1. Add a Debugger button

  • Under Components, add a Button to the dashboard
  • Open the properties of the new button and expand the Click action menu
  • Add a script and insert the following code into the script editor
    debugger;
  • Build the script to ensure that it’s valid

3.2. Add a View Parameter

  1. While there is nothing selected on the dashboard, open the Parameters tab at the bottom of the screen
  2. Select Add New
  3. Give the view parameter a meaningful name such as DateViewParameter
  4. Click the checkbox for the date hierarchy in the metric set attached to the desired chart
  5. Now set a date for the Default Values in From and To
    (This will provide a start and end to the chart data)
  6. Click on Parameters to return to the main parameters menu and close the parameters tab

3.3. Add a Slider control

  • Under Components, select Slider and place it on the dashboard
  • In the properties menu of the slider, change the Script Name to a meaningful name such as mySlider

    Example Dashboard with view parameter and slider
    Example Dashboard with view parameter and slider

  • Optional: to disable the slider tooltip that shows the current value, open the Look tab of the Properties panel and tick the Hide Handle Tooltip checkbox.

4. Add the Dashboard Ready script

When the dashboard has finished loading there is a script action that is executed called Ready
(This can found under the properties menu of the dashboard)

  1. Add a script to the Ready action
  2. Copy and paste the following JavaScript code into the Script Editor and change the slider and view parameter names in the script to reflect the names you picked
    // get the correct viewParameter by comparing the name property and store in window.
    var baseViewService = this.getService("BaseViewService");
    var x = baseViewService.currentView.control.viewParameters;
    for (var i = x.length - 1; i >= 0; i--) {
        if (x[i].name == "DateViewParameter") {
            window.dateViewParam = x[i];
        };
    };
    
    // this is to skip the first "Changed" call on the slider. Prevents animation skip on load.
    window.doAnimation = false;
    
    // set the slider range to the first and last date in milliseconds from the DV control.
    var myDates = myChart.metricSetBindings[0].dataResult.cellset.rows;
    mySlider.valueMax = myDates[myDates.length - 1].members[0].memberTime.getTime();
    mySlider.valueMin = myDates[0].members[0].memberTime.getTime();
    
    // set the slider knobs to both ends of the range.
    mySlider.valueFirst = mySlider.valueMin;
    mySlider.valueSecond = mySlider.valueMax;
    
    // set the step to 1 day in milliseconds
    mySlider.valueStep = 1000 * 60 * 60 * 24;
    
    // now that the slider is setup we can now allow the animation.
    window.doAnimation = true; 
  3. Build the script to ensure that it’s valid

Dashboard Ready location and script
Dashboard Ready location and script

5. Add the Slider script

Anytime a knob is moved on the slider there is a script that is executed called Changed
(This can be found under the properties menu of the slider)

  1. Add a script to the Changed action
  2. Paste this code into the script editor and change the slider and view parameter names in the script to reflect the names you picked
    if (doAnimation) {
        // lowerBoundaryValue's memberTime is used to determine where the chart starts.
        // set it to a new date equal to the slider value which is in milliseconds.
        dateViewParam.parameterValue.lowerBoundaryValue.memberTime = new Date(mySlider.valueFirst);
        // upperBoundaryValue's upperBoundaryTime is used to determine where the chart starts.
        // set it to a new date equal to the slider value which is in milliseconds.
        dateViewParam.parameterValue.upperBoundaryValue.upperBoundaryTime = new Date(mySlider.valueSecond);
        // refresh the affected adapters
        dateViewParam.loadAffectedAdaptersData();
    };
  3. Build the script to ensure that it’s valid

Slider Changed location and script
Slider Changed location and script

6. View the dashboard

  • Switch to View or Sandbox mode to test the slider and its new functionality
  • The new functionality should allow you to shift the starting and ending date on the chart with the slider

Example Dashboard with functional slider
Example Dashboard with functional slider

7. Troubleshooting

  • If there is an issue you can open the developer tools in your browser
  • The console tab will allow you to test scripts manually
  • The Debugger button will allow you to pause the dashboard while the developer tools are open
  • This will allow you to access the objects on the dashboard by typing their script name

8. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri