Improve this doc View source

pfTrendsChart
directive in module patternfly.charts

Description

Directive for rendering a trend chart. The trend chart combines overall data with a pfSparklineChart.

See http://c3js.org/reference.html for a full list of C3 chart options.
See also: patternfly.charts.directive:pfSparklineChart

Usage

as attribute
<ANY pf-trends-chart
     config="{object}"
     chart-data="{object}"
     [chart-height="{int}"]
     [show-x-axis="{boolean}"]
     [show-y-axis="{boolean}"]>
   ...
</ANY>

Parameters

ParamTypeDetails
configobject

configuration settings for the trends chart:

  • .chartId - the unique id of this trends chart
  • .title - (optional) title of the Trends chart
  • .layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', 'compact', and 'inline'
  • .trendLabel - (optional) the trend label used in the 'inline' layout
  • .timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
  • .units - unit label for values, ex: 'MHz','GB', etc..
  • .valueType - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
chartDataobject

the data to be shown in the sparkline charts

  • .total - number representing the total amount
  • .xData - Array, X values for the data points, first element must be the name of the data
  • .yData - Array, Y Values for the data points, first element must be the name of the data
  • .dataAvailable - Flag if there is data available - default: true
chartHeight
(optional)
int

height of the sparkline chart

showXAxis
(optional)
boolean

override sparkline config settings for showing the X Axis

showYAxis
(optional)
boolean

override sparkline config settings for showing the Y Axis

Example

Source













Demo