Highcharts-ng

A simple Angularjs directive for Highcharts. AngularJs, Highcharts

by jer2

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<div ng-app="HelloApp">
    <div ng-controller="MyController">
        <br>
        <input type="button" value="update" ng-click="updateTopValues()" />
        <br>
        Not in myDiv:  top = {{top}}.
        <br>
        <my-div cls="myClass">Last:{{top}}.
            <br>All:
            <div ng-repeat="top in tops">Top = {{top}}</div>
        </my-div>
    </div>
</div>

CSS

.myClass {
    background-color: #DA0000;
    width:100px;
    position: absolute;
}

JavaScript

angular.module('components', [])
    .controller('MyController', function ($scope) {


    /**
        $scope.logWidth = function() {
            var myDiv = document.getElementsByClassName('myClass')[0];
            var style = window.getComputedStyle(myDiv);
            console.log("width is", style.width);
        }
        
        $scope.increaseWidth = function() {
            var myDiv = document.getElementsByClassName('myClass')[0];
            var style = window.getComputedStyle(myDiv);
            var width = parseInt(style.width.replace('px', ''));
            var newWidth = width + 20;
            myDiv.style.width = newWidth + 'px';
            $scope.logWidth();
        }
        **/

    $scope.tops = [];
    $scope.top = '';
    $scope.appendNewTop = function () {
        var myDiv = document.getElementsByClassName('myClass')[0];
        var style = window.getComputedStyle(myDiv);
        $scope.tops.push(style.top);
        $scope.top = style.top;
        console.log("added top", style.top);
        $scope.$apply();
    }

    $scope.updateTopValues = function () {
        var tmp = $scope.tops;
        $scope.tops = [];
        $scope.tops = tmp;
        tmp = $scope.top;
        $scope.top = '';
        $scope.top = tmp;
    }


    $scope.drag = function (event) {
        var startX = event.clientX;
        var startY = event.clientY;
        var elementToDrag = event.currentTarget;
        var origX = elementToDrag.offsetLeft;
        var origY = elementToDrag.offsetTop;
        var deltaX = startX - origX;
        var deltaY = startY - origY;

        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);

        event.stopPropagation();
        event.preventDefault();

        function moveHandler(e) {
            var newX = e.clientX - deltaX;
            var newY = e.clientY - deltaY;
            elementToDrag.style.left = newX + "px";
            elementToDrag.style.top...