flot-axislabels not working

Question

So I tried to attach axislabels to my graph by using the plugin from https://github.com/markrcote/flot-axislabels

$.ajax({
        type: "POST",
        url: "includes/getjson.php",
        data: $('.ids:checked').serialize(),
        dataType: "json",
        success: function(datasets){

            $.each(datasets, function(index,value) {
                    var element = "<div class='flot-chart'><div class='flot-chart-content' id='placeholder_"+index+"'></div></div>";

             $('#graphbody').append(element);

            var options = {
                series: {
                    lines: { show: true },
                    points: { show: true }
                },
                xaxis: {
                    mode: "time",
                    timeformat: "%H:%M:%S",
                    twelveHourClock: false, 
                    timezone: "browser",
                    axisLabel: 'X',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                    axisLabelPadding: 5
                }, 
                   yaxis: {
                    axisLabel: 'Sin(X)',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                    axisLabelPadding: 5
                   },
                grid: {
                    hoverable: true,
                    clickable: true
                }
            };


   //plotting the rececived data
   $.plot('#placeholder_'+index, [value['raw']],options);

I tried on a basic graph directly from the flot-site and it worked, but I can't seem to find the missing part that causing the labels not working.

I've included the following:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/flot/jquery.flot.axislabels.js"></script>

Can you provide an code snippet or fiddle which shows the error? — Raidri, Jan 14 '15 at 11:46
The problem is the graph comes up, without the axislabels and no errors. The site can be seen at http://dinbab.dk/demo/measurements_all.php — frankmyhre, Jan 14 '15 at 12:09

Blake · Answer 1 · 2015-01-15T15:15:09.373

1

Shouldn't you be using "xaxes" and "yaxes" instead of "xaxis" and "yaxis"? Also, I don't see the axisLabels:{show:true} as is in the example below. Example Fiddle

$.plot($("#placeholder"),
   dataSet, {xaxes: [{
        axisLabel: 'This is the X-Axis'
    }],
    yaxes: [{

        axisLabel: 'Left Y Axis'
    }, 
            {
        position: "right",
        axisLabel: 'Right Y Axis'
    }]
            });

edited Jan 15 '15 at 15:15

answered Jan 14 '15 at 17:13

Blake

1,067
14
25

I edited my post and included an example, try something like that. – Blake Jan 15 '15 at 15:15
Tried changing my code to what you suggested, but it still won't work. I even tried to change the size of the div but nothing happened. Does the plugin-work with all versions of flot? – frankmyhre Jan 15 '15 at 15:34
I'm using version 0.8.3 – Blake Jan 15 '15 at 15:40
Same version I'm running! – frankmyhre Jan 15 '15 at 15:43
Make a fiddle with your code because the plugin is working fine for me. – Blake Jan 15 '15 at 15:46
1

You must include jquery.flot.axislabels.js to get the axis labels to show. – joelnet Mar 07 '16 at 19:01

flot-axislabels not working

1 Answers1