Skip to main content Skip to complementary content
Qlik Resources

Creating line charts

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

Creating a basic line chart

In this example we create a basic line chart, containing one dimension and one measure, and with a custom title.

  1. Create the chart

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

    Visualization API

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

    qlik-visual

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

    Define the dimension as a column. Note the Dual function used in the dimension definition: "qFieldDefs": [ "=Dual([Date.autoCalendar.Date],ID)" ]. It is used to separate values that belong to separate ranges (ID) but has the same date ([Date.autoCalendar.Date]).

    For more information about the Dual function, see Dual - script and chart function.

    [ { "qDef": { "qGrouping": "N", "qFieldDefs": [ "=Dual([Date.autoCalendar.Date],ID)" ], "qFieldLabels": [ "Date" ] }, "qNullSuppression": true } ]
  3. Define measure

    Define the measure as a column.

    [ { "qDef": { "qGrouping": "N", "qFieldDefs": [ "=Dual([Date.autoCalendar.Date],ID)" ], "qFieldLabels": [ "Date" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "Pts", "qGrouping": "N", "qDef": "Avg(Stableford)", "qNumFormat": { "qType": "U", "qnDec": 10, "qUseThou": 0 } } } ]
  4. Define title

    Then define the title in the options.

    { "showTitles": true, "title": "Stableford point trend" }

Result

Example line chart

Code examples

Number formatting and presentation

In this example, the number formatting has changed, show data points is enabled, grid line spacing is narrow, and missing values are shown as connections.

  1. Change number formatting

    We change the number formatting of the measure to show two decimals. Set "qType": "F" to indicate that a fixed number of decimals is used. Then set "qnDec": 2 to indicate that two decimals is used.

    { "qDef": { "qLabel": "Pts", "qGrouping": "N", "qDef": "Avg(Stableford)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }
  2. Show data points

    In the options, enable data points: "dataPoint": { "show": true, "showLabels": false }. We do not show value labels on the data points in this example.

    { "showTitles": true, "title": "Stableford point trend", "dataPoint": { "show": true, "showLabels": false } }
  3. Narrow grid line spacing

    Then set grid line spacing to narrow: "gridLine": { "auto": false, "spacing": 3 }, where 3 means narrow.

    { "showTitles": true, "title": "Stableford point trend", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 } }
  4. Connect missing values

    Finally, define that missing values should be shown as connections: "nullMode": "connect".

    { "showTitles": true, "title": "Stableford point trend", "nullMode": "connect", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 } }

Result

Example line chart with modified number formats and presentation settings

Code examples

Area chart with two measures and numerous settings

In this example we display the chart as an area chart. We also add a second measure and some presentation settings are defined.

  1. Add second measure

    We define the second measure as a column.

    { "qDef": { "qLabel": "Putts", "qGrouping": "N", "qDef": "Avg(Putts)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," } } }
  2. Area chart

    In this example we want to present the chart as an area chart. This is defined in the options: "lineType": "area".

    { "showTitles": true, "title": "Stableford point and putt average relation", "lineType": "area", "nullMode": "connect", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 } }
  3. Scroll alignment

    Define the scroll alignment to be at the end: "scrollStartPos": 1.

    { "showTitles": true, "title": "Stableford point and putt average relation", "lineType": "area", "scrollStartPos": 1, "nullMode": "connect", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 } }
  4. Dimension axis

    Axis settings are set in the dimensionAxis and measureAxis objects. On the dimension axis, set to display labels only that are tilted: "dimensionAxis": { "continuousAuto": true, "show": "labels", "label": "tilted" }.

    { "showTitles": true, "title": "Stableford point and putt average relation", "lineType": "area", "scrollStartPos": 1, "nullMode": "connect", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 }, "dimensionAxis": { "continuousAuto": true, "show": "labels", "label": "tilted" } }
  5. Measure axis

    On the measure axis, also set to display labels only and then set the measure axis scale to narrow: "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5 }.

    { "showTitles": true, "title": "Stableford point and putt average relation", "lineType": "area", "scrollStartPos": 1, "nullMode": "connect", "dataPoint": { "show": true, "showLabels": false }, "gridLine": { "auto": false, "spacing": 3 }, "dimensionAxis": { "continuousAuto": true, "show": "labels", "label": "tilted" }, "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5 } }

Result

Example area chart with multiple overlapping measures and presentations

Scroll alignment at the right

Code examples

Creating a time-aware line chart

In this example we create a time-aware line chart, containing one dimension and one measure.

  1. Define dimension

    Define the dimension as a column.

    { "qDef": { "qGrouping": "N", "qFieldDefs": [ "Date.autoCalendar.Date" ], "qFieldLabels": [ "Date" ] } }
  2. Define measure

    Define the measure as a column.

    { "qDef": { "qGrouping": "N", "qFieldDefs": [ "Date.autoCalendar.Date" ], "qFieldLabels": [ "Date" ] } }, { "qDef": { "qLabel": "Strokes gained putting", "qDef": "Sum(ExpPutts-Putts)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "#,##0.00", "qDec": ".", "qThou": "," }, "autoSort": true } }
  3. Set title

    Define a title in the options: "title": "Strokes gained putting".

    { "showTitles": true, "title": "Strokes gained putting" }
  4. Dimension axis

    We want to show labels only on the dimension axis. We also set "continuousAuto": false to indicate that we want to customize the scaling of the dimensional axis. This is then done by setting "preferContinuousAxis": true, which means that the scale along the dimensional axis is continuous if supported by the data.

    { "showTitles": true, "title": "Strokes gained putting", "dimensionAxis": { "continuousAuto": false, "show": "labels" }, "preferContinuousAxis": true }
  5. Measure axis

    We want to show labels only on the measure axis: "measureAxis": { "show": "labels" }.

    { "showTitles": true, "title": "Strokes gained putting", "dimensionAxis": { "continuousAuto": false, "show": "labels" }, "preferContinuousAxis": true, "measureAxis": { "show": "labels" } }

Result

Example time-aware line chart

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