Skip to main content

Creating combo charts

This section describes how to create combo charts with the Visualization API and qlik-visual.

Creating a basic combo chart

In this example we want to create a basic combo chart, containing one dimension and two measures, and with a custom title. The chart applies custom sorting.

  1. Create the chart

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

    app.visualization.create(
      'combochart',
      [],
      {}
    )
    <qlik-visual appid="Tutorial-Golf.qvf"
      type="combochart"
      cols='[]'
      options='{}' >
    </qlik-visual>
  2. Define the dimension

    Define the dimension as a column. In this example we use a calculated dimension that does not include null values: "qNullSuppression": true.

    [ { "qDef": { "qFieldDefs": [ "=If(Par<>3,TClubName)" ], "qFieldLabels": [ "Tee club" ] }, "qNullSuppression": true } ]
  3. Define measures

    Define the measures as columns. The first measure is to be presented as a bar on the primary axis: "series": { "type": "bar","axis": 0}. The second measure is to be presented as a line on the primary axis: "series": { "type": "line","axis": 0}.

    [ { "qDef": { "qFieldDefs": [ "=If(Par<>3,TClubName)" ], "qFieldLabels": [ "Tee club" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Avg", "qDef": "Avg(DrDist)", "series": { "type": "bar", "axis": 0 } } }, { "qDef": { "qLabel": "Max", "qDef": "Max(DrDist)", "series": { "type": "line", "axis": 0 } } } ]
  4. Define sorting for the dimension

    We want to sort the dimension values based on an expression: "qSortCriterias": [ { "qSortByExpression": -1, "qExpression": { "qv": "Max(DrDist)" } } ], "autoSort": false.

    [ { "qDef": { "qFieldDefs": [ "=If(Par<>3,TClubName)" ], "qFieldLabels": [ "Tee club" ], "qSortCriterias": [ { "qSortByExpression": -1, "qExpression": { "qv": "Max(DrDist)" } } ], "autoSort": false }, "qNullSuppression": true }, { "qDef": { "qLabel": "Avg", "qDef": "Avg(DrDist)", "series": { "type": "bar", "axis": 0 } } }, { "qDef": { "qLabel": "Max", "qDef": "Max(DrDist)", "series": { "type": "line", "axis": 0 } } } ]
  5. Define the title in the options
    { "showTitles": true, "title": "Off the tee" }

Result

Code examples

Presentation and color settings

In this example we want to change the way the combo chart is presented by adding data points and changing the color used.

  1. Show data points

    Start by showing data points, which is defined in the options.

    { <!--Show data points--> "dataPoint": { "show": true } }
  2. Color settings

    In this example we want to define a single color to be used. The colors used are set in the color object. Disable automatic colors ("auto": false) and set that a single color will be used: "mode": "primary". Then define the color in the paletteColor object: "paletteColor": { "index": -1, "color": "#3a7391" }.

    Note: Color legends are automatically disabled when single color mode is used.
    { <!--Show data points--> "dataPoint": { "show": true }, <!--Single color: "#3a7391"--> "color": { "auto": false, "mode": "primary", "paletteColor": { "index": -1, "color": "#3a7391" } } }

Result

Code examples

Dimension and measure axis settings

In this example we want to do some changes to how the dimension axis and the measure axes are presented.

  1. Dimension axis

    Dimension axis settings are set in the dimensionAxis object. This example display labels only on the dimension axis.

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

    /*Dimension axis: show labels only*/ "dimensionAxis": { "show": "labels" }
  2. Measure axis

    Measure axis settings are set in the measureAxes object. This example uses narrow spacing and display labels only on the measure axis.

    Set to display labels only on the measure axis: "show": "labels". Then set narrow scaling: "spacing": 0.5.

    The measureAxes object contain two measure axes: one for the primary and one for the secondary axis. Since both measures are displayed on the primary axis, changes done to the first axis apply for both measures.

    /*Dimension axis: show labels only*/ "dimensionAxis": { "show": "labels" },
    /*Measure axis: show labels only, narrow scale*/ "measureAxes": [ { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": true }, { } ]

Result

Code examples

Stacked bars, line on secondary axis and dimension limits

In this example we create a combo chart containing one dimension and three measures, where the first two measures are displayed as stacked bars on the primary axis and the third measure is displayed as a line on the secondary axis.

  1. Define the dimension and dimension limit

    Define the dimension as a column. This example uses the same dimension as in the previous examples but with some alterations.

    Now we want to display only the top five results based on the first measure. So we set "qOtherMode": "OTHER_COUNTED" and we then define "qOtherCounted": {"qv": "5"}. We do not want to show an others value, so we set "qSuppressOther": true.

    Note: If qSuppressOther is not defined, the last value in the visualization (colored gray), summarizes all the remaining values and the value counts as 1 in that setting. In this example, the third value would be Others.

    Since we want to show the top (highest) five values we set "qOtherSortMode": "OTHER_SORT_DESCENDING" to sort the values in descending order.

    "qOtherTotalSpec": { "qOtherMode": "OTHER_COUNTED", "qOtherCounted": { "qv": "5" }, "qSuppressOther": true, "qOtherSortMode": "OTHER_SORT_DESCENDING" }
  2. Define the first measure

    Define the measures as columns.

    The first measure is displayed as a bar on the primary axis: "series": { "type": "bar", "axis": 0 }. Note the custom numeric formatting defined in qNumFormat.

    { "qDef": { "qLabel": "Typical", "qDef": "Median(DrDist)", "qNumFormat": { "qType": "F", "qFmt": "#,##0 m" }, "numFormatFromTemplate": false, "series": { "type": "bar", "axis": 0 } } }
  3. Define the second measure

    The second measure is also displayed as a bar on primary axis: "series": { "type": "bar", "axis": 0 }. Note the custom numeric formatting defined in qNumFormat.

    { "qDef": { "qLabel": "Max", "qDef": "Max(DrDist)-Median(DrDist)", "qNumFormat": { "qType": "F", "qFmt": "+#,##0" }, "numFormatFromTemplate": false, "series": { "type": "bar", "axis": 0 } } }
  4. Define the third measure

    The third measure is displayed as a line on the secondary axis: "series": { "type": "line", "axis": 1 }. Note the custom numeric formatting defined in qNumFormat.

    { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qFmt": "0.0%" }, "numFormatFromTemplate": true, "series": { "type": "line", "axis": 1 } } }
  5. Some general settings

    Group the first two measures as stacked bars: "barGrouping": { "grouping": "stacked" }.

    Add a title to the visualization: "title": "Off the tee - top 5 clubs". Then we want to show data points on the line: "dataPoint": { "show": true }.

    The dimension axis should show labels only: "dimensionAxis": { "show": "labels", "dock": "near" }.

  6. Define the measure axes

    The measureAxes object contain two measure axes: one for the primary and one for the secondary axis. Since this example display measures on both the primary and secondary axis, changes done to the first axis apply for the first and second measure, and changes done to the second axis apply for the third measure.

    Set to display labels only on the both measure axes: "show": "labels". Then set narrow spacing: "spacing": 0.5 for the primary axis and medium spacing: "spacing": 1 for the secondary axis. On the secondary axis we set a custom range where we define both the minimum value and the maximum value: "autoMinMax": false, "minMax": "minMax", "min": 0.2, "max": 1.

    "measureAxes": [ { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": true }, { "show": "labels", "dock": "far", "spacing": 1, "autoMinMax": false, "minMax": "minMax", "min": 0.2, "max": 1 } ]

Result

Code examples