+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="../bower_components/flatstrap/dist/css/flatstrap.min.css" rel="stylesheet" type="text/css" />
- <style>
- input[type="color"] {
- border: none;
- color: transparent;
- padding: 0;
- margin: 0;
- width: 60px;
- height: 20px;
- }
-
- .options,
- .datasets {
- width: 50%;
- float: left;
- padding: 10px;
- }
- </style>
-</head>
-
-<body ng-app="app" ng-controller="mainController" class="container">
- <div style="width:100%">
- <div>
- <canvas id="canvas" height="350" width="600"></canvas>
- </div>
- </div>
- <hr>
- <label>Chart Type: </label>
- <select ng-model="chartType" ng-change="init()">
- <option ng-repeat="type in chartTypes" ng-selected="type.selected" value="{{type.value}}">{{type.name}}</option>
- </select>
- <hr>
- <div class="options">
- <textarea ng-model="options" style="width:100%;height:400px;"></textarea>
- </div>
- <div class="datasets">
- <button ng-click="randomizeData()" class="btn btn-primary">Randomize Data</button>
- <hr>
- <div ng-repeat="dataset in chart.data.datasets">
- <pre>{{dataset.data}}</pre>
- <div>
- borderWidth:
- <input type="number" ng-model="dataset.borderWidth" ng-change="_chart.update()" />
- </div>
- <div>
- hoverBorderWidth:
- <input type="number" ng-model="dataset.hoverBorderWidth" ng-change="_chart.update()" />
- </div>
- <div>
- pointBorderWidth:
- <input type="number" ng-model="dataset.pointBorderWidth" ng-change="_chart.update()" />
- </div>
- <div>
- pointHoverBorderWidth:
- <input type="number" ng-model="dataset.pointHoverBorderWidth" ng-change="_chart.update()" />
- </div>
- <hr>
- </div>
- </div>
- <script src="../Chart.js"></script>
- <script src="../bower_components/jquery/dist/jquery.min.js"></script>
- <script src="../bower_components/angular/angular.min.js"></script>
- <script src="playground.js"></script>
-</body>
-
-</html>
+++ /dev/null
-(function() {
-
- var module = angular.module('app', []);
-
- module.controller('mainController', function($scope, $timeout) {
- angular.extend($scope, {
-
- chart: {},
- chartTypes: chartTypes(),
-
- init: init,
- randomizeData: randomizeData,
- });
-
-
- init();
-
-
-
- function init() {
- if ($scope._chart) {
- $scope._chart.destroy();
- }
- $scope.ctx = $('canvas')[0].getContext("2d");
- buildData();
- buildChart();
-
- $scope.$watch('options', function(val) {
- try {
- angular.extend($scope.chart.options, JSON.parse(val));
- } catch (e) {
- console.log(e);
- }
- }, true);
-
- $scope.$watch('chart.options', function() {
- if ($scope._chart) {
- $scope._chart.update();
- }
- }, true);
- }
-
- function chartTypes() {
- return [{
- name: 'Line/Scatter',
- value: 'Line/Scatter',
- selected: true
- }, {
- name: 'Bar',
- value: 'Bar',
- }, {
- name: 'Pie/Doughnut',
- value: 'Pie/Doughnut',
- }, {
- name: 'Polar',
- value: 'Polar',
- }, {
- name: 'Radar',
- value: 'Radar',
- }];
- }
-
-
-
- function buildData() {
- $scope.chart.data = groupData();
- $scope.chart.options = {
- stacked: true,
- hoverMode: 'label'
- };
- $scope.options = stringify($scope.chart.options);
- }
-
- function buildChart() {
- $scope._chart = new Chart($scope.ctx)[$scope.chartType || 'Line']($scope.chart);
- }
-
- function stringify(o) {
- var cache = [];
- var result = JSON.stringify(o, function(key, value) {
- if (typeof value === 'object' && value !== null) {
- if (cache.indexOf(value) !== -1) {
- // Circular reference found, discard key
- return;
- }
- // Store value in our collection
- cache.push(value);
- }
- return value;
- }, 1);
- cache = null; // Enable garbage collection
- return result;
- }
-
-
- function groupData() {
- return {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "Dataset 1",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- backgroundColor: randomColor(0.8),
- }, {
- label: "Dataset 2",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- backgroundColor: randomColor(0.8),
- }, {
- label: "Dataset 3",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- backgroundColor: randomColor(0.8),
- }]
- };
- }
-
- function flatData() {
- return {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }]
- };
- }
-
- function randomizeData() {
-
- angular.forEach($scope.chart.data.datasets, function(dataset) {
-
- dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
- dataset.backgroundColor = randomColor(.8);
- dataset.borderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(1);
- dataset.pointBorderColor = randomColor(1);
-
-
- $scope._chart.update();
- });
- }
-
-
-
-
- function randomScalingFactor() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- }
-
- function randomColor(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (typeof opacity != "undefined" ? opacity : '.3') + ')';
- }
-
- });
-
-})();
projects / thirdparty / Chart.js.git / commitdiff
