%h2
  ATP rankings chart for top 50 players
  %span.generated-note (generated at <span class='generated-at'></span>)

#rankings-chart

%script(src='javascripts/rankings-dep.js')
:javascript
  loadData('rankings', function(rankings) {
    updateGenerationTime(rankings.generated_at);

    window.d = $.map(rankings.data, function(v, i){return [[v.rank + ' ' + v.last, v.points]]});

    $.jqplot('rankings-chart', [d], {
      series: [{
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barWidth: 14,
          barMargin: 2,
          barPadding: 2
        },
      }],
      axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          showGridLine: false,
          angle: -35,
          fontSize: '10pt',
          fontFamily: 'Georgia'
        }
      },
      axes: {
        xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
        },
        yaxis: {
          min: 0,
          max: 15000,
          numberTicks: 7,
          autoscale:true
        }
      }
    });
    $('#rankings-chart').bind('jqplotDataClick',
      function (ev, seriesIndex, pointIndex, data) {
        if (window.console) console.log(seriesIndex, pointIndex, data);
      }
    );
  })


%h2
  ATP rankings chart for top 50 players
  %span.generated-note (generated at <span class='generated-at'></span>)

#rankings-chart(style='height: 1000px')

%script(src='javascripts/rankings-dep.js')
:javascript
  loadData('rankings', function(rankings) {
    updateGenerationTime(rankings.generated_at);

    window.d = $.map(rankings.data, function(v, i){return [[v.points, v.rank + ' ' + v.last]]}).reverse();

    $.jqplot('rankings-chart', [d], {
      series: [{
        shadowAngle: 135,
        renderer:$.jqplot.BarRenderer,
        rendererOptions:{
          barDirection: 'horizontal',
          barWidth: 10,
          barMargin: 2,
          barPadding: 2
        },
      }],
      axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          showGridLine: false,
          fontSize: '10pt',
          fontFamily: 'Georgia'
        }
      },
      axes: {
        yaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
        },
        xaxis: {
          min: 0,
          max: 15000,
          numberTicks: 7,
          autoscale:true
        }
      }
    });
    //$('#rankings-chart').bind('jqplotDataClick',
    //  function (ev, seriesIndex, pointIndex, data) {
    //    if (window.console) console.log(seriesIndex, pointIndex, data);
    //  }
    //);
  })


Change ranking bar direction to horizontal
Change ranking bar direction to horizontal
