0

(Yes I didn't find any good "question" for this problem)

Hello, I've been looking for hours now and I can't find any answers anywhere. I want to make my own up- and downtime graph with google charts using the timeline of google visualization and the pingdom API.

The problem is mainly in the javascript part, the php part is for the pingdom API. I'm using Summary.outage from the API and as you see on the webpage it will return a JSON string. And that's what I have to work with.

Current javascript I have is:

google.load("visualization", "1.1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);

function drawChart() 
{
    var json = <?php echo $list; ?>, options, data;

    data = new google.visualization.DataTable();
    data.addColumn("string","State");
    data.addColumn("date","Start");
    data.addColumn("date","End");

    for (var i = 0; i < json.length; i++) {
        data.addRow([json[i].status, new Date(json[i].timefrom * 1000), new Date(json[i].timeto * 1000)]);
    };

    options = {
        height: 500,
        timeline: { groupByRowLabel: false }
    };

    var chart = new google.visualization.Timeline(document.getElementById('graph'));
    chart.draw(data, options);
}

And it gives the output: http://puu.sh/hJk2f.png

But yeah, I want it to change to something like:

data.addColumn("date","Date");
data.addColumn("date","Start");
data.addColumn("date","End");

You know now where this is going right ? I want it to be in stead of the "up" and "down" the actual date

I have to change index 0 from here

data.addRow([/*what to put here*/, new Date(json[i].timefrom * 1000), new Date(json[i].timeto * 1000)]);

But I have no idea how. And if you think common sense It's like a bar chart with the times - also, min limit should be like start of day (00:00) and max limit should be end of day too (23:59)

So then it gives a decent overview of up and down time for the past 5 days. To make it more clear check this image - it's basically the same but instead of the procent at the bottom I want the times + instead the bar chart it's a timeline chart

Michael Belgium
  • 1
  • 2
  • Welcome to StackOVerflow. Your question is a bit too vague. Please provide more details, like your HTML or example HTML. – Twisty May 11 '15 at 16:30
  • I can't find a good question for this, I explained everything in the post anyway with images and text – Michael Belgium May 11 '15 at 16:37
  • 1
    @Twisty Would you mind [correctly capitalizing *Stack Overflow*](http://stackexchange.com/legal/trademark-guidance) when you are greeting new members? Thanks. – idmean May 11 '15 at 16:42
  • @MichaelBelgium Could you provide some example data? – Twisty May 11 '15 at 16:44
  • You can see an json response example at [the API page](https://www.pingdom.com/features/api/documentation/#ResourceSummary.outage) or if it's needed - here's my data http://puu.sh/hJxxI.png – Michael Belgium May 11 '15 at 16:52

0 Answers0