Skip to content

Instantly share code, notes, and snippets.

@KeithNdhlovu

KeithNdhlovu/index.html

Last active March 30, 2017 09:32
Show Gist options
  • Save KeithNdhlovu/349453f4eaded4bcbcaeca53722065c4 to your computer and use it in GitHub Desktop.
Save KeithNdhlovu/349453f4eaded4bcbcaeca53722065c4 to your computer and use it in GitHub Desktop.
Download ZIP
This Function will Create a RadarChart/SpiderChart/Line Chart/Bar Chart/Line And Bar
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper center">
<a href="#" class="brand-logo">Le Graph Example Usage</a>
</div>
</nav>
<div class="container" ng-app="leGraphsApp">
<div class="section">
<!-- Section 1 -->
<div class="row" ng-controller="SpiderChartController">
<div class="col s12 card">
<div class="row">
<h4 class="col s12 light center header">SPIDER CHART.</h4>
</div>
<div class="row">
<div class="col s2">
<p>Change graph options</p>
<div>
<input type="checkbox" class="filled-in" id="option-1" ng-model="graphOptions.responsive" ng-change="updateResposive()" />
<label for="option-1">Responsive</label>
</div>
<div>
<input type="checkbox" class="filled-in" id="option-2" ng-model="graphOptions.showLegend" ng-change="updateLegend()" />
<label for="option-2">Show Legend</label>
</div>
<div>
<input type="checkbox" class="filled-in" id="option-3" ng-model="graphOptions.startAtZero" ng-change="updateStartPoint()" />
<label for="option-3">Start At Zero</label>
</div>
</div>
<div class="col s8">
<div class="card-content">
<div class="row">
<div class="col s9">
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
</div>
<div class="col s2">
<div id="chart-legend-1">
<!-- Custom legend data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="row">
<div class="col s12 card">
<div class="row">
<h4 class="col s12 light center header">BAR CHART.</h4>
</div>
<div class="row">
<div class="col s12">
<div class="card-content">
<div class="row">
<div class="col s9">
<div class="chart-container">
<canvas id="chart2"></canvas>
</div>
</div>
<div class="col s3">
<div id="chart-legend-2">
<!-- Custom legend data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="row">
<div class="col s12 card">
<div class="row">
<h4 class="col s12 light center header">BAR CHART COMBINED WITH LINE CHART.</h4>
</div>
<div class="row">
<div class="col s12">
<div class="card-content">
<div class="row">
<div class="col s9">
<div class="chart-container">
<canvas id="line-bar"></canvas>
</div>
</div>
<div class="col s3">
<div id="chart-legend-3">
<!-- Custom legend data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section 2 -->
<div class="row">
<div class="col s12 card">
<div class="row">
<h4 class="col s12 light center header">SCATTER PLOT GRAPH.</h4>
</div>
<div class="row">
<div class="col s12">
<div class="card-content">
<div class="row">
<div class="col s9">
<div class="chart-container">
<canvas id="scatter-plot"></canvas>
</div>
</div>
<div class="col s3">
<div id="chart-legend-4">
<!-- Custom legend data -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
<!-- Scripts-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<script>
var leGraphsApp = angular.module('leGraphsApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
leGraphsApp.controller('SpiderChartController', function($scope, $http, $timeout) {
$scope.graphOptions = {
responsive: true,
showLegend: false,
startAtZero: true,
legendContainer: $("#chart-legend-1")
};
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels: [{
label: "Eating",
id: 0,
}, {
label: "Drinking",
id: 1,
}, {
label: "Sleeping",
id: 2,
}, {
label: "Designing",
id: 3,
}, {
label: "Coding",
id: 4,
}, {
label: "Cycling",
id: 5,
}, {
label: "Running",
id: 6,
}],
datasets: [{
caption: "First Group",
color: "rgba(0, 95, 255, 0.5)",
lineColor: "#005fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
// {
// caption: "Second Group",
// color: "rgba(133, 0, 255, 0.5)",
// lineColor: "#8500ff",
// data: [28, 48, 40, 19, 96, 27, 100]
// }
]
};
$scope.drawGraph = function() {
$scope.graph = new leGraph().create(ctx, 500, 500, data, 'radar', $scope.graphOptions);
$scope.graph.onPointClick(function(pointData) {
console.log(pointData);
});
};
$scope.updateLegend = function() {
$scope.graph.attr.chartjs.options.legend.display = $scope.graphOptions.showLegend;
$scope.graph.attr.chartjs.update();
};
$scope.updateResposive = function() {
$scope.graph.attr.chartjs.options.responsive = $scope.graphOptions.responsive;
$scope.graph.attr.chartjs.update();
};
$scope.updateStartPoint = function() {
$scope.graph.attr.chartjs.options.scale.ticks.beginAtZero = $scope.graphOptions.startAtZero;
$scope.graph.attr.chartjs.update();
};
$scope.drawGraph();
});
</script>
<script type="text/javascript">
var ctx2 = document.getElementById("chart2").getContext("2d");
var ctx3 = document.getElementById("line-bar").getContext("2d");
var ctx4 = document.getElementById("scatter-plot").getContext("2d");
var data3 = {
labels: [{
label: "January",
id: 0
}, {
label: "February",
id: 1
}, {
label: "March",
id: 2
}, {
label: "April",
id: 3
}, {
label: "May",
id: 4
}, {
label: "June",
id: 5
}, {
label: "July",
id: 6
}],
datasets: [{
caption: "2016",
color: "#AE75CC",
lineColor: "#AE75CC",
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}, {
caption: "2017",
color: "#1489A2",
lineColor: "#1489A2",
borderWidth: 1,
data: [20, 12, 43, 12, 40, 90, 61],
}]
};
var graph3 = new leGraph().create(ctx2, 500, 500, data3, 'bar', {
responsive: true,
showLegend: false,
startAtZero: true,
legendContainer: $("#chart-legend-2")
});
graph3.onPointClick(function(pointData) {
console.log(pointData);
});
// Line Bar chart
var data2 = {
labels: [{
label: "Eating",
id: 0,
}, {
label: "Drinking",
id: 1,
}, {
label: "Sleeping",
id: 2,
}, {
label: "Designing",
id: 3,
}, {
label: "Coding",
id: 4,
}, {
label: "Cycling",
id: 5,
}, {
label: "Running",
id: 6,
}],
datasets: [{
type: 'line',
caption: "First Group",
color: "rgba(0, 95, 255, 0.5)",
lineColor: "#005fff",
data: [65, 59, 90, 81, 56, 55, 40],
yAxisID: 'y-axis-1',
fill: false,
}, {
type: 'bar',
caption: "Second Group",
color: "rgba(133, 0, 255, 0.5)",
lineColor: "#8500ff",
data: [28, 48, 40, 19, 96, 27, 100],
fill: false,
yAxisID: 'y-axis-2',
}]
};
var graph2 = new leGraph().create(ctx3, 500, 500, data2, 'line-bar', {
responsive: true,
showLegend: true,
startAtZero: true,
legendContainer: $("#chart-legend-3")
});
var data4 = {
labels: [{
label: "Aspect 1",
id: 0
}, {
label: "Aspect 2",
id: 1
}, {
label: "Aspect 3",
id: 2
}, {
label: "Aspect 4",
id: 3
}, {
label: "Aspect 5",
id: 4
}, {
label: "Aspect 6",
id: 5
}, {
label: "Aspect 7",
id: 6
}],
datasets: [{
caption: "2016",
color: "#AE75CC",
lineColor: "#AE75CC",
borderWidth: 1,
data: [{
x: 16,
y: 2
}, {
x: 19,
y: 39
}, {
x: 10,
y: 30
}, {
x: 30,
y: 50
}, {
x: 93,
y: 72
}, {
x: 49,
y: 83
}, {
x: 92,
y: 65
}]
}]
};
var graph4 = new leGraph().create(ctx4, 500, 500, data4, 'scatter', {
responsive: true,
showLegend: true,
startAtZero: true,
showAxisLables: true,
yAxisLabelText: "Materiality",
xAxisLabelText: "Performance Effectiveness",
legendContainer: $("#chart-legend-4")
});
</script>
</body>
</html>
Raw
leGraph.js
/**
* @desc This Function will Create a RadarChart/SpiderChart/Line Chart/Bar Chart/Line And Bar
* @author Keith Ndhlovu http://ketihndhlovu.github.io
* @required JQuery, ChartJS, UnderscoreJS
*/
function leGraph() {
var self = {};
const GRAPH_TYPE_BAR = 'bar';
const GRAPH_TYPE_LINE_BAR= 'line-bar';
const GRAPH_TYPE_RADAR = 'radar';
const GRAPH_TYPE_SCATTER = 'scatter';
const GRAPH_TYPE_LINE = 'line';
/**
* leGraph attributes
* Default graph options
*/
self.attr = {
chartjs: null,
type: 'radar',
canvas: null,
width: 250,
height: 200,
data: [],
colors: [],
_data: null,
_callback: null,
legendContainer: null,
graphOptions: {
responsive: false,
showLegend: false,
showTopLegend: false,
legendPosition: 'top',
startAtZero: true,
showAxisLables: false,
preFixedLabels: false,
yAxisLabelText: "yLabel",
xAxisLabelText: "xLabel",
}
},
self.onPointClick = function(callback) {
if(typeof callback === 'function'){
self._callback = callback;
}
},
self.methods = {
transmitCallback : function(arg) {
if(typeof self._callback === 'function'){
self._callback.apply(this, [arg]);
}
},
}
/**
* leGraph create Function
* @params: $ctx : The canvas DOM element the graph is to be drawn at
* cWidth : If specified, will overwrite the width of the canvas, default is 250px
* cHeight : If specified, will overwrite the height of the canvas, default is 200px
* data : The data to be visualised, and <Array>
* type : the type of graph to visualise the data, default is radar chart
* responsive : Lets the graph know it can be resizeable
*/
self.create = function ($ctx, cWidth, cHeight, data, type, graphOptions) {
self.attr.canvas = $ctx;
if(cHeight > self.attr.height)
self.attr.height = cHeight;
if(cWidth > self.attr.width)
self.attr.width = cWidth;
self.attr.canvas.canvas.width = self.attr.width;
self.attr.canvas.canvas.height = self.attr.height;
self.attr.canvas.canvas.originalwidth = self.attr.width;
self.attr.canvas.canvas.originalheight = self.attr.height;
if('undefined' !== typeof graphOptions){
for(var i in graphOptions){
if('undefined' !== typeof graphOptions[i]){
self.attr.graphOptions[i] = graphOptions[i];
}
}
}
self.attr.type = type;
self.attr.data = data;
self.draw();
return self;
}
/**
* leGraph draw Function
*/
self.draw = function() {
if(self.attr.data.length == 0) {
console.error("You need to set the data to can be visualised");
} else {
var datasets = self.attr.data.datasets;
var _datasets = []; //Internal Dataset to be used by graph
var _length = self.attr.data.labels.length;
// We use D3Js colour maker to for the background on the labels
// self.attr.colors = d3.scale.linear().domain([1,_length]).interpolate(d3.interpolateHcl).range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);//d3.scale.category20();
// Un Comment this line if you wish to have random colors
self.attr.colors = gimmeColor(_length);
_.each(datasets, function(set, index) {
// We construct the dataset
var _dataset = {
label: set.caption,
backgroundColor: set.color,
borderColor: set.lineColor,
pointBackgroundColor: set.lineColor,
pointBorderColor: set.lineColor,
pointHoverBackgroundColor: set.lineColor,
pointHoverBorderColor: set.lineColor,
data: set.data,
type: set.type,
yAxisID: set.yAxisID
};
if(_.contains([GRAPH_TYPE_SCATTER], self.attr.type)) {
_dataset.backgroundColor = [];
_dataset.borderColor = [];
_dataset.pointBackgroundColor = [];
_dataset.pointBorderColor = [];
_dataset.pointHoverBackgroundColor = [];
_dataset.pointHoverBorderColor = [];
_.each(set.data, function(label, i) {
_dataset.backgroundColor[i] = self.attr.colors[i];
_dataset.borderColor[i] = self.attr.colors[i];
_dataset.pointBackgroundColor[i] = self.attr.colors[i];
_dataset.pointBorderColor[i] = self.attr.colors[i];
_dataset.pointHoverBackgroundColor[i] = self.attr.colors[i];
_dataset.pointHoverBorderColor[i] = self.attr.colors[i];
});
//if we are plotting a scatter dataset, lets use the random colours for the dots
}
// Lets add this set to the internal datasets
_datasets.push(_dataset);
});
//CREATE THE GRAPH
var data = {
labels: _.pluck(self.attr.data.labels, "label"),
_labels: self.attr.data.labels, //The Object which has with it the IDs needed from other data
_datasets: self.attr.data.datasets,
datasets: _datasets
};
if (self.attr.graphOptions.preFixedLabels) {
data.labels = [];
_.each(self.attr.data.labels, function(label) {
var _label = label.label_prefix;
data.labels.push(_label);
});
}
self.attr._data = data;
// Create Graph depending on the Type
if (_.contains([GRAPH_TYPE_BAR, GRAPH_TYPE_RADAR, GRAPH_TYPE_LINE], self.attr.type)) {
var scales = {};
var elements = {};
if (_.contains([GRAPH_TYPE_BAR], self.attr.type)) {
scales = {
xAxes: [{
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.xAxisLabelText
},
}],
yAxes: [{
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.yAxisLabelText
},
}]
};
}
if (_.contains([GRAPH_TYPE_LINE], self.attr.type)) {
scales = {
xAxes: [{
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.xAxisLabelText
},
}],
yAxes: [{
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.yAxisLabelText
},
}]
};
elements = {
line: {
fill: false
},
point:{
radius: 5
}
}
}
// Create the graph unisng normal options without any special cases
self.attr.chartjs = new Chart(self.attr.canvas, {type: self.attr.type, data: data, options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItem, data) {
if (self.attr.graphOptions.preFixedLabels) {
return " " + data._labels[tooltipItem[0].index].label_prefix + " : " + data._labels[tooltipItem[0].index].label;
}
return data.labels[tooltipItem[0].index];
}
}
},
responsive: self.attr.graphOptions.responsive,
legend: {
position: self.attr.graphOptions.legendPosition,
display: self.attr.graphOptions.showTopLegend // Set the legend at the top of the graph to be displayed
},
scales: scales,
elements: elements,
legendCallback: function(chart) {
if(!self.attr.graphOptions.showLegend) return;
var text = [];
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<p class="legend-item valign-wrapper ' + chart.id + '-legend">');
if (chart.data.labels[i]) {
if (self.attr.graphOptions.preFixedLabels) {
var strong = '<strong>' + chart.data._labels[i].label_prefix + ':</strong>';
var label = strong + " " +"<span>"+chart.data._labels[i].label+"</span>";
text.push(label);
} else {
text.push('<i class="fa fa-circle" aria-hidden="true" style="color:' + self.attr.colors[i] + '"></i>');
text.push('<span>' + chart.data.labels[i] + '</span>');
}
}
text.push('</p>');
}
return text.join("");
},
}});
}
// Bar chart with line chart merged
if (_.contains([GRAPH_TYPE_LINE_BAR], self.attr.type)) {
// Create BAR graph combined with a LINE chart
self.attr.chartjs = new Chart(self.attr.canvas, { type: 'bar', data: data,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItem, data) {
if (self.attr.graphOptions.preFixedLabels) {
return " " + data._labels[tooltipItem[0].index].label_prefix + " : " + data._labels[tooltipItem[0].index].label;
}
return data.labels[tooltipItem[0].index];
}
}
},
responsive: self.attr.graphOptions.responsive,
elements: {
line: {
fill: false
},
point:{
radius: 5
}
},
scales: {
ticks: {
beginAtZero: self.attr.graphOptions.startAtZero
},
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true,
},
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.xAxisLabelText
},
}],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
},
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
beginAtZero: self.attr.graphOptions.startAtZero // minimum value will be 0.
},
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.yAxisLabelText
},
}
]
},
legend: {
position: self.attr.graphOptions.legendPosition,
display: self.attr.graphOptions.showTopLegend // Set the legend at the top of the graph to be displayed
},
legendCallback: function(chart) {
if(!self.attr.graphOptions.showLegend) return;
var text = [];
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<p class="legend-item valign-wrapper ' + chart.id + '-legend">');
if (chart.data.labels[i]) {
if (self.attr.graphOptions.preFixedLabels) {
var strong = '<strong>' + chart.data._labels[i].label_prefix + ':</strong>';
var label = strong + " " +"<span>"+chart.data._labels[i].label+"</span>";
text.push(label);
} else {
text.push('<i class="fa fa-circle" aria-hidden="true" style="color:' + self.attr.colors[i] + '"></i>');
text.push('<span>' + chart.data.labels[i] + '</span>');
}
}
text.push('</p>');
}
return text.join("");
},
}
});
}
// Scatter plot/Scatter dataset
if (_.contains([GRAPH_TYPE_SCATTER], self.attr.type)) {
self.attr.chartjs = new Chart(self.attr.canvas, { type: 'line', data: data,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItem, data) {
if (self.attr.graphOptions.preFixedLabels) {
return " " + data._labels[tooltipItem[0].index].label_prefix + " : " + data._labels[tooltipItem[0].index].label;
}
return data.labels[tooltipItem[0].index];
},
label: function(tooltipItems, data) {
// Customise the tooltip just a tiny bit
var i, label = [], l = data.datasets.length;
for (i = 0; i < l; i += 1) {
var yLabel = self.attr.graphOptions.yAxisLabelText.substring(0, 1) + " : " + tooltipItems.yLabel;
var xLabel = self.attr.graphOptions.xAxisLabelText .substring(0, 1) + " : " + tooltipItems.xLabel;
label[i] = yLabel + " , " + xLabel;
}
return label;
}
}
},
responsive: self.attr.graphOptions.responsive,
elements: {
line: {
fill: false
},
point:{
radius: 5
}
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.xAxisLabelText
},
ticks: {
// suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// beginAtZero: self.attr.graphOptions.startAtZero // minimum value will be 0.
},
}],
yAxes: [{
scaleLabel: {
display: self.attr.graphOptions.showAxisLables,
labelString: self.attr.graphOptions.yAxisLabelText
},
ticks: {
// suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// beginAtZero: self.attr.graphOptions.startAtZero // minimum value will be 0.
},
}]
},
showLines: false, //Difference from the rest
legend: {
position: self.attr.graphOptions.legendPosition,
display: self.attr.graphOptions.showTopLegend // Set the legend at the top of the graph to be displayed
},
legendCallback: function(chart) {
if(!self.attr.graphOptions.showLegend) return;
var text = [];
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<p class="legend-item valign-wrapper ' + chart.id + '-legend">');
if (chart.data.labels[i]) {
if (self.attr.graphOptions.preFixedLabels) {
var strong = '<strong>' + chart.data._labels[i].label_prefix + ':</strong>';
text.push('<i class="fa fa-circle" aria-hidden="true" style="color:' + self.attr.colors[i] + '"></i>');
var label = strong + " " +"<span>"+chart.data._labels[i].label+"</span>";
text.push(label);
} else {
text.push('<i class="fa fa-circle" aria-hidden="true" style="color:' + self.attr.colors[i] + '"></i>');
text.push('<span>' + chart.data.labels[i] + '</span>');
}
}
text.push('</p>');
}
return text.join("");
},
}
});
}
// Add the custom labels to the view
appendCustomLegend();
// Initialize on point click
initPointClick();
}
},
appendCustomLegend = function() {
if ( self.attr.graphOptions.legendContainer == undefined || (self.attr.graphOptions.legendContainer === null || self.attr.graphOptions.legendContainer.get(0) === undefined) )
return console.warn("Unable to create legend, legend container not defined or not found, please add the legend container on graph options");
self.attr.graphOptions.legendContainer.html(self.attr.chartjs.generateLegend());
if(self.attr.graphOptions.legendContainer != null)
initLabelClick();
},
/**
* leGraph on click point on graph
*
*/
initPointClick = function() {
self.attr.canvas.canvas.onclick = function(evt){
var activePoint = self.attr.chartjs.getElementAtEvent(evt);
var firstPoint = activePoint[0];
if (firstPoint !== undefined) {
self.methods.transmitCallback({
value: self.attr._data.datasets[firstPoint._datasetIndex].data[firstPoint._index],
item : self.attr._data._labels[firstPoint._index],
})
}
};
},
/**
* leGraph on label click
*
*/
initLabelClick = function() {
self.attr.graphOptions.legendContainer.on('click', ".legend-item", function() {
console.log($(this).index());
// self.attr.chartjs.update();
});
},
/**
* leGraph random color generator
* Generates a list of random colors for a specific length
*/
gimmeColor = function(size) {
var colors = [];
for(var i = 0; i < size; i++) {
var leRandomVal = Math.random() * 360 * ( i + 1 );
var _color = '#' + ('00000' + (leRandomVal * (1<<24)|0 ).toString(16) ).slice(-6);
//var _color = "hsl(" + leRandomVal.toFixed(2) + ",100%,50%)"; //Uncomment this line for HSL color generator
colors.push(_color);
}
return colors;
},
/**
* leGraph update the current graph instance with new data
*/
self.update = function(updateData) {
self.attr.chartjs.destroy();
self.attr.data = updateData;
self.draw();
}
return self;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment