Plot a Ganglia graph using AngularJS

Question

I would like to plot a graph in AngularJS, using Highcharts, to be something like this:

This graph represents the load of a server in the last hour. So the datapoints given, contains a point and epoch time.

The data is received in a JSON format, [point,epochtime], as follows:

[
  {
    "ds_name": "a0",
    "cluster_name": "",
    "graph_type": "stack",
    "host_name": "",
    "metric_name": "1-min",
    "color": "#BBBBBB",
    "datapoints": [
      [
        0.58,
        1604244900
      ],
      [
        0.59733333333,
        1604244915
      ],
      [
        0.6,
        1604244930
      ],
      [
        0.6,
        1604244945
      ],
      [
        0.6,
        1604244960
      ],
      [
        0.6,
        1604244975
      ],
      [
        0.612,
        1604244990
      ]
    ]
  },
  {
    "ds_name": "a2",
    "cluster_name": "",
    "graph_type": "line",
    "host_name": "",
    "metric_name": "CPUs ",
    "color": "#FF0000",
    "datapoints": [
      [
        2,
        1604244900
      ],
      [
        2,
        1604244915
      ],
      [
        2,
        1604244930
      ],
      [
        2,
        1604244945
      ],
      [
        2,
        1604244960
      ],
      [
        2,
        1604244975
      ],
      [
        2,
        1604244990
      ],
      [
        2,
        1604245005
      ]
    ]
  },
  {
    "ds_name": "a3",
    "cluster_name": "",
    "graph_type": "line",
    "host_name": "",
    "metric_name": "Procs",
    "color": "#2030F4",
    "datapoints": [
      [
        1,
        1604244900
      ],
      [
        1,
        1604244915
      ],
      [
        1,
        1604244930
      ]
    ]
  }
]

I posted here only part of the dataset, since it is too long, but I think you can understand the format.

How can I draw something similar using Highcharts?

score 0 · Answer 1 · answered Nov 03 '20 at 07:18

The most important thing here is to properly parse the date. Since the names in the JSON are not the same as Highcharts requires you have to pass them manually to the right places as I did it in the demo below.
I also recommend using the keys property because the data should be declared as [x, y], in your case it is the other way around. You can change that by setting this property.
Notice that in the Highcharts there is no such series as stack, it is just column.

API: https://api.highcharts.com/highcharts/series.line.keys
Demo: https://jsfiddle.net/BlackLabel/246phxum/

score 0 · Answer 2 · answered Nov 07 '20 at 16:40

So this is how I did it eventually, the most suitable types of charts are line, and area chart.

Highcharts.chart("container", {
  chart: {
    type: 'line'
  },
  xAxis: {
    type: "datetime",
        labels: {
        formatter: function () {
           return Highcharts.dateFormat('%H:%M:%S.%L', this.value);
             }
        }
  },
  series: [{
      name: "A",
      type: "area",
      color: "#BB000B",
      keys: ["y", "x"],
      data: [
        [0.58, 1604244900],
        [0.59733333333, 1604244915],
        [0.6, 1604244930],
        [0.6, 1604244945],
        [0.6, 1604244960],
        [0.6, 1604244975],
        [0.612, 1604244990]
      ]
    },
    {
      name: "B",
      type: "line",
      color: "#FF00F0",
      keys: ["y", "x"],
      data: [
        [2, 1604244900],
        [2, 1604244915],
        [2, 1604244930],
        [2, 1604244945],
        [2, 1604244960],
        [2, 1604244975],
        [2, 1604244990],
        [2, 1604245005]
      ]
    }, {
      name: 'C',
      keys: ['y', 'x'],
      data: [
        [1, 1604244900],
        [1, 1604244915],
        [1, 1604244930],
        [1, 1604244945],
        [1, 1604244960],
        [1, 1604244975],
        [1, 1604244990],
        [1, 1604245005]
      ]
    }
  ]
});

Plot a Ganglia graph using AngularJS

2 Answers2