Legends for Multiline

[Randy Smith]

New guy here.

I can get legends showing for bar charts but single and multi-line charts? Nada.

Add to that the ability to only have ticks on the datapoints (anywhere from 3 to 12 per chart) and have a custom X Axis, all of which is alluding me.

I've spent the entire weekend on getting as far as I did, but now I'm at my limit.

Here's the top loader info so you can see I am loading the renderer's and whatnot:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="js/jobdisplay/greenwich_primary.js"></script>

<script type="text/javascript" src="js/jobdisplay/jquery.table2excel.js"></script>

<link rel="stylesheet" href="css/style2.css" type="text/css" />

<!-- jqPlot for line charts -->

<script type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>

<script type="text/javascript" src="js/jqPlot/plugins/jqplot.dateAxisRenderer.js"></script>

<script type="text/javascript" src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.js"></script>

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

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

<script type="text/javascript" src="js/jqPlot/plugins/jqplot.canvasAxisTickRenderer.js"></script>

<script type="text/javascript" src="js/jqPlot/plugins/jqplot.pointLabels.js"></script>

<script type="text/javascript" src="js/jqPlot/plugins/jqplot.enhancedLegendRenderer.js"></script>

<link   type="text/css" rel="stylesheet" href="js/jqPlot/jquery.jqplot.css" />

and here's the chart code so far.  

    $.ajax({

    url: 'http://mydomain.com/components/myapi.cfc',

    type: 'post',

    dataType: 'json',

    data: {

    method: 'getFillTimeStats',

    role: $('#rolesTitle').val(),

    region_state: $('#rolesLocation').val(),

    returnFormat: 'json'

    },

    success: function(data) {

    var localList = [];

    var nationalList = [];

    var xAxis = [];

    var yValue = 0;

    var maxY = 100;

    var minY = 0;

    var lastValue = '';

    var finalLocal = '';

    var finalNational = '';

   

    $.each(data, function(i,val){ 

    var xAxisValue = String(data[i]['yearpostdate']+'-'+data[i]['monthpostdate']);

    if (lastValue != xValue) {

    xAxis.push(xAxisValue);

    lastValue=xAxisValue;

    }

    var xValue = Number(data[i]['monthpostdate']);

    yValue = Number(data[i]['averagetimetofill']);

    var zLocation = data[i]['location'];

    if (zLocation=='National') {

    nationalList.push([xValue,yValue]);

    if (yValue > maxY) {

    maxY = yValue;

    }

    } else {

    localList.push([xValue,yValue]);

    if (yValue > maxY) {

    maxY = yValue;

    }

    }

    });

    yValue = yValue * 1.10;

    $( '#duration' ).empty();

    $.jqplot('duration', [localList,nationalList],

    { title:'Average Time To Fill ' + $('#rolesTitle').val(),

  series:[

  {color:'#5FAB78'},

  {showMarker:true},

  {label: $('#rolesLocation').val()},

  {label: 'National'}

  ],

axes:{

  xaxis:{

    label:'Month',

    labelRenderer: $.jqplot.DateAxisRenderer,

    tickOptions: { formatString: '%b' },

    tickInterval: '1 month',

    labelOptions: {

      fontFamily: 'Georgia, Serif',

      fontSize: '12pt'

    }

  },

  yaxis:{

    label:'Average Days Open',

    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

    labelOptions: {

      fontFamily: 'Georgia, Serif',

      fontSize: '12pt'

    }

  },

legend:{

    renderer: $.jqplot.EnhancedLegendRenderer,

    show: true,

    labels:[$('#rolesLocation').val()],

    location:'se',     

    rendererOptions: {

        numberRows: 1

    }

}

}

});

    },

    error: function(xhr, textStatus,errorThrown){

    alert(errorThrown);

    }

});

I don't see any legend anywhere (I've tried a number of different iterations, and I cannot find help documentation showing how to do that for multi-line charts) and the x axis is a nightmare.

RLS