A histogram is an accurate representation of the distribution of numerical data. It is an estimate of the probability distribution of a continuous variable (quantitative variable). It differs from a bar graph, in the sense that a bar graph relates two variables, but a histogram relates only one. To construct a histogram, the first step is to “bin” (or “bucket”) the range of values —that is, divide the entire range of values into a series of intervals— and then count how many values fall into each interval. The bins are usually specified as consecutive, non-overlapping intervals of a variable. The bins (intervals) must be adjacent, and are often (but are not required to be) of equal size.
Using the following code we can create a basic Histogram:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// Define the metrics to be used var metrics = ; var metric = cf.Metric('commission', 'histogram'); metric.fixedBars(10); // or metric.interval(10) metrics.push(metric); var myChart = cf.provider('Spark') .source('ticket_sales') .metrics(...metrics) .graph('Histogram') .set('legend', 'right') .element('chart') .execute();
Previous code will render a Histogram like the one below:
- interval: Use the cf.Metric object to specify the histogram interval. Example: metric.interval(10)
- fixedBars: Use the cf.Metric object to specify the fixed number of bars. Example: metric.fixedBars(10)
- limit: The limit of results for the histogram can be specified in the following way: .limit (10)
- sort: The ordering criteria can be specified as follows: .set(“sort”, “desc”)
As we can see in the picture above, the histogram by default doesn't show any label for the Y Axis. To display a label there we just need to set it with the
label option at render time.
1 2 3 4 5
var myChart = cf.provider('Spark') ... .set('label', 'My Custom Label') ... .execute();