Sparkline http://omnipotent.net/jquery.sparkline/#s-about

Spakline plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

PixelAdmin's pxSparkline plugin wraps the Sparkline plugin to improve responsiveness. Just use $(...).pxSparkline(...) instead of regular $(...).sparkline(...).

Graph

Bars

Tristrate

Discrete

Bullet

Pie

Box

See the usage documentation at http://omnipotent.net/jquery.sparkline/#s-about

Usage


require(['jquery', 'px/plugins/px-sparkline'], function($) {
  ...
});

Usage

To use PxSparkline plugin, you need to include the next scripts:


<script src="path/to/js/libs/jquery.sparkline.js"></script>
<script src="path/to/js/pixeladmin/plugins/px-sparkline.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-sparkline.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['px-sparkline']);

Alternatively, you can include PxSparkline plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    serie: true,
    name: 'px-sparkline',
    files: [
      'path/to/js/libs/jquery.sparkline.js',
      'path/to/js/pixeladmin/plugins/px-sparkline.js',
      'path/to/js/pixeladmin/directives/angular-px-sparkline.js',
    ],
  },
]);

px-sparkline directive

px-sparkline directive requires ngModel to be on the element.

You can use px-sparkline directive where you want. And when the scope is destroyed the directive will be destroyed.


Options

Sparkline's options can be specified using options attribute (see the plugin's documentation). 


<div px-sparkline ng-model="chartModel" options="ctrl.options"></div>
      

function SomeController() {
  this.options = {
    height: '100px',
    width: '100%',
    lineColor: '#673AB7',
    fillColor: 'rgba(103, 58, 183, 0.2)',
    spotRadius: 3,
    spotColor: '#FFC107',
    minSpotColor: '#E040FB',
    maxSpotColor: '#607D8B',
    highlightSpotColor: '#FF4081',
    highlightLineColor: '#795548',
  };
});