AngularJS [SOLVED]: angularjs div with ng repeat dont show dygraph

AngularJS [SOLVED]: angularjs div with ng repeat dont show dygraph

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: angularjs div with ng repeat dont show dygraph

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246147

    Cloudy Point
    Keymaster

    QuestionQuestion

    I want to draw the graphs inside a json. Each key is a graph and in my case I have 3 nodes, so I will show 3 graphs.

    Here’s my json:

    {"disk_svctm_sda":{"data":[["2017-12-21T13:26:50.000Z",0],["2017-12-21T13:31:50.000Z",0],["2017-12-21T13:36:50.000Z",0],["2017-12-21T13:41:50.000Z",0],["2017-12-21T13:46:50.000Z",0],["2017-12-21T13:51:50.000Z",0],["2017-12-21T13:56:50.000Z",0],["2017-12-21T14:01:50.000Z",0],["2017-12-21T14:06:50.000Z",0],["2017-12-21T14:11:50.000Z",0],["2017-12-21T14:16:50.000Z",0],["2017-12-21T14:21:50.000Z",0]],"options":{"labels":["Date","svctm"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Service Time","axes":{"y":{"valueRange":[0,"0.13"]}}}},"disk_util_sda":{"data":[["2017-12-21T13:25:00.000Z",0],["2017-12-21T13:30:00.000Z",0],["2017-12-21T13:35:00.000Z",0],["2017-12-21T13:40:00.000Z",0],["2017-12-21T13:45:00.000Z",0],["2017-12-21T13:50:00.000Z",0],["2017-12-21T13:55:00.000Z",0],["2017-12-21T14:00:00.000Z",0],["2017-12-21T14:05:00.000Z",0],["2017-12-21T14:10:00.000Z",0],["2017-12-21T14:15:00.000Z",0],["2017-12-21T14:20:00.000Z",0]],"options":{"labels":["Date","utilization"],"showRangeSelector":true,"legend":"always","ylabel":"","title":"Usage Time","axes":{"y":{"valueRange":[0,"0.13"]}}}},"disk_usage":{"data":[["2017-12-21T13:24:58.000Z",0.19,0.04,0],["2017-12-21T13:29:58.000Z",0.19,0.04,0],["2017-12-21T13:34:58.000Z",0.19,0.04,0],["2017-12-21T13:39:58.000Z",0.19,0.04,0],["2017-12-21T13:44:58.000Z",0.19,0.04,0],["2017-12-21T13:49:58.000Z",0.19,0.04,0],["2017-12-21T13:54:58.000Z",0.19,0.04,0],["2017-12-21T13:59:58.000Z",0.19,0.04,0],["2017-12-21T14:04:58.000Z",0.19,0.04,0],["2017-12-21T14:09:58.000Z",0.19,0.04,0],["2017-12-21T14:14:58.000Z",0.19,0.04,0],["2017-12-21T14:19:58.000Z",0.19,0.04,0]],"options":{"labels":["Date","avail","used","reserved for root"],"showRangeSelector":true,"legend":"always","ylabel":"GBytes","title":"Space Usage","axes":{"y":{"valueRange":[0,"0.65"]}}}}}
    

    I have the keys “disk_svctm_sda”, “disk_util_sda” and “disk_usage” anc eahc one have “data” and “options” fullfiled.

    I cant figure a way to show the three graphs in my page.. at this moment no error on console and nothing to show like the image below.

    I use a directive to bind the element to create the graph.

    (function() {
        var app = angular.module('dashboard.view', []);
    
        app.directive('dygraph', function(){
            return {
                restrict: 'E',
                scope: {
                    data    : '=',
                    options : '=?'
                },
                template: '<div style="width: 100%"></div>',
                link: function (scope, elem, attrs) {
                    if(scope != undefined && scope.options !=undefined){
                        scope.options.width = elem.parent()[0].offsetWidth;
                        var graph = new Dygraph(elem.children()[0], scope.data, scope.options);
                    }
                }        
            };
        });
    
    
    })();
    

    My html code to draw the graphs:

    <tabset class="box-tab box-tab-sub"> 
                                {{dataGraph.system.disk}}
                                <tab ng-repeat="type in dataGraph.system.types track by type" heading="{{dataGraph.system.labels[$index]}}" select="changeSubTab(type)" disable="!tabClick">
    
                                    <div ng-if="type==='disk'">
                                        <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="disk in dataGraph.system[type]" ng-if="type!='disk'">
                                        <img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
                                        <div ng-if="disk.options">
                                            {{disk.options}}
                                            {{disk.data}}
                                            <dygraph options='disk.options' data="disk.data"></dygraph>
                                            <br>
                                        </div>
                                    </div>
                                </tab>
                            </tabset>
    

    Anyone can help me?

    #246148

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    You have a missing closing </div> tag in your HTML markup –

    <tabset class="box-tab box-tab-sub"> 
        {{dataGraph.system.disk}}
        <tab ng-repeat="type in dataGraph.system.types track by type" heading="{{dataGraph.system.labels[$index]}}" select="changeSubTab(type)" disable="!tabClick">
    
            <div ng-if="type==='disk'">
                <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="disk in dataGraph.system[type]" ng-if="type!='disk'">
                <img ng-if="!disk.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
                <div ng-if="disk.options">
                    {{disk.options}}
                    {{disk.data}}
                    <dygraph options='disk.options' data="disk.data"></dygraph>
                    <br>
                </div>
            </div>  <!-- <<<< HERE -->
        </tab>
    </tabset>
    

    In your second ng-repeat, you are trying to iterate object, not array. Use it like this and remove contradicting ng-if, as type will always be ‘disk’ at this point:

    <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="(disk_type,disk) in dataGraph.system[type]" >
    

    Source: https://stackoverflow.com/questions/47927055/angularjs-div-with-ng-repeat-dont-show-dygraph
    Author: mike_t
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.