Cumulocity graph directive

Question

I am creating angularJS custom app based on cumulocity. Is there a directive that I could use in SDK showing the graphs? I asked about this also from cumulocity support and the answer was that their graphs are done with D3 and they also gave me this link http://krispo.github.io/angular-nvd3/#/ How can I fetch the data for this graph if they do not provide me directive out of the box?

For example if I select gateway and child device how do I fetch data for the selected machines?

score 0 · Answer 1 · answered Aug 23 '16 at 13:39

Google charts features Data Queries. Google charts and Angular are both made by Google. You could combined this with Angular.

https://developers.google.com/chart/

e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['table']});
    google.charts.setOnLoadCallback(drawVisualization);
    function drawVisualization() {
      google.visualization.drawChart({
        "containerId": "visualization_div",
        "dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=",
        "query":"SELECT 'Scoring Team', 'Receiving Team', 'Scorer', 'Minute of goal' FROM " +
                "1VlPiBCkYt_Vio-JT3UwM-U__APurJvPb6ZEJPg",
        "refreshInterval": 5,
        "chartType": "Table",
        "options": {}
     });
    }
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>

Have you used google charts with Cumulocity? The data comes in weird format so I don't know if this is easily implemented. — Shnigi, Aug 24 '16 at 07:00

score 0 · Accepted Answer · answered Dec 01 '16 at 12:22

So I asked Cumulocity support again and there is no official directive for showing graphs. In the end I just used Angular NVD3 directives from here: https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives

It needed a little bit updates and fixes but thats the way to do it.

Cumulocity graph directive

2 Answers2