DOUGSKEEZ / qlik-sense-dygraphs

A dygraphs chart extension for Qlik Sense

dygraphs for Qlik Sense

Create customizable, interactive charts with Qlik Sense using the dygraphs library.

Table of Contents

• Description
• Screenshots
• Installation
• Usage
  • Default Interaction
  • Graph Options
    • Input Data
    • Data Line Display
    • Data Line Properties
    • Labels
    • Legend
    • Axes and Chart Area
    • Value Display
    • Interactive Elements
  • Per-Series Options
• License

---

Description

This visualization extension allows dygraphs charts to be integrated with Qlik Sense.  It makes use of the dygraphs JavaScript library to produce interactive, zoomable charts.  The extension incorporates a selection of the dygraphs library's customization options to offer numerous possibilities for chart configuration, display and interaction.

Screenshots

Installation

1. Download the content.

2. Deploy the extension to your Qlik Sense environment.

   • Qlik Sense Desktop: Copy the entire contents of the .zip file to
     "C:\Users\<UserName>\Documents\Qlik\Sense\Extensions\qs-dygraphs"

   • Qlik Sense Server: Follow the instructions for "Deploying visualizations in Qlik Sense"

3. (Optional) Import the demo app to your Qlik Sense environment.

   • Qlik Sense Desktop: Copy the dygraphs for Qlik Sense demo .qvf file from the demo folder to "C:\Users\<UserName>\Documents\Qlik\Sense\Apps"

   • Qlik Sense Server: Follow the instructions for "Importing apps"

Usage

1. Open a Qlik Sense app sheet, start Edit mode, then drag and drop dygraphs from the Charts menu onto the sheet.

2. Select the x-Axis Data Type and Data Series Source from the Input Data section in Graph Options.

3. Set dimensions and measures.

4. Configure the chart using Graph Options and/or Per-Series Options.

Default Interaction

A dygraphs chart is interactive by default.  Move the mouse pointer over the chart to highlight individual values.  Click and drag horizontally or vertically to zoom and Shift-click and drag to pan.  Restore the initial extent of the chart by double-clicking.

• Highlight: mouse over

• Zoom: click-drag (horizontal or vertical)

• Pan: Shift + click-drag

• Reset: double-click

Graph Options

Most of the configuration settings for the dygraphs chart object are found in the Graph Options menu.  Here you can specify the type of input data and customize the look of the chart.

Settings in the Graph Options menu are applied globally, i.e. to all data series displayed in the dygraphs chart object.  Some of these properties may be overridden by settings applied to individual data series if Per-Series Options are enabled.  To apply settings to individual data series, the input data series source must be set to Measures.

The Graph Options menu consists of eight sections:

• Input Data
• Data Line Display
• Data Line Properties
• Labels
• Legend
• Axes and Chart Area
• Value Display
• Interactive Elements

The options within each section are described below.

Graph Options

Graph Options – sections expanded

Input Data

• x-Axis Data Type (Dimension 1) - The data type for values on the x-axis, provided by the first dimension.  This may be set to either Numeric or Date. (default: Numeric)

• Data Series Source - The source of data series to be displayed. (default: Dimension 2)
  
  When this is set to Dimension 2, a second dimension and one measure are required.  The second dimension provides the set of data series to be displayed and the measure provides values for the data series.
  
  When this is set to Measures, one dimension (x-axis values) and at least one measure are required.  Choose a measure for each individual data series and its values – a field or an expression may be used.  Set the label property of each measure to provide a name for the data series in the chart's legend.  In this mode, per-series line display and properties settings may be applied to customize the appearance of each data series individually.

Data Line Display

• Presentation - How to plot each data series on the chart.  This option may also be set on a per-series basis. (default: Line Chart)

  • Line Chart - Data points for each series are plotted as a line.
  • Bar Chart - Data points for each series are plotted as vertical bars.
  • Multiple-Column Bar Chart - At each x-value, data points for each series are plotted as adjacent vertical bars.
  • Candlestick Chart - Displays trends in price movements.  Four measures are required, consisting of open, close, high and low values, respectively.  Data Series Source must be set to Measures.
  • Boxplot Chart - Displays a box-and-whisker-plot to represent the five-number summary (minimum, maximum, median, lower quartile and upper quartile) of y-values at each x-value.  Two dimensions and one measure are required.  Data Series Source must be set to Dimension 2.

• Data Points - Draw a small dot at each data point in addition to the line that passes through.  This option may also be set on a per-series basis. (default: Off)

• Connect Separated Data Points - If there are x-values for which a series is missing data, draw a continuous line for the series instead of showing gaps where values are missing. (default: Off)

• Error Bars - When enabled, the Low Error Value and High Error Value expressions for a measure will be evaluated.   If either Low Error Value or High Error Value is set, an error bar will be drawn for each point between this value and the series. If both Low Error Value and High Error Value are set, error bars will be drawn for each point between low and high, with the series itself going through the middle. (default: Off)

• Fill Graph - Fill the area underneath each data series.  This option is not compatible with error bars.  This option may also be set on a per-series basis. (default: Off)

• Stacked Graph - Stack series on top of one another rather than drawing them independently.  Series will be stacked from top to bottom in the same order that measures are arranged in the properties panel. (default: Off)

• Step Plot - Display the graph as a step plot instead of a line plot.  This option may also be set on a per-series basis. (default: Off)

Data Line Properties

• Stroke Pattern - The pattern of the line to plot for each data series.
  (default: Solid Line)

• Stroke Width - The width of the line connecting data points for each series.
  (float; default: 1.0)

• Data Series Colors - List of colors for the data series.  If not specified, equally-spaced points around a color wheel are used.  A color may be listed in hexadecimal notation, rgb function notation or by keyword identifier (e.g. "#FF0000" or "rgb(255,0,0)" or "red" ).  Separate colors in the list with a comma.  If the Expression Editor is used to create the list, wrap the entire string in single quotation marks.
  (string; default: see description)

• Point Size - The size of the dot to draw on each point, in pixels, when Data Points are turned on.   This also controls the size of dots for "isolated" points, with missing data on either side, which are drawn by default. (integer; default: 1)

• Highlighted Point Size - The size of the dot drawn over highlighted points, in pixels.
  (integer; default: 3)

• Stroke Border Width - The width of the border to draw around graph lines for data series, in pixels, to make crossing lines more easily distinguishable.  Useful for graphs with many lines. (float; default: null)

• Stroke Border Color - The color of the border drawn around graph lines when Stroke Border Width is set. (string; default: white)

• Line Smoothing - Draw smooth lines between points using Bézier curves.
  This option is not compatible with Error Bars, Data Points, Fill Graph or Stacked Graph. (float; default: null)

All Data Line Properties options may also be set on a per-series basis.

Labels

• Graph Title - Text to display above the chart, centered.  HTML character entities may be used in addition to plain text. (text; default: null)

• Graph Title Font Size - Size of the font to use for the graph title, in pixels.
  (integer; default: 20)

• x-Axis Title - Text to display below the chart's x-axis.  HTML character entities may be used in addition to plain text. (text; default: null)

• y-Axis Title - Text to display to the left of the chart's primary/default y-axis.  HTML character entities may be used in addition to plain text. (text; default: null)

• Secondary y-Axis Title - Text to display to the right of the chart's secondary y-axis, when it is enabled.  HTML character entities may be used in addition to plain text. (text; default: null)

• Axis Title Font Size - Size of the font to use for both the x-axis and y-axis titles, in pixels. (integer; default: 16)

• Axis Label Font Size - Size of the font to use for both the x-axis and y-axis labels, in pixels. (integer; default: 14)

Legend

• Legend Display Style - Show/hide and position options for legend display.
  (default: Mouseover)

• Legend Highlight Style - Style to use for highlighting text in the legend, for the data series closest to the mouse pointer when Highlight Closest Series is turned on.  This may be set to Border, Fill or Single Series. (default: Border)

• Legend Font Size - Size of the font to use for the legend text, in pixels.
  (integer; default 14)

• Stacked Legend Items - Place legend items on separate lines. (default: Off)

Axes and Chart Area

• x-Axis Gridlines - Display vertical gridlines under the chart. (default: On)

• y-Axis Gridlines - Display horizontal gridlines under the chart for the primary/default y-axis. (default: On)

• Secondary y-Axis Gridlines - Display horizontal gridlines under the chart for the secondary y-axis, when it is enabled. (default: Off)

• Independent y-Axes Ticks - Set tick positions for y-axes independently when the secondary y-axis is enabled.  By default, ticks on the secondary y-axis are aligned to those of the primary y-axis. (default: Off)

• x-Axis Padding - Amount of extra space around the x-axis value range to ensure points at the edges remain visible, in pixels. (float; default: 0)

• y-Axis Padding - Amount of extra space around the y-axis value range to ensure points at the edges remain visible, in pixels. (float; default: null)

• x-Axis Range (low/earliest, high/latest) - Explicitly set the initial horizontal range of the graph to a low and high value.   If the x-axis data consists of dates, use a date string format (e.g. "2015/08/26") for these values.  Enter numbers if the x-axis data type is numeric.  Separate the two values with a comma. (array; default: full range of input)

• y-Axis Range (low, high) - Explicitly set the vertical range of the graph to a low and high value.  Separate the two values with a comma.  If either limit is unspecified, it will be calculated automatically (e.g. [null, 30] to automatically calculate just the lower bound). (array; default: full range of input)

Value Display

• Digits Before Decimal - Number of digits to display before the decimal point.  Numbers with more digits to the left of the decimal than this value will be displayed in scientific notation. (integer; default: 6)

• Max Digits After Decimal - Maximum number of digits to display after the decimal point (trailing zeros are not displayed).  If a number has absolute value less than 0.1 to the power of this value, it will be displayed in scientific notation. (integer; default: null)

• Fixed Digits After Decimal - Number of digits to display after the decimal point for y-axis labels and values displayed on mouseover. (integer; default: null)

• Significant Digits (Scientific Mode) - Fixed number of significant figures to display, in scientific notation.  By default, numbers are displayed with a fixed number of digits after the decimal point. (integer; default: null)

• Show K/M/B for thousands/millions/billions (base 10) on y-axis - Base 10 abbreviations for y-axis labels. (default: Off)

• Show K/M/G for kilo/Mega/Giga (base 2) on y-axis - Base 2 abbreviations for y-axis labels. (default: Off)

• UTC Date/Time Labels - Show date/time labels according to UTC instead of local time. (default: Off)

• Ticker and Label Format (x-axis) - Specify how tick marks and labels will be generated and displayed on the x-axis.  When set to Auto, tick marks and labels will be set automatically according to the input data.  When set to any of the 1:1 date options, one tick mark and label will be generated per value in the x-value range.  This is particularly useful for bar charts when it is desirable to display one label per bar.  However, labels will be crowded if the dataset consists of more than ten or so values, since a label is generated for each x-value.  For larger datasets, this can be mitigated by setting the x-Axis Range to include a small subset of values and enabling Fixed Zoom.  Turn on UTC Date/Time Labels to correct for timezone offsets if labels display incorrect values (e.g. when input dates include only the year and timezone offset is negative).
  (default: Auto)

  • Auto - Set tick marks and labels automatically.
  • MM/DD/YYYY - Set tick marks automatically and use 'MM/DD/YYYY' format for date labels on the x-axis and in the legend.
  • DD/MM/YYYY - Set tick marks automatically and use 'DD/MM/YYYY' format for date labels on the x-axis and in the legend.
  • Year (1:1) - Show only the year for date labels on the x-axis and in the legend.
  • Month (1:1) - Show only the month name for date labels on the x-axis and in the legend.
  • Weekday (1:1) - Show only the weekday name for date labels on the x-axis and in the legend.

Interactive Elements

• Highlight Closest Series - When set, the data series closest to the mouse pointer will be highlighted.  Highlighted series will be rendered with thicker lines and larger data points while other series will be rendered with partial transparency. (default: Off)

• Range Selector - Enable the range selector widget.  This disables the default click-drag zoom interaction. (default: Off)

• Zoom Animation - Animate transitions between zoom windows when interacting with the chart. (default: Off)

• Fixed Zoom - Keep the zoom level fixed to the initial horizontal extent of the chart and disable zooming.  Click-drag will pan instead. (default: Off)

• Pan Edge Limit - A value representing the farthest a graph may be panned, relative to the display.  For example, a value of 0.1 means that the graph can only be panned up to 10% beyond the edges of the displayed values.
  (float; default: no bounds)

Per-Series Options

Per-Series Options allow you to configure display properties of each plotted data series individually.  These options may be applied only when Data Series Source is set to Measures, with the exception of Low Error Value and High Error Value , as noted below.  Per-series options are found in the properties section for each measure that is set.

Per-Series Options (in Measures section)

• Axis - Assign the data series to either the primary y-axis (left) or the secondary y-axis (right).  If a data series is assigned to the secondary y-axis, gridlines and ticks for the secondary y-axis may be configured with y2-Axis Gridlines and Independent y-Axes Ticks, respectively (see Axes and Chart Area).
  (default: Primary)

• Low Error Value - Used in conjunction with the Error Bars setting (see Data Line Display).  If set, an error bar will be drawn below each point in the data series between this value and the line plot for the data series.  A field or an expression may be used.
  When Data Series Source is set to Dimension 2 (see Input Data), an error bar will be displayed below each data series provided by the second dimension.
  (default: null)

• High Error Value - Used in conjunction with the Error Bars setting (see Data Line Display).  If set, an error bar will be drawn above each point in the data series between this value and the line plot for the data series.  A field or an expression may be used.
  When Data Series Source is set to Dimension 2 (see Input Data), an error bar will be displayed above each data series provided by the second dimension.
  (default: null)

• Presentation - How to plot the data series on the chart. (default: Line Chart)

  • Line Chart - Data points are plotted as a line.
  • Bar Chart - Data points are plotted as vertical bars.

• Data Points - Draw a small dot at each data point, in addition to the line that passes through. (default: Off)

• Fill Graph - Fill the area underneath the graph. (default: Off)

• Step Plot - Display the data series as a step plot instead of a line plot. (default: Off)

• Stroke Pattern - The pattern of the line to draw for the data series.
  (default: Solid Line)

• Stroke Width - The width of the line to draw for the data series. (float; default: 1.0)

• Color - The color of the data series.  This can be of the form "#6A5ACD" or "rgb(106,90,205)" or "slateblue". (string; default: null)

• Point Size - The size of the dot to draw on each point, in pixels, when Data Points are turned on. (integer; default: 1)

• Highlighted Point Size - The size of the dot to draw over a point when it is highlighted, in pixels. (integer; default: 3)

• Stroke Border Width - The width of the border to draw around the line for the data series, in pixels. (float; default: null)

• Stroke Border Color - The color of the border drawn around the data series line when Stroke Border Width is set. (string; default: white)

• Line Smoothing - Draw a smooth line between points using Bézier curves.  This option is not compatible with Error Bars, Data Points or Fill Graph.
  (float; default: null)

License

Copyright © 2015 Daniel Pierre

Released under the MIT license.