Creating histogram charts

Note: Where possible, use qlik-embed and qlik/api rather than this framework.

This section describes how to create histograms with the Visualization API.

Creating a basic histogram

In this example, you will 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',
      [],
      {}
   )
   

2. Define the dimension.

   Define the dimension as a column.

   Note: You 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.

   {
     "title": "Driving distance"
   }
   

Result

Complete code example: Basic histogram

• Visualization API

  const config = {
    host: '<TENANT_URL>', //for example, 'abc.us.example.com'
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '<WEB_INTEGRATION_ID>'
  };
  
  require.config({
    baseUrl: `https://${config.host}/resources`,
    webIntegrationId: config.webIntegrationId
  });
  
  require(["js/qlik"], (qlik) => {
    qlik.on('error', (error) => console.error(error));
    const app = qlik.openApp('<APP_ID>', config);
    app.visualization.create(
      'histogram',
      [
        {
          "qDef": {
            "qFieldDefs": [
              "DrDist"
            ],
            "qFieldLabels": [
              "Drive distance"
            ]
          }
        }
      ],
      {
        "showTitles": true,
        "title": "Driving distance"
      }
    ).then((vis)=>{
      vis.show("QV01");
    });
  });
  

Setting maximum number of bars

In this example, you will set the maximum number of bars that you want to divide the data into. You will select to display a maximum of 6 bars (or bins). You 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

Complete code example: Setting maximum number of bars

• Visualization API

  const config = {
    host: '<TENANT_URL>', //for example, 'abc.us.example.com'
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '<WEB_INTEGRATION_ID>'
  };
  
  require.config({
    baseUrl: `https://${config.host}/resources`,
    webIntegrationId: config.webIntegrationId
  });
  
  require(["js/qlik"], (qlik) => {
    qlik.on('error', (error) => console.error(error));
    const app = qlik.openApp('<APP_ID>', config);
    app.visualization.create(
      'histogram',
      [
        {
          "qDef": {
            "qFieldDefs": [
              "DrDist"
            ],
            "qFieldLabels": [
              "Drive distance"
            ]
          }
        }
      ],
      {
        "showTitles": true,
        "title": "Driving distance",
        "bins": {
          "auto": false,
          "binMode": "maxCount",
          "binCount": 6
        }
      }
    ).then((vis)=>{
      vis.show("QV01");
    });
  });
  

Setting bar width on the x-axis

In this example, you will 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, you have set the bar width to 10 and the offset is 5. That means 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

Complete code example: Setting bar width on the x-axis

• Visualization API

  const config = {
    host: '<TENANT_URL>', //for example, 'abc.us.example.com'
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '<WEB_INTEGRATION_ID>'
  };
  
  require.config({
    baseUrl: `https://${config.host}/resources`,
    webIntegrationId: config.webIntegrationId
  });
  
  require(["js/qlik"], (qlik) => {
    qlik.on('error', (error) => console.error(error));
    const app = qlik.openApp('<APP_ID>', config);
    app.visualization.create(
      'histogram',
      [
        {
          "qDef": {
            "qFieldDefs": [
              "DrDist"
            ],
            "qFieldLabels": [
              "Drive distance"
            ]
          }
        }
      ],
      {
        "showTitles": true,
        "title": "Driving distance",
        "bins": {
          "auto": false,
          "binMode": "size",
          "binSize": 10,
          "offset": 5
        }
      }
    ).then((vis)=>{
      vis.show("QV01");
    });
  });
  

Presentation, colors and axis settings

In this example, you will 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 shows 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", and "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 on the X-axis (dimension axis):

   "dimensionAxis": {
     "show": "labels"
   }
   

4. Value labels on data points

   To show values labels on data points:

   "dataPoint": {
    "showLabels": true
   }
   

5. Bar colors

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

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

Result

Complete code example: Presentation, colors and axis settings

• Visualization API

  const config = {
    host: '<TENANT_URL>', //for example, 'abc.us.example.com'
    prefix: '/',
    port: 443,
    isSecure: true,
    webIntegrationId: '<WEB_INTEGRATION_ID>'
  };
  
  require.config({
    baseUrl: `https://${config.host}/resources`,
    webIntegrationId: config.webIntegrationId
  });
  
  require(["js/qlik"], (qlik) => {
    qlik.on('error', (error) => console.error(error));
    const app = qlik.openApp('<APP_ID>', config);
    app.visualization.create(
      'histogram',
      [
        {
          "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((vis)=>{
      vis.show("QV01");
    });
  });