CODEWITHSUNDEEP
javascriptjqueryflot
user670595
user670595

Reputation:

Using different symbols for plotting data not working

I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html

Here is what I have so far:

My includes:

<script  type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>

I then configure my flot options like so:

var options = {
        grid: {hoverable : true},
        xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
        series: { points : { show: true } }
        };

I then actually plot the data:

 $.plot('#placeholder', [{
               data: my_data,
               lines: { show : true},
               points: { symbol: "square"},
               color: '#CB4B4B',
               label: 'My Data'
               }], options);
        }

However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:

var handlers = {
            square: function (ctx, x, y, radius, shadow) {
                console.log("Square handler was called");
                // pi * r^2 = (2s)^2  =>  s = r * sqrt(pi)/2
                var size = radius * Math.sqrt(Math.PI) / 2;
                ctx.rect(x - size, y - size, size + size, size + size);
            },

I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?

EDIT:

Example of data I am trying to plot:

var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];

I have also edited my options parameter and how the plot function is called:

var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
}; 

 $.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);

I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.

Upvotes: 2

Views: 2322

Answers (1)

Ryley
Ryley

Reputation: 21226

I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/

I would guess that you haven't included the symbol library (even though you say you have).

Or show your data, might somehow be an issue there (doubtful?).

This is the full flot code I ran to make a working example (plus including flot and the symbol library):

$.plot('#placeholder', [{
    data: [
        [1, 1],
        [2, 3],
        [4, 4],
        [5, 9]
    ],
    lines: {
        show: true
    },
    points: {
        show: true,
        symbol: "square"
    },
    color: '#CB4B4B',
    label: 'My Data'
}]);

Upvotes: 4

Related Questions