how to autoscale xaxis of lineChart in primefaces 3.4

Question

In my lineChart(primefaces 3.4), xaxis have many dateTimes lables and it overlap, is there any way to prevent overlaping in xaxis? when in lineChart I use extender attribute(with jqplot function), I can apply autosacle to axis but int values labels from 1..n will replaced instead of dateTime lables !. Here is my sample code:

xhtml Code

 <script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"> 
 <script type="text/javascript">
 function setScale() {
          this.cfg.axes ={                
                xaxis:{
                    renderer:$.jqplot.DateAxisRenderer,                    
                    autoscale : true,
                    }          
        }
</script>
<p:lineChart  value="#{chartBean.chartModel}"  extender="setSacle" xaxisAngle="-30" />

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

I think you want to use CanvasAxisTickRenderer

Include jqplot.canvasAxisTickRenderer.min.js

and than define

xaxis:{
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: {
       angle: -30
    }
 }

Take a look at the jqPlot example : Rotated Axis Tick Labels | jqPlot

And similar question jqPlot - multiline ticks with angle in x-axis

Take a loo at the second example on Axis Labels and Rotated Text It uses DateAxisRenderer with autoscale: true

xaxis: {
      autoscale: true,
      renderer: $.jqplot.DateAxisRenderer,
      label: 'Incliment Occurrance',
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
           angle: 15
      }

edited May 23 '17 at 12:21

Community

1
1

answered Dec 13 '12 at 07:02

Daniel

36,833
10
119
200

Because the number of labels is too muchو label rotation will not solve this problem and should decrees them in view **without changing the dateTime value to int value** in xaxis. thank u – Mehdi Dec 13 '12 at 09:00
I posted another code snippet . that uses `DateAxisRenderer` with `autoscale` ... take a look at it... its the second example on this page http://www.jqplot.com/deploy/dist/examples/axisLabelsRotatedText.html – Daniel Dec 13 '12 at 09:13
In my code, I used `DateAxisRenderer` with `autoscale: true` but it dosn't work, I don't know if is it bug in primeFaces?!!! tnx Daniel :) – Mehdi Dec 13 '12 at 09:38
Don't know , but try to add the other settings , such as `labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickRenderer: $.jqplot.CanvasAxisTickRenderer,` – Daniel Dec 13 '12 at 09:50

score 0 · Answer 2 · answered Jul 29 '13 at 08:37

How about using zoom if you have so many data points:

cursor: {
                    show: true,
                    showTooltip: false,
                    zoom: true,
                    constrainZoomTo: 'x'},

and

<script language="javascript" type="text/javascript" src="jquery/jqplot/plugins/jqplot.cursor.min.js"></script>

how to autoscale xaxis of lineChart in primefaces 3.4

2 Answers2