dygraph multi- ine chart with different dataset

95 views

Skip to first unread message

Catia Matos

unread,

Jul 13, 2017, 5:36:52 AM7/13/17

to dygraphs-users

I Have 3 diferent types od data in my databse and i want to show them in a single multiline chart using dygraph in angularjs.

How can I do this? I already have everything set for the dygraph, i just dont know how to add 3 data sets to the data option of the controller...

I have a structure like [timestamp, 10, 20, 40] where timestamp is a date and 10 represents "live data", 20 represents "repeated data" and 40 is "passerBY data".

I can put everything together and design 3 diferrent graphs in diferents tabs but how to do this in just one graph ?

Controller:

var probingData = [];
var pb = 0
for(var y=0;y<data.length;y++){                             
    probingData[pb]=[];
    probingData[pb].push(data[y].timestamp);
    probingData[pb].push(data[y].sum[0]);
    pb++

}

 $scope.dataGraph.probing.options = options;                     
 $scope.dataGraph.probing.data    = probingData;

Before i had 3 different grpahs each one with a dataset ..

view:

<tab ng-if="user.data.root" heading="Probing" select="changeTab()" disable="!tabClick" active="activeTab.probing">  
                        <div class="no-data" ng-if="activeNoData.probing">
                            <img src="/assets/img/nodata.png"/>
                            <h3>No Data</h3>
                        </div>
                        <tabset class="box-tab box-tab-sub"> 
                            <tab ng-repeat="type in dataGraph.probing.types" heading="{{type.label}}" select="changeSubTab(type.type)" disable="!tabClick">
                                <div class="col-md-12" style="text-align:center;margin-bottom:30px" ng-repeat="graph in dataGraph.probing[type.type]">
                                    <img ng-if="!graph.options" style="height:32px;margin:50px auto;" src="/assets/img/loader.gif" />
                                    <div ng-if="graph.options">
                                        <dygraph options='graph.options' data="graph.data"></dygraph>
                                        <br>
                                    </div>
                                </div>
                            </tab>
                        </tabset>
                    </tab>
                   </tab>

Controller:

if (data[0].type.indexOf('probing_') !== -1) {
    for (var i=0; i<$scope.dataGraph.probing.types.length;i++){
        if($scope.dataGraph.probing.types[i].label.startsWith("probing_")){
            var aux = $scope.dataGraph.probing.types[i].label.replace("probing_", "");
            var str = aux.charAt(0).toUpperCase() + aux.slice(1).toLowerCase();
            $scope.dataGraph.probing.types[i].label = str;
        }
    }
     $scope.dataGraph.probing[splitKey[splitKey.length-1]][newKey].options = options;                     
     $scope.dataGraph.probing[splitKey[splitKey.length-1]][newKey].data    = dataSet;