I have a flot graph below. You will see the labels are condensed. I want to make the width between the ticks ensure all labels are shown. The markup is below:

<!-- Graph HTML -->
<div id="graph-wrapper">
  <div class="graph-info">
    <a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active"><span></span>
    </a>
  </div>
  <div class="graph-container">
    <div id="graph-lines" style="width: 95%; height: 80%;">
    </div>
    <div id="graph-bars" style="width: 95%; height: 80%;">
    </div>
  </div>
  <div id="series-check" class="graph-info bottom">
  </div>
</div>
<!-- end Graph HTML -->

The JS:

var ticks = [];
    for (var i = 0; i < graphData[0].data.length; i++) {
        ticks.push(graphData[0].data[i][0]);
    }
$.plot($('#graph-lines'), graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: '#fff',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            //tickColor: 'transparent',
            //tickDecimals: 2, 
            mode: "time",
            ticks: ticks,
            timeformat: options["timformat"], // "%h:%M
             min: new Date(options["GraphMinXValue"]), // min milliseconds from data
             max: new Date(options["GraphMaxXValue"]) //max milliseconds from data
        },
        yaxis: {
           min: 0,
           show: true
        },
        pan: {

            interactive: true
        },
        zoom: {

            interactive: false
        }
    });

I really need the percentage on the graph to allow the graph re-size with the window re-sizing but what I want is the spacing of the ticks to automatically push the graph larger. I have overflow:hidden on the containing div and using the pan to allow the user to see the hidden overflow. Is there a way to fix this?

I have a flot graph below. You will see the labels are condensed. I want to make the width between the ticks ensure all labels are shown. The markup is below:

<!-- Graph HTML -->
<div id="graph-wrapper">
  <div class="graph-info">
    <a href="#" id="bars"><span></span></a><a href="#" id="lines" class="active"><span></span>
    </a>
  </div>
  <div class="graph-container">
    <div id="graph-lines" style="width: 95%; height: 80%;">
    </div>
    <div id="graph-bars" style="width: 95%; height: 80%;">
    </div>
  </div>
  <div id="series-check" class="graph-info bottom">
  </div>
</div>
<!-- end Graph HTML -->

The JS:

var ticks = [];
    for (var i = 0; i < graphData[0].data.length; i++) {
        ticks.push(graphData[0].data[i][0]);
    }
$.plot($('#graph-lines'), graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            color: '#646464',
            borderColor: '#fff',
            borderWidth: 20,
            hoverable: true
        },
        xaxis: {
            //tickColor: 'transparent',
            //tickDecimals: 2, 
            mode: "time",
            ticks: ticks,
            timeformat: options["timformat"], // "%h:%M
             min: new Date(options["GraphMinXValue"]), // min milliseconds from data
             max: new Date(options["GraphMaxXValue"]) //max milliseconds from data
        },
        yaxis: {
           min: 0,
           show: true
        },
        pan: {

            interactive: true
        },
        zoom: {

            interactive: false
        }
    });

I really need the percentage on the graph to allow the graph re-size with the window re-sizing but what I want is the spacing of the ticks to automatically push the graph larger. I have overflow:hidden on the containing div and using the pan to allow the user to see the hidden overflow. Is there a way to fix this?

• javascript
• jquery
• flot

Share Improve this question Follow edited Jun 19, 2013 at 0:35 leonhart 1,20177 silver badges1212 bronze badges asked Jun 18, 2013 at 23:46 CR41G14CR41G14 5,60455 gold badges4545 silver badges6767 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I would remend that you pick a minTickSize such that the problem simply goes away. But if you must use a particular tick size, i.e. a tick every hour, then two possible solutions are to stagger/angle the ticks, or to increase the canvas size.

Flot doesn't support staggering/angling ticks by default, though there are plugins that might help, like Mark Cote's flot-tickrotor. That one does not yet work with Flot 0.8-final, though.

As far as increasing the plot size, Flot can't grow its placeholder automatically based on the number of ticks; you will have to increase it yourself. If you're using an overflow:hidden div for panning the plot, then it sounds like what you should perhaps really be using is the navigate plugin.

A work around that I recently used was set every other tick mark to ' ' (a single space). The chart seemed to acknowledge that this wasn't a real value and spaced out the tick marks with real values nicely. I personally did this for sizing purposes when the webpage was on a smaller screen.

graph screenshot