$(...).pxSparkline(...)
instead of regular $(...).sparkline(...)
.
require(['jquery', 'px/plugins/px-sparkline'], function($) {
...
});
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
You can use px-sparkline
directive where you want.
And when the scope is destroyed the directive will be destroyed.
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',
};
});