A really simple question but I could not figure it out... I tried to use jqplot to generate a line plot with vertical y axis label. Based on the example from jqplot web site, all I need is to use this plugin jqplot.canvasAxisLabelRenderer.min.js. I tried it locally, but it did not work. Can anyone give me a hint on this? Here is a demo of my problem.

Below is my code:

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = $.parseJSON($('#x_indi_val').text());    
        $.jqplot('chart1', [s1], {                
            seriesDefaults: { 
               showMarker:false,
               pointLabels: { show:false } ,
            },                
            series:[
               {label:'Individuals'}
            ],
            axes: {
                xaxis: {
                   label :'Time units',
                   pad: 0,
                },
                yaxis: {
                    label: 'Number of individuals',
                    //jqplot example indicated that use the following js file can give you a vertical label, I tried locally, but it did not work
                    //renderer: $.jqplot.canvasAxisLabelRenderer
                }
            },
            legend: {
                show: true,
                location: 'ne',
                placement: 'inside',
                fontSize: '11px'
            } 
        });   
    })​;

A really simple question but I could not figure it out... I tried to use jqplot to generate a line plot with vertical y axis label. Based on the example from jqplot web site, all I need is to use this plugin jqplot.canvasAxisLabelRenderer.min.js. I tried it locally, but it did not work. Can anyone give me a hint on this? Here is a demo of my problem.

Below is my code:

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = $.parseJSON($('#x_indi_val').text());    
        $.jqplot('chart1', [s1], {                
            seriesDefaults: { 
               showMarker:false,
               pointLabels: { show:false } ,
            },                
            series:[
               {label:'Individuals'}
            ],
            axes: {
                xaxis: {
                   label :'Time units',
                   pad: 0,
                },
                yaxis: {
                    label: 'Number of individuals',
                    //jqplot example indicated that use the following js file can give you a vertical label, I tried locally, but it did not work
                    //renderer: $.jqplot.canvasAxisLabelRenderer
                }
            },
            legend: {
                show: true,
                location: 'ne',
                placement: 'inside',
                fontSize: '11px'
            } 
        });   
    })​;

• javascript
• jquery
• jqplot

• are you providing the data in the required format while it es from Json? – Shiv Kumar Ganesh Commented Jul 3, 2012 at 6:00
• @ShivKumarGanesh: Yes, I think the data is in the right form. – TTT Commented Jul 3, 2012 at 13:56

1 Answer 1

You had a few minor yet important issues in your code, as observed in the provided demo sample:

1. You forgot to import the two scripts required by the label renderer:

   <script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>

   <script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

2. You were setting the renderer of the axis rather than the label renderer of the axis:

   labelRenderer: $.jqplot.CanvasAxisLabelRenderer

Please see the code with the corrected sample.