chart:histogram

Description

The Chart Histogram Directive

Usage

as element:

<chart:histogram
       [response="{object}"]
       [facet-name="{string}"]
       [query="{string}"]
       [title="{string}"]
       [show="{number}"]
       [height="{string}"]
       [show-count="{boolean}"]
       [max-characters="{number}"]
       [action="{string}"]
       [date-format="{string}"]>
</chart:histogram>

Directive info

• This directive creates new scope.

Parameters

Param	Type	Details
response (optional)	object	A response object
facet-name (optional)	string	Facet name to use from the response object
query (optional)	string	The name of the query to build links from.
title (optional)	string	The title that should be displayed above the histogram.
show (optional)	number	The maximum number of bars to show in the histogram. Defaults to 20.
height (optional)	string	Height of the chart specified by a valid CSS height style value (e.g. ‘100px’ or ‘7em’). Defaults to ‘100px’
show-count (optional)	boolean	Whether to display the count in the label for each bar
max-characters (optional)	number	The number of characters to show before truncating the label. Default: 20.
action (optional)	string	The target resource to which the histogram query should submit.
date-format (optional)	string	How to format the date. See #/api/lightning.filter:dateFormat[date format filter] for valid formats.

Example

Source

<div ng-controller="ExampleController">
    <h3 id="example_histogram">Histogram</h3>
    <chart:histogram response="response" facet-name="test1"></chart:histogram>
    <hr />
    <h3 id="example_histogram-with-date-formatting">Histogram with Date Formatting</h3>
    <chart:histogram response="response" facet-name="test3" date-format="fullDate"></chart:histogram>
    <hr />
    <h3 id="example_large-dateset">Large Dateset</h3>
    <chart:histogram response="response" facet-name="date" date-format="fullDate" show="99" show-count="true"></chart:histogram>
    <widget:slider response="response" facet-name="date" date-format="fullDate" sort="false"></widget:slider>
</div>

angular.module('lightning')
.controller('ExampleController', ['$scope','$timeout','ResponseService', function($scope,$timeout,ResponseService) {
            $scope.response = {
                page: 2,
                query: {
                    rpp: 50,
                    filters:[]
                },
                facets: {
                    test1: {
                        filters: [
                            {

                                val: {
                                    dsp: 'Day 1',
                                    act: 'Day 1',

                                },
                                count: 100,

                            },
                            {

                                val: {
                                    dsp: 'Day 2',
                                    act: 'Day 2',
                                },
                                count: 200,
                            }

                        ],
                        'max-count':'200'
                    },
                    test2: {
                        filters: [
                            {

                                val: {
                                    dsp: 'Day 1',
                                    act: 'Day 1',
                                },
                                count: 10,

                            },
                            {

                                val: {
                                    dsp: 'Day 2',
                                    act: 'Day 2',
                                },
                                count: 20,
                            }

                        ],
                        'max-count':20
                    },
                    test3: {
                        filters: [
                            {

                                val: {
                                    dsp: 1288323623006,
                                    act: 1288323623006,
                                },
                                count: 10,

                            },
                            {

                                val: {
                                    dsp: 1288323723006,
                                    act: 1288323723006,
                                },
                                count: 20,
                            }

                        ],
                        'max-count':20
                    },
                    date:{
                        filters:[],
                        'max-count':100
                    }
                },
                results: []
            }

            var i = 0;

            while(i < 99){
                var CurrentDate = new Date();
                CurrentDate.setMonth(CurrentDate.getMonth() + i);
                $scope.response.facets.date.filters.push(
                    {
                        val : {
                            dsp:CurrentDate,
                            act:CurrentDate
                        },
                        count:Math.floor(Math.random()*(100-1+1)+1),
                    }
                )
                i++
            }

            console.log($scope.response.facets.date);
            ResponseService.setResponse('response', $scope.response);
        }]);

Result