<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js" ></script>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.js"></script>
<script src="angular-chartist.js"></script>
<!-- <script src="chartist-plugin-axistitle.js"></script> -->
<script src="chartist-plugin-legend.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="chartist">
<div ng-controller="chartistController">
<div ng-init="change()">
<md-select ng-model="attribute" ng-change="change()">
<md-option ng-value="attr" ng-repeat="attr in attributes">{{ attr }}</md-option>
</md-select>
<md-tabs md-selected="selectedIndex" md-dynamic-height="true">
<md-tab label="Chart-1" md-on-select="tabToggled('chart-1')">
<chartist class="ct-chart ct-major-eleventh" id="chart-1" chartist-data="data1" chartist-chart-options="options1" chartist-chart-type="Bar"></chartist>
</md-tab>
<md-tab label="Chart-2" md-on-select="tabToggled('chart-2')">
<chartist class="ct-chart ct-major-eleventh" id="chart-2" chartist-data="data2" chartist-chart-options="options2" chartist-chart-type="Bar"></chartist>
</md-tab>
<md-tab label="Chart-3" md-on-select="tabToggled('chart-3')">
<chartist class="ct-chart ct-major-eleventh" id="chart-3" chartist-data="data3" chartist-chart-options="options3" chartist-chart-type="Bar"></chartist>
</md-tab>
</md-tabs>
</div>
</div>
</body>
</html>
var app = angular.module('chartist', ['angular-chartist', 'ngMaterial', 'ngAnimate', 'ngAria']);
app.controller('chartistController', function($scope, $timeout) {
$scope.attributes = ["Score", "Distance", "Time", "Speed"];
$scope.attribute = $scope.attributes[0];
$scope.change = function() {
console.log($scope.attribute);
if ($scope.attribute === "Score") {
$scope.data1 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [
[20, 30, 40, 10, 35, 27]
]
};
$scope.data2 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [
[20, 30, 40, 10, 35, 27]
]
};
$scope.data3 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [{
name: "Nitesh",
data: [20, 30, 40, 10, 35, 27]
}, {
name: "Saras Arya",
data: [10, 12, 25, 21, 40, 22]
}, {
name: "Kirti",
data: [10, 23, 24, 59, 22, 17]
}]
};
$scope.options1 = {
chartPadding: {
top: 20,
right: 0,
bottom: 20,
left: 5
},
axisY: {
onlyInteger: true
},
plugins: [
]
};
$scope.options2 = {
chartPadding: {
top: 20,
right: 0,
bottom: 20,
left: 20
},
axisY: {
onlyInteger: true
},
plugins: [
]
};
$scope.options3 = {
chartPadding: {
top: 20,
right: 0,
bottom: 20,
left: 5
},
axisY: {
onlyInteger: true,
},
stackbar: false,
plugins: [
Chartist.plugins.legend({
legendNames: false,
})
]
};
} else if ($scope.attribute === "Distance") {
$scope.data1 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [
[40, 50, 30, 10, 25, 45]
]
};
$scope.data2 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [
[40, 50, 30, 10, 25, 45]
]
};
$scope.data3 = {
labels: ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
series: [{
name: "kamran",
data: [20, 30, 40, 10, 35, 27]
}, {
name: "Sunny",
data: [10, 12, 25, 21, 40, 22]
}, {
name: "Dani",
data: [10, 23, 24, 59, 22, 17]
}]
};
$scope.options1 = {
seriesBarDistance: 0,
chartPadding: {
top: 10,
right: 40,
bottom: 20,
left: 25
},
axisY: {
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value + ' min';
},
scaleMinSpace: 40,
//text-anchor: middle
},
plugins: []
};
$scope.options2 = {
chartPadding: {
top: 20,
right: 0,
bottom: 20,
left: 40
},
axisY: {
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value + ' km';
},
},
plugins: [
]
};
$scope.options3 = {
chartPadding: {
top: 20,
right: 0,
bottom: 20,
left: 5
},
axisY: {
onlyInteger: true
},
plugins: [
Chartist.plugins.legend({
legendNames: false,
})
]
};
} else if ($scope.attribute === "Speed") {
}
};
$scope.tabToggled = function(tab) {
console.log(tab);
if (tab === "chart-1") {
$timeout(function() {
angular.element('#' + tab).each(function(i, e) {
console.log("Updating");
e.__chartist__.update($scope.data1, $scope.options1, true);
});
}, 100);
} else if (tab === 'chart-2') {
$timeout(function() {
angular.element('#' + tab).each(function(i, e) {
console.log("Updating");
e.__chartist__.update($scope.data2, $scope.options2, true);
});
}, 100);
} else if (tab === 'chart-3') {
$timeout(function() {
angular.element('#' + tab).each(function(i, e) {
console.log("Updating");
e.__chartist__.update($scope.data3, $scope.options3, true);
});
}, 100);
}
};
});
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(["angular","chartist"], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('angular'), require('chartist'));
} else {
root.angularChartist = factory(root.angular, root.Chartist);
}
}(this, function(angular, Chartist) {
'use strict';
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/*global angular, Chartist*/
var AngularChartistCtrl = (function () {
function AngularChartistCtrl($scope, $element) {
var _this = this;
_classCallCheck(this, AngularChartistCtrl);
this.data = $scope.data;
this.chartType = $scope.chartType;
this.events = $scope.events() || {};
this.options = $scope.chartOptions() || null;
this.responsiveOptions = $scope.responsiveOptions() || null;
this.element = $element[0];
this.renderChart();
$scope.$watch(function () {
return {
data: $scope.data,
chartType: $scope.chartType,
chartOptions: $scope.chartOptions()
};
}, this.update.bind(this), true);
$scope.$on('$destroy', function () {
if (_this.chart) {
_this.chart.detach();
}
});
}
_createClass(AngularChartistCtrl, [{
key: 'bindEvents',
value: function bindEvents() {
var _this2 = this;
Object.keys(this.events).forEach(function (eventName) {
_this2.chart.on(eventName, _this2.events[eventName]);
});
}
}, {
key: 'renderChart',
value: function renderChart() {
// ensure that the chart does not get created without data
if (this.data) {
this.chart = Chartist[this.chartType](this.element, this.data, this.options, this.responsiveOptions);
this.bindEvents();
return this.chart;
}
}
}, {
key: 'update',
value: function update(newConfig, oldConfig) {
// Update controller with new configuration
this.chartType = newConfig.chartType;
this.data = newConfig.data;
this.options = newConfig.chartOptions;
//this.renderChart();
//If chart type changed we need to recreate whole chart, otherwise we can update
if (!this.chart || newConfig.chartType !== oldConfig.chartType) {
this.renderChart();
} else {
this.chart.update(this.data, this.options);
}
}
}]);
return AngularChartistCtrl;
})();
AngularChartistCtrl.$inject = ['$scope', '$element'];
function chartistDirective() {
return {
restrict: 'EA',
scope: {
// mandatory
data: '=chartistData',
chartType: '@chartistChartType',
// optional
events: '&chartistEvents',
chartOptions: '&chartistChartOptions',
responsiveOptions: '&chartistResponsiveOptions'
},
controller: 'AngularChartistCtrl'
};
}
chartistDirective.$inject = [];
/*eslint-disable no-unused-vars */
var angularChartist = angular.module('angular-chartist', []).controller('AngularChartistCtrl', AngularChartistCtrl).directive('chartist', chartistDirective);
/*eslint-enable no-unused-vars */
return angularChartist;
}));
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function () {
return (root.returnExportsGlobal = factory());
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['Chartist.plugins.ctAxisTitle'] = factory();
}
}(this, function () {
/**
* Chartist.js plugin to display a title for 1 or 2 axises.
*
*/
/* global Chartist */
(function (window, document, Chartist) {
'use strict';
var axisDefaults = {
axisTitle: '',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 0
},
textAnchor: 'middle',
flipText: false
};
var defaultOptions = {
xAxis: axisDefaults,
yAxis: axisDefaults
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctAxisTitle = function (options) {
options = Chartist.extend({}, defaultOptions, options);
return function ctAxisTitle(chart) {
chart.on('created', function (data) {
if (!options.axisX.axisTitle && !options.axisY.axisTitle) {
throw new Error('ctAxisTitle plugin - You must provide at least one axis title');
} else if (!data.axisX && !data.axisY) {
throw new Error('ctAxisTitle plugin can only be used on charts that have at least one axis');
}
var xPos;
var yPos;
var title;
//position axis X title
if (options.axisX.axisTitle && data.axisX) {
xPos = (data.axisX.axisLength / 2) + data.options.axisX.offset + data.options.chartPadding.left;
yPos = data.options.chartPadding.top;
if (data.options.axisX.position === 'end') {
yPos += data.axisY.axisLength;
}
title = new Chartist.Svg("text");
title.addClass(options.axisX.axisClass);
title.text(options.axisX.axisTitle);
title.attr({
x: xPos + options.axisX.offset.x,
y: yPos + options.axisX.offset.y,
"text-anchor": options.axisX.textAnchor
});
data.svg.append(title, true);
}
//position axis Y title
if (options.axisY.axisTitle && data.axisY) {
xPos = 0;
yPos = (data.axisY.axisLength / 2) + data.options.chartPadding.top;
if (data.options.axisY.position === 'end') {
xPos = data.axisX.axisLength;
}
var transform = 'rotate(' + (options.axisY.flipTitle ? -90 : 90) + ', ' + xPos + ', ' + yPos + ')';
title = new Chartist.Svg("text");
title.addClass(options.axisY.axisClass);
title.text(options.axisY.axisTitle);
title.attr({
x: xPos + options.axisY.offset.x,
y: yPos + options.axisY.offset.y,
transform: transform,
"text-anchor": options.axisY.textAnchor
});
data.svg.append(title, true);
}
});
};
};
}(window, document, Chartist));
return Chartist.plugins.ctAxisTitle;
}));
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['chartist', 'jquery'], function (chartist, jquery) {
return (root.returnExportsGlobal = factory(chartist, jquery));
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory(require('chartist'), require('jquery'));
} else {
root['Chartist.plugins.legend'] = factory(root.chartist, root.jquery);
}
}(this, function () {
/**
* This Chartist plugin creates a legend to show next to the chart.
*
*/
(function (Chartist, $) {
'use strict';
var $legend = null;
var defaultOptions = {
className: '',
legendNames: false,
clickable: true
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.legend = function (options) {
options = Chartist.extend({}, defaultOptions, options);
//console.log(options);
return function legend(chart) {
console.log("Hmmm");
// Set a unique className for each series so that when a series is removed,
// the other series still have the same color.
if (options.clickable) {
chart.data.series.forEach(function (series, seriesIndex) {
if (typeof series !== 'object') {
series = {
data: series
};
}
series.className = series.className || chart.options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex);
});
}
var $chart = $(chart.container),
legendClass = chart instanceof Chartist.Pie ? 'ct-legend-inside' : '';
if ( $legend !== null ) {
$legend.remove();
}
$legend = $chart
.append('<ul class="ct-legend"></ul>')
.find('.ct-legend')
.addClass(legendClass)
.addClass(options.className);
var insertLegendItem = function (i, name) {
$legend.append('<li class="ct-series-' + i + '" data-legend="' + i + '">' + name + '</li>');
};
var removedSeries = [],
originalSeries = chart.data.series.slice(0);
if (options.clickable) {
$legend.on('click', 'li', function (e) {
e.preventDefault();
var seriesIndex = parseInt($(this).attr('data-legend')),
removedSeriesIndex = removedSeries.indexOf(seriesIndex);
if (removedSeriesIndex > -1) {
// Add to series again.
removedSeries.splice(removedSeriesIndex, 1);
$(this).removeClass('inactive');
} else {
// Remove from series, only if a minimum of one series is still visible.
if (chart.data.series.length > 1) {
removedSeries.push(seriesIndex);
$(this).addClass('inactive');
}
}
// Reset the series to original and remove each series that
// is still removed again, to remain index order.
var seriesCopy = originalSeries.slice(0);
// Reverse sort the removedSeries to prevent removing the wrong index.
removedSeries.sort().reverse();
removedSeries.forEach(function (series) {
seriesCopy.splice(series, 1);
});
chart.data.series = seriesCopy;
chart.update();
});
}
// Get the right array to use for generating the legend.
var legendNames = chart.data.series;
if (chart instanceof Chartist.Pie) {
legendNames = chart.data.labels;
}
legendNames = options.legendNames || legendNames;
// Loop through all legends to set each name in a list item.
legendNames.forEach(function (legend, i) {
var legendName = legend.name || legend;
insertLegendItem(i, legendName);
});
};
};
console.log("Mid end");
}(Chartist, $));
console.log("Complete end");
return Chartist.plugins.legend;
}));
.ct-chart {
position: relative;
}
.ct-legend {
position: relative;
top : 0px;
z-index: 10;
list-style: none;
}
.ct-legend li {
position: relative;
padding-left: 50px;
margin-bottom: 3px;
cursor: pointer;
}
.ct-legend li:before {
width: 12px;
height: 12px;
position: absolute;
left: 15px;
content: '';
border: 3px solid transparent;
border-radius: 2px;
}
.ct-legend li.inactive:before {
background: transparent;
}
/* .ct-legend.ct-legend-inside {
position: absolute;
top: 100px;
right: 100px;
}*/
.ct-legend .ct-series-0:before {
background-color: #d70206;
border-color: #d70206;
}
.ct-legend .ct-series-1:before {
background-color: #f05b4f;
border-color: #f05b4f;
}
.ct-legend .ct-series-2:before {
background-color: #f4c63d;
border-color: #f4c63d;
}
.ct-legend .ct-series-3:before {
background-color: #d17905;
border-color: #d17905;
}
.ct-legend .ct-series-4:before {
background-color: #453d3f;
border-color: #453d3f;
}