highcharts: A chart with 1 or 0 in Y axis

Question

We have some PCs and IP-Cameras working and I wrote a python script to check all machines if they are up or not with pinging them. If machine is up result will be 1 and if it's down the result will be 0. The script writing it with current time.

There is two tables.

1. devices: Keeps devices ID, name, IP, etc
2. ping: Keeps Ping results.

The script getting IP address and id of device from devices table and pinging it and writing the results to ping table. Here the code (I know it's verdantly):

# -*- coding: utf-8 -*-
import subprocess, sys
from time import sleep
try:
    import MySQLdb
except:
    print "Please Install Python's MySQLdb library"
    sys.exit(0)
class bcolors:
    HEADER = '\033[95m'
    OKBLUE = '\033[94m'
    OKGREEN = '\033[92m'
    WARNING = '\033[93m'
    FAIL = '\033[91m'
    ENDC = '\033[0m'

def cprint(txt, typ):
    print "%s%s%s" %(typ, txt, bcolors.ENDC)

def ping(hname, verbose=False):
    response = p = subprocess.Popen(["ping", "-c1", hname], stdout=subprocess.PIPE)
    res = response.communicate()[0]
    if not "100% packet loss" in res:
        if verbose:
            cprint("The Host is up.", bcolors.OKGREEN)
        return True
    else:
        if verbose:
            cprint("The Host is down.", bcolors.FAIL)
        return False
#code starts here:
try:
    db = MySQLdb.connect(host="<The Host>", user="<user name for sql>", passwd="<password for sql>", db="<database name>", charset="utf8")
    cur = db.cursor()
    cur.execute("SELECT * FROM devices")
    for row in cur.fetchall() :
        devID = row[0]
        devIP = row[3]
        if ping(devIP):
            cur.execute("""INSERT INTO ping (id, date, status) VALUES (%s, DEFAULT, %s)""",(devID, 1))
        else:
            cur.execute("""INSERT INTO ping (id, date, status) VALUES (%s, DEFAULT, %s)""",(devID, 0))
    db.commit()
    db.close()
except:
    cprint("No MySQL connection." bcolors.FAIL)

It works with crontab every 10 minutes.

So we have data here and I wanted to put it in graph and decided to use highcharts.

With line plot I get an average line for all results.(ones and zeros)

With bar chart I get a huge bar for sum of all results.(ones and zeros)

What kind of chart you can advice me and how to plot it. Like I hoped there is a way to plot it like:

y axis: up or down

x axis: time.

Data I want to plot looks like:

[Date.UTC(2014, 09, 10, 22, 50, 11), 0], [Date.UTC(2014, 09, 10, 22, 40, 11), 0]

Answer 1

A couple of options would be a column chart or a step line chart.

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            min:0,
            max:1,
            tickInterval: 1
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            type: 'line',
            step: true,
//            type: 'column',
            data: [[Date.UTC(2014, 09, 10, 22, 50, 11), 0],
                  [Date.UTC(2014, 09, 11, 22, 50, 11), 1],
                   [Date.UTC(2014, 09, 12, 22, 50, 11), 0],
                  [Date.UTC(2014, 09, 13, 22, 50, 11), 1],
                  [Date.UTC(2014, 09, 14, 22, 50, 11), 1]]
        }]
    });
});

http://jsfiddle.net/tabrthca/1/