Laurent W.
Laurent W.

Reputation: 3783

jqPlot : Rotate xaxis date labels

I'm trying to rotate dates on my xaxis. It seems that the rotate parameter isn't taken into account, while fontFamily, fontSize and formatString work.

I'm using jqPlot 1.0.8 with jQuery 1.10.2 and Firefox 23.0.1

http://jsfiddle.net/JVY6a/

HTML :

<div id="chart-blood-pressure" class="jqplot-target" data-json="{&quot;diastolic_blood_pressure&quot;:[[&quot;2013\/09\/25 00:00:00&quot;,100],[&quot;2013\/09\/24 00:00:00&quot;,70]],&quot;systolic_blood_pressure&quot;:[[&quot;2013\/09\/25 00:00:00&quot;,130],[&quot;2013\/09\/24 00:00:00&quot;,120]],&quot;heart_rate&quot;:[[&quot;2013\/09\/25 00:00:00&quot;,76],[&quot;2013\/09\/24 00:00:00&quot;,85]]}"></div>

JS :

$(document).ready(function(){
    var data = $('#chart-blood-pressure').data('json');
    var plot = $.jqplot('chart-blood-pressure', [data.diastolic_blood_pressure, data.systolic_blood_pressure, data.heart_rate], {
        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                rendererOptions:{
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer
                },
                tickInterval:'1 day',
                tickOptions:{
                    fontSize:'10pt',
                    fontFamily:'Tahoma',
                    angle:-40,
                    formatString:'%b %#d, %Y',
                }
            },
        },
    });
});

Upvotes: 1

Views: 1134

Answers (1)

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

You have to include canvasAxisTickRenderer plugin : external link here or from jqPlot source ("/src/plugins/jqplot.canvasAxisTickRenderer.min.js")

<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>  
//or
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

See working example here

Upvotes: 2

Related Questions