Cluttered x-axis

76 views
Skip to first unread message

Sander F

unread,
May 15, 2013, 8:04:14 AM5/15/13
to jqplot...@googlegroups.com
Hello,

As a beginner with jqplot I'm struggling to make my x-axis less cluttered. I am planning to show a lot of datapoints trough the bar chart renderer and this seems to mess up x-axis completly with overlapping labels. Example:

Code:

  <script class="code" type="text/javascript">$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10,2, 6, 7, 10];
        var ticks = ['14:45', '14:50', '14:55', '15:00','15:05', '15:10', '15:15', '15:20','15:25', '15:30', '15:35', '15:40','15:45', '15:50', '15:55', '16:00','16:05', '16:10', '16:16', '16:20','16:25', '16:30', '16:35', '16:40','16:45', '16:50', '16:55', '17:00'];
        
        plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: false },
                rendererOptions: {fillToZero: true},

            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks,
                    zoom:true,
                    showTicks: true,
                    ShowTickMarks: true,
                    numberTicks: 12,
                    max: 8
                }
            },
            highlighter: { show: false }
        });
    });</script>

I've been looking at this thread on stackoverflow which seem to have the same question as I'm asking right now but the said solution there 'changing tickNumber' has no effect on my graph at all. 

I can change numberTicks and max all I want but nothing changes. 

If anyone has any idea and can push me in the right direction, please do! :-)

Also an unrelated question: Is it possible to color each bar individually depending on the value it has?

Thanks,
Sander Ferdinand

Sean Upton

unread,
May 15, 2013, 5:31:11 PM5/15/13
to jqplot...@googlegroups.com
On Wed, May 15, 2013 at 6:04 AM, Sander F <sa.fer...@gmail.com> wrote:
>
> Hello,
>
> As a beginner with jqplot I'm struggling to make my x-axis less cluttered. I am planning to show a lot of datapoints trough the bar chart renderer and this seems to mess up x-axis completly with overlapping labels. Example:

Why not use CanvasAxisTickRenderer and rotated text (e.g. 65 degrees)?
There are demos for this in the examples; rotating gives you a lot
more room to write your tick labels.

Sean
Reply all
Reply to author
Forward
0 new messages