Question

I am using jqPlot to plot some data including dates and another user data identifier. I have it plotted correctly with this code (I’d post an image but I don’t have the reputation yet!):

    <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/excanvas.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){  
         var line1=<?php echo $jqPlotArray;?>;              
         var plot2 = $.jqplot('line_chart', [line1], {                  
             axes:{        
               xaxis:{          
                  renderer:$.jqplot.dateAxisRenderer,          
                  tickOptions:{formatString:'%b %y'}        
               }      
             },      
             series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}] 
         });
      });
      </script>

But when I try to format BOTH the axis labels to WHITE and a 9pt font it plots incorrectly with this code (Again, I’d post an image but can’t yet):

    <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/excanvas.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){  
         var line1=<?php echo $jqPlotArray;?>;              
         var plot2 = $.jqplot('line_chart', [line1], {                  
             axes:{        
               xaxis:{          
                  renderer:$.jqplot.dateAxisRenderer,
                  renderer:$.jqplot.categoryAxisRenderer,           
                  tickOptions:{formatString:'%b %y', textColor:'#FFFFFF', fontSize:'9pt'}        
               }      
             },      
             series:[{color:'#01812a', lineWidth:1, markerOptions:{style:'filledCircle', color:'#01812a', size:'6'}}] 
         });
      });
      </script>

In summary, my question is what renderers do I need and how to use them to simply format the x & y axis labels to a white font color (so the labels pop off my green background better) and also change the fontSize to 9pt.

Any help will be much appreciated.

Thanks

Answer 1

If your xaxis has dates, why are you trying to use the categoryAxisRenderer too?

I think the main problem is a missed capital letter:

renderer:$.jqplot.DateAxisRenderer //The D is Date is a capital

See fiddle here.