Skip to main content Skip to complementary content
Qlik Resources

Creating scatter plots

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

Basic scatter plot with number formatting

In this example we create a basic scatter plot, containing one dimension and two measures. The measures have basic number formatting applied and a title is added to the scatter plot.

  1. Create the chart

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

    Visualization API

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

    qlik-visual

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

    Define the dimension as a column.

    { "qDef": { "qFieldDefs": [ "=[Date.autoCalendar.YearQuarter]" ], "qFieldLabels": [ "Year & Qtr" ] }, "qNullSuppression": true }
  3. Define first measure

    Define the first measure as a column.

    { "qDef": { "qFieldDefs": [ "=[Date.autoCalendar.YearQuarter]" ], "qFieldLabels": [ "Year & Qtr" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } } }
  4. Define second measure

    Define the second measure as a column.

    { "qDef": { "qFieldDefs": [ "=[Date.autoCalendar.YearQuarter]" ], "qFieldLabels": [ "Year & Qtr" ] }, "qNullSuppression": true }, { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } } }, { "qDef": { "qLabel": "GIR%", "qDef": "Avg(GIR)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } } }
  5. Define title

    Then define the title in the options.

    { "showTitles": true, "title": "Fairways hit vs. Greens hit relation" }

Result

Example scatter plot chart

Code examples

Using calculated bubble size

In this example we add a third measure to the scatter plot, which is used to calculate the bubble size.

  1. Define third measure

    Define the third measure as a column.

    { "qDef": { "qLabel": "Holes played", "qDef": "Count(HoID)" } }
  2. Define bubble size range

    The bubble size range is defined in the dataPoint object in the options: "dataPoint": { "rangeBubbleSizes": [ 1, 11 ] }.

    Tip noterangeBubbleSizes is an array of integers where the first index is the from-size, and the second is the to-size. From-size should always be smaller than the to-size. 1 is the minimum value and 20 is the maximum value.
    { "showTitles": true, "title": "Fairways hit vs. Greens hit relation", "dataPoint": { "rangeBubbleSizes": [ 1, 11 ] } }

Result

Example scatter plot chart with bubble size modified by data

Code examples

Customizing the bubble colors

In this example we customize the color of the bubbles by an expression, where three different colors are applied depending on the return value of the expression.

  1. Enable custom colors

    The bubble color is defined in the color object. We enable custom coloring "auto": false and set "mode": "byExpression". Then define the expression to be used for coloring: "colorExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))". Since the expression includes an actual color code, set "expressionIsColor": true.

    "color": { "auto": false, "mode": "byExpression" }
  2. Define color expression

    We then define the expression to be used for coloring: "colorExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))". Since the expression includes an actual color code, set "expressionIsColor": true.

    "color": { "auto": false, "mode": "byExpression", "expressionIsColor": true, "colorExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))" }
  3. Add attribute expression on first measure

    Since color expressions must be added as attribute expressions on the first measure, we define this inside the first measure definition in the columns: "qAttributeExpressions": [ { "qExpression": "If(Avg(Stableford)>2,rgb(82, 162, 204),If(Avg(Stableford)<1.65,rgb(248, 152, 29),rgb(128, 128, 128)))", "id": "colorByExpression" } ].

    { "qDef": { "qLabel": "FIR%", "qDef": "Avg(FwHit)", "qNumFormat": { "qType": "F", "qnDec": 2, "qUseThou": 0, "qFmt": "0.0%", "qDec": ".", "qThou": "," } }, "qAttributeExpressions": [ { "qExpression": "If(Avg(Stableford)&gt;2,rgb(82, 162, 204),If(Avg(Stableford)&lt;1.65,rgb(248, 152, 29),rgb(128, 128, 128)))", "id": "colorByExpression" } ] },

Result

Example scatter plot chart with colour and attribute modifiers

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