Creating histograms

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

Creating a basic histogram

In this example we create a basic histogram, containing a single dimension and a custom title.

1. Create the chart

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

   Visualization API

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

   qlik-visual

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

2. Define dimension

   Define the dimension as a column.

   Information noteYou can only apply a single dimension to a histogram. The dimension must be a numerical field. Histograms do not need a measure, as the frequency of the binned data is automatically calculated.
   [ { "qDef": { "qFieldDefs": [ "DrDist" ], "qFieldLabels": [ "Drive distance" ] } } ]
3. Define the title in the options

   Then define the title in the options.

   { "title": "Driving distance" }

Result

Code examples

app.visualization.create(
  'barchart',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Driving distance"
  }
).then(function(vis){
  vis.show("QV01");
});

<qlik-visual appid="Tutorial-Golf.qvf"
  type="histogram"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Driving distance"
  }' >
</qlik-visual>

Setting maximum number of bars

In this example we set the maximum number of bars that we want to divide the data into. We select to display a maximum of 6 bars (or bins). We achieve this by configuring the bins object in the options.

1. Disable auto-bins

   In the bins object, enable custom bars by setting "auto": false.

   "bins": { "auto": false }
2. Define the maximum number of bars

   To use the maximum number of bars feature, set "binMode": "maxCount" and then define the maximum number: "binCount": 6.

   "bins": { "auto": false, "binMode": "maxCount", "binCount": 6 }

Result

Code examples

app.visualization.create(
  'barchart',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "maxCount",
      "binCount": 6
    }
  }
).then(function(vis){
  vis.show("QV01");
});

<qlik-visual appid="Tutorial-Golf.qvf"
  type="histogram"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "maxCount",
      "binCount": 6
    }
  }' >
</qlik-visual>

Setting bar width on the x-axis

In this example we define how wide each bar should be, based on the values on the x-axis, and which offset the bars are using by configuring the bins object in the options.

1. Disable auto-bins

   Make sure that custom bars are enabled ("auto": false).

   "bins": { "auto": false }
2. Define the bar width

   To use the bar width feature, set "binMode": "size". Set the width of each bar "binSize": 10 and then set the offset: "offset": 5.

   In this example we have set the bar width to 10 and the offset is 5. That means that in this example, the first bar is 5 to 15, the second bar is 15 to 25, and so on.

   "bins": { "auto": false, "binMode": "size", "binSize": 10, "offset": 5 }

Result

Code examples

app.visualization.create(
  'barchart',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "size",
      "binSize": 10,
      "offset": 5
    }
  }
).then(function(vis){
  vis.show("QV01");
});

<qlik-visual appid="Tutorial-Golf.qvf"
  type="histogram"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "size",
      "binSize": 10,
      "offset": 5
    }
  }' >
</qlik-visual>

Presentation, colors and axis settings

In this example we define some settings for how the histogram is presented. All these settings are defined in the options.

1. Grid line spacing

   The spacing between the grid lines are set in the gridlines object. To use narrow grid line spacing, set "auto": false and then set "spacing": 3, where 3 means narrow.

   "gridlines": { "auto": false, "spacing": 3 }
2. Y-axis settings

   This example show labels only on the Y-axis (measure axis), uses narrow scale and has a custom value range defined. These settings are set in the measureAxis object.

   To show labels only, set "show": "labels". Then set narrow scale: "spacing": 0.5 where 0.5 means narrow. Finally, set "autoMinMax": false, "minMax": "min", "min": 100 to define the custom range.

   "measureAxis": { "show": "labels", "dock": "near", "spacing": 0.5, "autoMinMax": false, "minMax": "min", "min": 100 }
3. X-axis settings

   To show labels only also on the X-axis (dimension axis), set "dimensionAxis": { "show": "labels" }.

   "dimensionAxis": { "show": "labels" }
4. Value labels on data points

   To show values labels on data points, set "dataPoint": { "showLabels": true }.

   "dataPoint": { "showLabels": true }
5. Bar colors

   The bar color is defined in the color object. In this example we define a color that is not part of the default color palette.

   "color": { "bar": { "paletteColor": { "index": -1, "color": "#d47dbe" } } }

Result

Code examples

app.visualization.create(
  'barchart',
  [
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ],
  {
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "size",
      "binSize": 10,
      "offset": 5
    },
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "measureAxis": {
      "show": "labels",
      "spacing": 0.5,
      "autoMinMax": false,
      "minMax": "min",
      "min": 100
    },
    "dimensionAxis": {
      "show": "labels"
    },
    "dataPoint": {
      "showLabels": true
    },
    "color": {
      "bar": {
        "paletteColor": {
          "index": -1,
          "color": "#d47dbe"
        }
      }
    }
  }
).then(function(vis){
  vis.show("QV01");
});

<qlik-visual appid="Tutorial-Golf.qvf"
  type="histogram"
  cols='[
    {
      "qDef": {
        "qFieldDefs": [
          "DrDist"
        ],
        "qFieldLabels": [
          "Drive distance"
        ]
      }
    }
  ]'
  options='{
    "showTitles": true,
    "title": "Driving distance",
    "bins": {
      "auto": false,
      "binMode": "size",
      "binSize": 10,
      "offset": 5
    },
    "gridlines": {
      "auto": false,
      "spacing": 3
    },
    "measureAxis": {
      "show": "labels",
      "spacing": 0.5,
      "autoMinMax": false,
      "minMax": "min",
      "min": 100
    },
    "dimensionAxis": {
      "show": "labels"
    },
    "dataPoint": {
      "showLabels": true
    },
    "color": {
      "bar": {
        "paletteColor": {
          "index": -1,
          "color": "#d47dbe"
        }
      }
    }
  }' >
</qlik-visual>