Chart: Line

Description

Provides an integration for the `lib/chart/line.js` line chart library.

Usage

Options

=? fontFamily
defaults to the element CSS value
=? fontSize
defaults to the element CSS value
=? handleColor
=? handleColorHover
=? handleWidth
defaults to `4`
=? interval
an integer representing the amount of second between data records, defaults to `900`
=? lineColors
=? lineWidth
=? rulersColor
defaults to the element CSS `currentColor` value
=? selectingColor
&onSelection selection
a function to be called when time selection changes
=? textPadding
=? tickSize
=? timeLabelFormats
moment.js notation to format times, defaults to { day: 'HH:mm', week: 'dd DD', month: 'DD MMM' }
=? timespan
either `day`, `week` or `month`, defaults to `day`
=? timestampFormat
moment.js notation to format times, defaults to `YYYY-MM-DDTHH:mm:ss`
=? unselectedColor
=? valueLabelsCount
= values
an array of data

Examples

Default usage

<select ng-model="timespan">
  <option value="day">day</option>
  <option value="week">week</option>
  <option value="month">month</option>
</select>

<span ng-if="!selectedStart">Select a time range on the chart</span>
<span ng-if="selectedStart">Selected from "{{ selectedStart }}" to "{{ selectedEnd }}"</span>

<div cam-widget-chart-line
     values="values"
     lines-colors="colors"
     timespan="timespan"
     interval="interval"></div>
        
Select a time range on the chart Selected from "{{ selectedStart }}" to "{{ selectedEnd }}"