CODEWITHSUNDEEP
jquerychartsjqplot
davide
davide

Reputation: 2152

Impossible to apply text labels to axis

I'm facing an impasse in properly labeling the following jqPlot chart, which on browser is rendered as this:

enter image description here

The chart is generated by the following code, here stripped down to the essentials for simplicity:

<!-- All scripts and stylesheets included in HEAD -->
/jqplot/src/jquery.min.js
/jqplot/src/jquery.jqplot.min.js
/jqplot/src/jquery.jqplot.css

/jqplot/src/plugins/jqplot.dateAxisRenderer.min.js
/jqplot/src/plugins/jqplot.canvasAxisLabelRenderer.min.js
/jqplot/src/plugins/jqplot.canvasAxisTickRenderer.min.js
/jqplot/src/plugins/jqplot.canvasTextRenderer.min.js
/jqplot/src/plugins/jqplot.barRenderer.min.js

-

<div id='chart_0' style='width: 100%; height: 15em;'></div>
<script id='source' language='javascript' type='text/javascript'>
    $.jqplot('chart_0',
      [[[ 0, 1],[ 1, 0],[ 2, 3],[ 3, 2],
        [ 4, 2],[ 5, 2],[ 6, 1],[ 7, 2]
      ]],
    {
      axes: {
        xaxis: {
          min: 0,
          max: 15,
          tickInterval: 1,
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        },
        yaxis: {
          min: 0,
          max: 5,
          tickInterval: 1,
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          tickOptions: { formatString: "%d" },
        },
      },
      seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
          barWidth: 10,
          fillToZero: true,
        }
      }
    });
</script>

On the horizontal axis the chart labels the numeric sequence [0, 1, ..., 15]. Rather, I wish it to label a set of custom strings, in the form of ["Monday", "Tuesday", "Yesterday", "Today"].

I have tried several ways, including modifying the dataset from

$.jqplot('chart_0',
  [[ [ 0, 2],[ 1, 5],[ 2, 2],[ 3, 0],
     [ 4, 2],[ 5, 2],[ 6, 1],[ 7, 2] ]],

to

$.jqplot('chart_0',
  [[ [ "Monday", 2],[ "Yesterday", 5],[ "Today", 2],["etc...", 0] ]],

but all what I get is either no vertical bars or no chart at all.
I'm using jqPlot 1.0.8.

Upvotes: 0

Views: 63

Answers (1)

Mark
Mark

Reputation: 108567

You need to use the categoryAxisRenderer. Here's a good example.

Essentially:

$.jqplot('chart_0',
  [[[ 0, 1],[ 1, 0],[ 2, 3],[ 3, 2],
    [ 4, 2],[ 5, 2],[ 6, 1],[ 7, 2]
  ]],
{
  axes: {
     xaxis: {
         renderer: $.jqplot.CategoryAxisRenderer,
         ticks: ['Monday','Yesterday','Today', etc...]
     }
 },

Upvotes: 1

Related Questions