如何使用Flot和Angular添加多个图形？

Question

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!

Answer 1

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 } });
});

Answer 2

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!