CODEWITHSUNDEEP
jqueryruby-on-railsjqplot
Jason Stokes
Jason Stokes

Reputation: 707

How can I get jqplot to render xaxis ticker at an angle?

I followed a few examples that I found (i.e. - http://www.jqplot.com/tests/rotated-tick-labels.php), but I still cannot get the ticks on my xAxis to render at any other angle besides the default.

My code:

$(document).ready(function(){
var s1 = <%= @funding_documents.map { |f| f.authorized_amount.to_i } %>;
var s2 = <%= @funding_documents.map { |f| f.budget_at_completion.to_i } %>;
var s3 = <%= @funding_documents.map { |f| f.assigned_cost.to_i } %>;
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = <%= raw @funding_documents.map { |f| f.funding_document_number } %>;

var plot1 = $.jqplot('chart2', [s1, s2, s3], {
  // The "seriesDefaults" option is an options object that will
  // be applied to all series in the chart.
  tite: 'Project Funding',
  seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {fillToZero: true}
  },
  // Custom labels for the series are specified with the "label"
  // option on the series option.  Here a series option object
  // is specified for each series.
  series:[
      {label:'Authorized'},
      {label:'Budgetted'},
      {label:'Assigned'}
  ],
  // Show the legend and put it outside the grid, but inside the
  // plot container, shrinking the grid to accomodate the legend.
  // A value of "outside" would not shrink the grid and allow
  // the legend to overflow the container.
  legend: {
      show: true,
      placement: 'outsideGrid'
  },
  axesDefaults: {
  },
  axes: {
      // Use a category axis on the x axis and use our custom ticks.
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ticks,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            angle: -45,
            fontSize: '8pt'
        }
      },
      // Pad the y axis just a little so bars can get close to, but
      // not touch, the grid boundaries.  1.2 is the default padding.
      yaxis: {
        pad: 1.2,
        tickOptions: {
          formatString: '$%d',
          angle: 0
        }
      }
  }
});

});

I also included all files mentioned in tutorials:

<script src="/assets/jqplot/jquery.jqplot.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.barRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.categoryAxisRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.pointLabels.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.canvasTextRenderer.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jqplot/plugins/jqplot.dateAxisRenderer.min.js?body=1" type="text/javascript"></script>

Don't know what else to do at this point.

Upvotes: 0

Views: 2996

Answers (1)

prasad
prasad

Reputation: 36

Import this JavaScript file: plugins/jqplot.canvasAxisTickRenderer.min.js.

Upvotes: 2

Related Questions