javascript - How to build Scada Alerts using HighCharts

Question

Hey I need to convert zamel code to JavaScript Code. One of the controllers of zamel, allows monitoring of Scada alerts. I have the following controller:

The way this controller works: we have 20 alerts on board, each alert has 3 states:

1. Ok State - color with green.
2. Alert state - color with yellow.
3. Danger state - color with red.

I need to build a controller using Highcharts API, The controller need to deal with real time data(update on live). The controller need to be responsive and collapsible. Can I achieve this goals using HighCharts API , If so how. I would be glad for any initial help in build this controller.

Answer 1

I think that in your case the best idea will be to use simple heatmap chart. It will give you a possibility of changing the data, resizing the chart, using tooltip etc.

Here you can find code that may help you:

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      visible: false
    },

    title: {
      text: 'Example'
    },

    colorAxis: {
      stops: [
        [0, 'green'],
        [0.5, 'green'],
        [0.49, 'yellow'],
        [0.9, 'yellow'],
        [0.9, 'red']
      ],
      min: 0,
      max: 1
    },
    legend: {
      enabled: false
    },
    series: [{
      borderWidth: 10,
      borderColor: 'white',
      keys: ['x', 'y', 'value', 'name'],
      data: [
        [0, 0, 1, 'name1'],
        [0, 1, 0, 'name2'],
        [0, 2, 0.5, 'name3'],
        [0, 3, 0.5, 'name4'],
        [0, 4, 0, 'name5'],
        [1, 0, 1, 'name6'],
        [1, 1, 0, 'name7'],
        [1, 2, 1, 'name8'],
        [1, 3, 0, 'name9'],
        [1, 4, 0, 'name10']
      ],
      dataLabels: {
        enabled: true,
        color: '#000000',
        formatter: function() {
          return (this.key)
        }
      }
    }]
  });

I have used 3 values: 0 for 'ok', 0.5 for 'alert' and 1 for 'danger'.

Here you can see an example how it can work: http://jsfiddle.net/d7zt64v4/1/