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.
- 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>
- 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" ] } } ] - Define the title in the options
Then define the title in the options.
{ "title": "Driving distance" }
Result
Code examples
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.
- Disable auto-bins
In the bins object, enable custom bars by setting "auto": false.
"bins": { "auto": false } - 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
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.
- Disable auto-bins
Make sure that custom bars are enabled ("auto": false).
"bins": { "auto": false } - 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
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.
- 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 } - 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 } - X-axis settings
To show labels only also on the X-axis (dimension axis), set "dimensionAxis": { "show": "labels" }.
"dimensionAxis": { "show": "labels" } - Value labels on data points
To show values labels on data points, set "dataPoint": { "showLabels": true }.
"dataPoint": { "showLabels": true } - 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