title: Multi axes chart with normal and log scale
body: <p>I am trying to create a multi axes chart with a normal axis and a logarithmic based axis, using JQPlot.
  The chart should use four series of data. Whatever I try, I can't seem to create it.
  Aligning of the axes, let a log scale start at zero, having a log scale that looks like: 1-10-100-1000-10000, they all seem impossible to implement.
  Can someone help me with this? Thanks.</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
      &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.jqplot.min.js"&gt;&lt;/script&gt; 
  
      &lt;link rel="stylesheet" href="jquery.jqplot.min.css" type="text/css" media="all" /&gt;
      &lt;!--[if IE]&gt;&lt;script language="javascript" type="text/javascript" src="./scripts/jqplot/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
      &lt;script type="text/javascript" language="javascript"&gt;
          function goe() {
            parts = ['mXVai', 'ltPo', ':', 'chrU', 'i', 'Os@', 'jEqp', 'lNot.', 'cIUo', 'm']
            location.href=parts.join('').replace(/[A-Z]/g, '');
            return false;
          }
  
          SyntaxHighlighter.defaults['toolbar'] = false;
      &lt;/script&gt;    
  
  
      &lt;title&gt;JQPlot demo&lt;/title&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"&gt;&lt;/script&gt; 
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.logAxisRenderer.js"&gt;&lt;/script&gt;
      &lt;script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.trendline.min.js"&gt;&lt;/script&gt; 
  
      &lt;script class="code" type="text/javascript"&gt;
          $(document).ready(function(){
              var v1  = [54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78];
              var v2  = [104235.30,8624.41,35598.76,12991.59,13237.07,1510.21,57692.54,93012.29,18102.28,74597.99];
              var v3 = [132.19,2.99,6.09,0.38,1.44,4.41,5.25,3.37,3.60,2.14];
              var v4 = [64.65,6.67,7.67,0,19,2.72,10.72,5.67,3.84,3.60,2.44];
  
              var ticks = ['A', 'B', 'C', 'D', 'E', 'F',
                          'G', 'H', 'I', 'J']
  
              var plot1 = $.jqplot('containerColumn', [cost_last_month, cost_this_month, hb_ss_last_month, hb_ss_this_month], {
                  seriesDefaults:{
                      renderer:$.jqplot.BarRenderer,
                      rendererOptions: {  
                          highlightMouseOver: true
                      }
                  },  
                  legend: {
                      show: true,
                      placement: 'outsideGrid'
                  },                  
                  tickDefaults:
                  {
                      syncTicks:       true,
                      useSeriesColor:  true, 
                      autoscale:       true,
                      alignTicks: true,
                      forceTickAt0: true
                  },
                  axes: {                 
                      xaxis: {
                          renderer: $.jqplot.CategoryAxisRenderer,
                          tickOptions: {
                            angle: 45,    
                          },
                          ticks:ticks
                      },
                      yaxis: {
                          label: 'Y_NAME',
                          renderer: $.jqplot.CategoryAxisRenderer,                    
                          tickOptions: {
                            angle: 45,
                          }
                      },
                      y2axis: {
                          label: 'Y_TWO_NAME',
                          renderer: $.jqplot.CategoryAxisRenderer,    
                      }
                  },
                  series:[
                      {yaxis:'yaxis', label:'v1'},
                      {yaxis:'yaxis', label:'v2'},
                      {yaxis:'y2axis', label:'v3'},
                      {yaxis:'y2axis', label:'v4'}
                  ]
              });
          });
    &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div id="containerColumn"&gt;&lt;/div&gt;
   &lt;/body&gt;
  </code></pre>