<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>Highcharts sparkline example
<div ng-controller="ThirdCtrl">
<div ui-grid="gridOptions" class="grid"></div>
<div ng-show="loader" class="loader"></div>
</div>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('ThirdCtrl', ['$scope', '$http', '$log', '$timeout', '$interval', function ($scope, $http, $log, $timeout, $interval) {
$scope.gridOptions = {
enableFiltering: false,
enableSorting: true,
}
var dummy = [{
"id" : 10,
"name" : "Test10",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},
{
"id" : 11,
"name" : "Test11",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},
{
"id" : 12,
"name" : "Test12",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 13,
"name" : "Test13",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 14,
"name" : "Test14",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 15,
"name" : "Test15",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 16,
"name" : "Test16",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 17,
"name" : "Test17",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 18,
"name" : "Test18",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},
{
"id" : 19,
"name" : "Test19",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
},{
"id" : 20,
"name" : "Test20",
"age" : [10,20,30,40,50],
"address" : {
"city" : "Banaglore"
}
}]
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name' },
{ name: 'age', width : "50%",
cellTemplate: '<div id="table-sparkline" data-sparkline="12.57, 22.25, 37.75, 12.54, 20.5, 9.25, 12.97, 9.71, 12.25, 58.61, 12.5, 52.5, 15.79, 33.09, 35, 11.23, 10.78, 8.78, 30.33, 9.21, 12, 52.25, 36.25, 47.5, 10.28, 13.22"></div>'},
{ name: 'address.city' }
];
var start = +new Date(),
$tds ='',
fullLen = '',
n = 0,
c = 1;
$interval( function(){
$scope.loader = true;
if(c % 2 == 0){
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.gridOptions.data = data;
$tds = $('div[data-sparkline]');
fullLen = $tds.length;
doChunk();
});
c++;
}else{
$scope.gridOptions.data = dummy;
$tds = $('div[data-sparkline]');
fullLen = $tds.length;
doChunk();
c++;
}
}, 3000);
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function (data) {
$scope.loader = true;
$scope.gridOptions.data = data;
});
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 300,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([y], true, true);
}, 1000);
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h };
}
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('div').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
}
$scope.loader = false;
}
//3 seconds delay
$timeout( function(){
$tds = $('div[data-sparkline]');
fullLen = $tds.length;
// alert($tds.length);
doChunk();
}, 3000 );
}]);
/* Styles go here */
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
position : relative;
left : 50%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}