CODEWITHSUNDEEP
jquerygraphflot
SQLGuru
SQLGuru

Reputation: 1099

Flot Charts, Time Scale render issue

I am new to FLOT charts and am trying to create a timescale horizontal bar graph like this:

enter image description here

I have got the graph displaying correctly when I omit the 

bars: { show: true }

but the lines are very very thin. I know one can use the "barWidth" option, but this does not seem to have any effect unless I include the snippet above.

The problem I am facing, is that when I include the snippet above, the bars no longer render in the correct place, But rather, now dock themselves to the left hand side of the page, like this:

enter image description here

The areas I have circled below should be the only area displaying, but the graph is generating a section docked to the left, like so:

enter image description here

If I omit the show:true for the bar, my graph looks like this, but the lines are just too thin:

enter image description here

Any help would be greatly appreacited!!!

My code is as such:

Included: 

 qJuery 1.11.1
 jquery.flot.js
 jquery.flot.time.js
 jquery.flot.categories.js

The div that has the graph:

<div id="chart_1_2" class="chart"></div>

Then, the JS:

var arrSouthStaging = [[gd(2000, 1, 1, 20, 10), 1], [gd(2000, 1, 1, 21, 40), 1]];
var arrNorthStaging = [[gd(2000, 1, 1, 20, 10), 2], [gd(2000, 1, 1, 22, 40), 2]];
var arrMIPETL = [[gd(2000, 1, 1, 22, 30), 3], [gd(2000, 1, 1, 22, 35), 3]];


var tickLabels = [[0, ''], [1, 'South Staging'], [2, 'North Staging'], [3, 'MIP_ETL'], [4, 'Sometimes'], [5, '']];


function gd(year, month, day, hour, min) {
        return new Date(year, month - 1, day, hour, min).getTime();
    }


var dataset = [
        {
            data: arrSouthStaging,
            color: "#FF0000",
            points: { fillColor: "#FF0000", show: false, barWidth: 2 },
            lines: { show: true }
        },
        {
            data: arrNorthStaging,
            color: "#0062E3",
            points: { fillColor: "#0062E3", show: false },
            lines: { show: true }
        },
        {
            data: arrMIPETL,
            color: "#000000",
            points: { fillColor: "#0062E3", show: false },
            lines: { show: true }
        }
    ];


$.plot("#chart_1_2", dataset,
    {
        xaxis: {
            mode: "time",
            minTickSize: [1, "hour"],
            min: (new Date("2000/01/01 20:00")),
            max: (new Date("2000/01/02 10:00")),
            twelveHourClock: false,
            timeformat: "%H:%M",
            font: {
                size: 11,
                weight: "bold",
                family: "Open Sans",
                color: "#333333"
            }
        },
        yaxis: {
            ticks: tickLabels,
            font: {
                size: 11,
                weight: "bold",
                family: "Open Sans",
                color: "#333333"
            },
            align: "left"
        },
        bars: {
            show: true,
            barWidth: 0.3,
            horizontal: true,
            //align: "center",
            //fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
        },
        grid: {
            borderWidth: 1,
            minBorderMargin: 20,
            labelMargin: 20,
            backgroundColor: { colors: ["#fff", "#e4f4f4"] }
        }

    });

Upvotes: 0

Views: 532

Answers (1)

Mark
Mark

Reputation: 108512

By default flot always draws bar charts starting from zero. You can change this behavior:

Lines and points take two coordinates. For filled lines and bars, you can specify a third coordinate which is the bottom of the filled area/bar (defaults to 0).

With this in mind, your data definition becomes:

var arrSouthStaging = [
  [gd(2000, 1, 1, 21, 40), 1, gd(2000, 1, 1, 20, 10)]
];
var arrNorthStaging = [
  [gd(2000, 1, 1, 22, 40), 2, gd(2000, 1, 1, 20, 10)]
];
var arrMIPETL = [
  [gd(2000, 1, 1, 22, 35), 3, gd(2000, 1, 1, 22, 30)]
];

Here's your code with that data.

Upvotes: 1

Related Questions