0

Can I dynamically change the dates on the X:Axis using different buttons?

You can build a Klip that uses buttons to dynamically change how the dates are grouped on the X:Axis.   For example, when you click a button labelled Month, the dates on the X:Axis display the data in months, when you click a button labelled Quarter, the data displays in quarters.

To demonstrate how to do this, here is important information about my data set:

  • Column A contains the dates in the format of 1-09-2018
  • Column B contains an associated number (10)
  • Column C contains an associated name of a color (Blue or Black)

To build this Kiip, drag in the following component types into the Klip editor.

  • User Input Control
  • Bar/Line Chart
  • Button (for month)
  • Button (for quarter)

To build the drop-down list so the user can select a color:

  • Select the User Input Control component. 
  • Create a new variable called color with a Klip scope.
  • For Control Label, type in an appropriate name, like Color.
  • For the Values sub-component, select the color column in the data source.
  • To get one unique instance of each color, select the three vertical dots and select Group.

To setup up the buttons:
Select Button 1

  • Create a new variable called timefr and assign it a Klip scope.
  • For Values sub-component, type: “Month”.
  • For Labels sub-component, type: "Month".

Select Button 2

  • In the Properties panel, Use Variable field, select the timefr variable and assign it a Klip scope.
  • For Values sub-component, type: “Quarter”.
  • For Labels sub-component, type: "Quarter".

To setup the Bar/Line chart to display a sum of values for each color type with a monthly or quarterly date range:

  • Select the Bar/Line chart, X:Axis.
  • Select the Properties panel and format as Text.
  • Select the Data panel and use the SWITCH function to reference your timefr variable by typing $, and then build a specific formula for each date range selection (case).

For example,

For “Month”, the DATE_CONVERT function converts the current date format to display the data as year month.
For “Quarter”, the DATE_UNIT function uses the current date format to display the data as year quarter.
Lastly, select the X:Axis and use the three vertical dots to Group the dates and apply a Sort (A-Z).

  • Select the Bar/Line chart, Series.
  • Select the values column in your data source.
  • Select the three vertical dots, Aggregation.  The default is SUM, but you can change this here if you want.

To associate the color drop-down list to the Bar/Line chart:

  • Select the Bar/Line chart component, Properties panel, and select Add Hidden Data button.This adds a new Data sub-component to the Bar/Line Chart.
  • Select the Data panel, select the color column from the data source, and use the three vertical dots to set up a filter to add a condition that matches the color variable.

Use this link to learn more about our Button component.

0 comments

Please sign in to leave a comment.