chart:display

    Description

    The Chart Display Tag displays the facet provided in a chart. The body of the Chart Display tag can contain a Series Facet Tag for rendering multiple series using facets and also a Series Result List Tag for rendering multiple series using results. Along with this there are other tags to customise the chart, these include the Chart Tooltip Tag for modifying the tooltip, Chart Legend Tag for modifying the legend, Chart Credit Tag for adding a credit to the chart and the Chart Export Tag for exporting the chart.

    For detail on how to change the color and background color see the demo below, for more detail on what you can change and set using CSS see here.

    The following tags can be nested within the chart display tag.

    Usage

    as element:
    <chart:display
       response="{string}"
       facet-name="{string}"
       type="{string}"
       [title="{string}"]
       [subtitle="{string}"]
       [height="{string}"]
       [xtitle="{string}"]
       [ytitle="{string}"]
       [stacking="{string}"]
       [radar-or-polar="{string}"]
       [xlabel-rotation="{number}"]
       [max-characters="{number}"]
       [inner-size="{number}"]
       [invert-axes="{boolean}"]
       [show-tooltips="{boolean}"]
       [query="{object}"]
       [options="{object}"]
       [max-labels="{number}"]
       [show-labels="{boolean}"]
       [show-count="{boolean}"]
       [show-data-labels="{boolean}"]
       [three-d="{boolean}"]
       [websocket="{string}"]
       [show-value="{boolean}"]
       [select-series="{boolean}"]
       [select="{string}"]>
</chart:display>

    Directive info

    • This directive creates new scope.

    Parameters

    Param Type Details
    response string

    The name of the response.
    facet-name string

    Name of facet.
    type string

    Chart type (use type of 'time' when using the series time tag).
    title
    (optional)
    		 string

    Chart title
    subtitle
    (optional)
    		 string

    Chart sub title
    height
    (optional)
    		 string

    Chart height. Default:400 (400px but px is not required!)
    xtitle
    (optional)
    		 string

    x axis title
    ytitle
    (optional)
    		 string

    y axis title
    stacking
    (optional)
    		 string

    Whether to stack the values of each series on top of each other when using multiple series. 'normal' to stack by value or 'percent'.
    radar-or-polar
    (optional)
    		 string

    Set as 'radar' or 'polar' to turn your series into a radar/polar chart.
    xlabel-rotation
    (optional)
    		 number

    Rotation of the labels in degrees
    max-characters
    (optional)
    		 number

    Number of characters to show in labels. default:250. (Cannot be used with a time series)
    inner-size
    (optional)
    		 number

    The of size of the inner diameter of a pie chart. A size greater than 0 renders a donut chart.
    invert-axes
    (optional)
    		 boolean

    Whether to invert the axes so that the x axis is vertical and y axis is horizontal. When true, the x axis is reversed by default. If a bar series is present in the chart, it will be inverted automatically. Defaults to false.
    show-tooltips
    (optional)
    		 boolean

    Whether to display hover tooltips in the graph. Default:true
    query
    (optional)
    		 object

    The search query from which to build links.
    options
    (optional)
    		 object

    Extend the current options. Options can be found here.
    max-labels
    (optional)
    		 number

    Maximum number of labels to show
    show-labels
    (optional)
    		 boolean

    Whether to show labels in the graph, does not affect hover tooltips, default:true
    show-count
    (optional)
    		 boolean

    Whether to show the count in the label. default:false
    show-data-labels
    (optional)
    		 boolean

    Whether to show the count on the point of the series (Not applicable to pie charts) default:false
    three-d
    (optional)
    		 boolean

    Renders the chart in 3d. Only works with column and pie charts.
    websocket
    (optional)
    		 string

    URL to receive updates from
    show-value
    (optional)
    		 boolean

    Whether to show the value in the middle of the chart when hovered over. This will only work for pie charts with the inner-size attribute set greater then 0.
    select-series
    (optional)
    		 boolean

    When set to true you will be able to select the series to show on the chart.
    select
    (optional)
    		 string

    How the data should be filtered when clicking on a part of the chart, a valid query must be present.


    Valid values:-
    • false

      User selects a filter by clicking the value;

      (default)
    • multiselect

      Supports selecting multiple filters that get combined with an 'OR'.

    • multiselect-instant

      Supports selecting multiple filters that get combined with an 'OR', filters will be applied automatically.

    Example

    Source