0

I am having a dataset, which consists of data for multiple days. Each day will be represented in one line. This should be put in graphs using Flot.js and the data is loaded via Angularjs. On $(document).ready, there is no data existing as it is loaded from the server afterwards via HTTP. As I do not want to put all 90 days (equals to 90 lines) into one single graph, I need to split them up into separate graphs. I have seen in various tutorials how to work with directives in Angular to achieve DOM manipulation. However, this requires (per my understanding) that the raw DOM element is already existing on the page (such as in this tutorial: How to Integrate Flot with AngularJS?) Actually, this is explaining the functionality of directives well, but only in case you have one data set. As I need to split the data set up for more than one graph, how can I put them in different graphs, which are not existing at page creation?

Thanks a lot for your help!

Community
  • 1
  • 1
Stefan
  • 1
  • 1
  • You right ,$(document).ready of course will fire before you data loaded, you need to use angular $http.get and 'Then' callback as place to handle your data – happyZZR1400 Mar 24 '17 at 08:03
  • Thanks for the replies. I think something is unclear: I know, how to get the data using $http.post in my case and it is working fine, if I have the html element statically defined. But if I do not know, how much sub sets my result will have (and therefore how much html elements will be needed), I cannot create them in the html file. That is where my problem is, as I did not find a way to dynamically create HTML elements and use the Flot.js logic on them with the data retrieved. – Stefan Mar 24 '17 at 09:54

2 Answers2

0

here plunker with very basic angular+flot implementation

$http.get('api/data.json').then(res=>{
  $scope.name = res.data[0].label;
  let num =res.data[0].data[0][1];
  $.plot($("#placeholder"), [ [[0, 0], [1, num]] ], { yaxis: { max: 1 } });
});
happyZZR1400
  • 2,387
  • 3
  • 25
  • 43
0

This is the plunker how I was able to create the graphs on an array of data. The key was to use a combination of directives and ng-repeat. https://plnkr.co/edit/IUvJriqbyB792R1oyhxJ?p=preview

<div ng-controller="Ctrl">
        <div ng-repeat="result in results">
          <section>
            <chart ng-model="result" style="display:inline-block;width:400px;height:200px">

            </chart>
          </section>
        </div>
    </div>

Unfortunately it does not show the graphical results on plunker, but the same code does on my machine. Thanks!

Stefan
  • 1
  • 1
  • you plunkr wasn't work because the request url should be "api/data.json" instead of '/api/data.json – happyZZR1400 Mar 24 '17 at 11:16
  • Thanks a lot! You are right and I have adjusted the sample so that others can use it as well. It is now working as expected. – Stefan Mar 24 '17 at 13:20