[Exercice 52] Déplacement des points sur click dans le graphique avec HighCharts

Introductionhighcharts21


Dans cet exercice, on peut bouger les points d’un graphique en cliquant dessus, puis le modèle de données JSON est enregistré quand on clique sur Sauvegarder.

Note : je commence à éviter à fond les $scope maintenant, je ne les utiliserais qu’en cas d’absolue nécessité (Par exemple pour les menus déroulants)

Je vais créer une micro App de gestion de ressources humaines utilisant ce système.

Le Code :


Je l’ai stocké sur JsFiddle ici :

http://jsfiddle.net/nicolas1000/efv0vvbp/

Le voici au cas ou :

Index.html


<!-- REF http://jsfiddle.net/highcharts/AyUbx/ draggable REF http://jsfiddle.net/pablojim/Cp73s/ highcharts-ng -->
<html >
	<head>
		<meta charset="utf-8" />
		<title>Statistiques .</title>

		<!-- LIbs -->
		<script src="librairies/angular.min.js"></script>
		<script src="librairies/highcharts.js"></script>
		<script src="librairies/highcharts-ng.js"></script>
		<script src="librairies/draggable-points.js"></script>

		<link rel="stylesheet" type="text/css" href="librairies/bootstrap.min.css">

		<script src="app.js"></script>

	</head>

<body>

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="container" config="highchartsNG" style="height: 300px"></highchart>
        <div class="well row">
            <div class="col-xs-3">
                <button ng-click="randomize()" class="btn">Randomizer la série</button>
                <button ng-click="randomize(true)" class="btn">Randomizer l'historique</button>
				<button ng-click="save()" class="btn">Sauvegarder</button>
            </div>
            <div ng-bind="drag" class="col-xs-3"></div>
            <div ng-bind="drop" class="col-xs-3"></div>
			<div id="text"></div>
        </div>
    </div>
</div>

</body>

Le fichier JS app.js :

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
    $scope.drag = 'drag feedback';
    $scope.drop = 'drop feedback';

    $scope.randomize = function (onlyHistory) {
        var seriesArray = $scope.highchartsNG.series
        for (i in seriesArray[0].data) {
            var random = Math.floor(Math.random() * 250);
            seriesArray[0].data[i] = random;
            if (!onlyHistory) seriesArray[1].data[i] = random;
        }
    };

	$scope.save= function(){
		 console.log(test);
		document.getElementById('text').innerHTML = "<br>MODELE DE DONNEE APRES SAUVEGARDE: "+test;
	}

	test  = [45, 200, 150];

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'spline'
            },
            plotOptions: {
                series: {
                    cursor: 'ns-resize',
                    point: {
                        events: {
                            drag: function (e) {
                                $scope.drag = this.series.name + ' = ' + Highcharts.numberFormat(e.newY, 2);
                                $scope.$apply($scope.test);

                            },
                            drop: function () {
                                $scope.drop = this.series.name + ' = ' + Highcharts.numberFormat(this.y, 2);
                                $scope.$apply();
								var point = Highcharts.numberFormat(this.y, 2);
								test[this.index] = parseInt(point); 

                            }
                        }
                    },
                    stickyTracking: false
                },
                column: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                yDecimals: 2
            },

        },

        xAxis: {
            categories: ['Puissance', 'Diplomes', 'Flexibilité']
        },

        series: [{
            data: [0, 71.5, 106.4],
            name: 'Historique',
            draggableY: false,
            dashStyle: 'dash'
        }, {
            data: test,
            name: 'Draggable',
            draggableY: true
        }],
        title: {
            text: 'Cliquez sur les points pour modifier les valeurs.'
        },
        loading: false
    }

});
Publicités