Skip to main content Skip to complementary content
Qlik Resources

Creating distribution plots

This section describes how to create distribution plots with the Visualization API and qlik-visual.

Creating a basic distribution plot

In this example we want to create a basic distribution plot, containing one dimension and two measures, with a custom title and horizontal orientation.

  1. Create the chart

    Create the container for the chart. The visualization type is distributionplot.

    Visualization API

    app.visualization.create(
  'distributionplot',
  [],
  {}
)

    qlik-visual

    <qlik-visual appid="Tutorial-Golf.qvf"
  type="distributionplot"
  cols='[]'
  options='{}' >
</qlik-visual>
  2. Define the dimension

    Define the dimension as a column.

    [ { "qDef": { "qFieldDefs": [ "=NetScoreName" ], "qFieldLabels": [ "Net result" ] }, "qNullSuppression": true } ]
  3. Define measures

    Define the measures as columns.

    [ { "qDef": { "qFieldDefs": [ "=NetScoreName" ], "qFieldLabels": [ "Net result" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Occurancies", "qDef": "Count(HoID)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0 } } } ]
  4. Define the title in the options

    Then define the title and the orientation in the options.

    { "showTitles": true, "title": "Net score result per hole" }

Result

Example distribution plot

Code examples

Presentation and color settings

In the example we change the way the distribution plot is presented by adding narrow grid line spacing and customizing the colors. All these changes are set in the options.

 

  1. Add narrow grid line spacing

    Changes to the grid line spacing is set in the gridlines object. Disable auto grid lines and set spacing to 3 which means narrow.

    "gridlines": { "auto": false, "spacing": 3 }
  2. Add custom colors to the chart

    You can set the presentation colors of the distribution plot: box color and point color. They are defined in the color object and each array consists of a paletteColor definition where you set the actual color as an index number in the palette or as a HEX string color.

    This example use colors that are not in the default palette, defined by "index": -1. The box color is a lighter shade of blue ("color": "#68b5de") while the point color is a darker shade of blue ("color": "#3a7391").

    "color": { "box": { "paletteColor": { "index": -1, "color": "#68b5de" } }, "point": { "paletteColor": { "index": -1, "color": "#3a7391" } } }

Result

Example distribution plot with color settings

Code examples

Dimension and measure axis settings

In this example we define how the measure axis is presented. This is set in the measureAxis object. If more than one dimension is used, the dimension axis settings are defined in the dimensionAxis object. This example display labels only on the measure axis . The axis also has narrow spacing and a custom range. The visualization consists of only one dimension so no dimension axis settings are needed.

  1. Labels and spacing

    Set to display labels only on the measure axis: "show": "labels".

    Define that narrow spacing should be used: "spacing": 0.5.

    "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5 }
  2. Customize the range

    Enable custom range by setting "autoMinMax": false. Set the mode to display Max: "minMax": "minMax" and then define the minimum and maximum values (0 and 1200).

    "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": false, "minMax": "minMax", "min": 0, "max": 1100 }

Result

Example distribution plot with dimension and measure axis settings

Code examples

Multiple lines using inner and outer dimensions

In this example we add a second dimension which gives us one line for each value of the second (or outer) dimension.

  1. Add the outer dimension as a column
    { "qDef": { "qFieldDefs": [ "Date.autoCalendar.Year" ], "qFieldLabels": [ "Year" ] }, "qNullSuppression": true }
  2. Define the dimension axis

    Since we now have two dimensions we can configure the dimension axis. This example show labels only for the outer dimension.

    "dimensionAxis": { "show": "labels" }
  3. Add sorting

    For distribution plots, sorting is done in the sorting object inside the options. This example is sorted alphabetically in descending order.

    "sorting": { "autoSort": false, "sortCriteria": { "sortByAscii": -1, "sortByLoadOrder": 1 } }

Result

Example distribution plot with multiple dimensions and measures

Code examples

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here