CODEWITHSUNDEEP
flot
a b
a b

Reputation: 1

Flot "points" charts capabilities

Can someone please tell me which of the below is possible?

-1- I want to create a scatter diagram in Flot and believe the way to do this is via "points". Each point inside our graph would need to have its own label appear inside the chart at all times -- i.e., not just during hover/mouseover. I assume this is fairly easy to do?

-2- Is there a way for each data point to have "two" labels? In other words, let's say I wanted to plot cities in the United States and the year-over-year change in crime. Would I be able to have points labeled like "Boston +5.3%" and "San Diego -7.1%"? (Please keep in mind the second value (change in the crime rate) is not going to be part of either axis.)

-3- If the above is possible, could the second part of the label (change in crime rate) be color coded based on the value? For example, a positive crime rate is shown in red and a negative crime rate appears in green?

-4- Can the labels for the points function as hyperlinks?

-5- For the hover pop-ups that appear when you mouseover these points, are you able to include more data than that which is contained in the axes? If, for example, we wanted to include several data points inside the tooltip in order to give the user more information, is this possible?

If you feel there is a better solution for the above than flot that is also compatible with IE8, please let me know.

Much thanks for your help!

Upvotes: 0

Views: 822

Answers (2)

Mark
Mark

Reputation: 108512

Building off of @DNS idea, I've put together a simple example. In the example you'll see that I'm including my "label" information directly into my data array. If this information is present, the code adds a div next to the point with the label (and it's a hyperlink). I haven't coded everything on your wish list but hopefully this will get you going.

Fiddle here.

$(function () {

     function divByPointHook(plot, canvascontext, series){
         $.each(series.data, function(){
             if (this.length == 3){
                 var divStr = '<div style="border:1px solid black; position:absolute; ';
                 var pos = plot.p2c({'x':this[0],'y':this[1]});
                 divStr += 'left:' + pos.left + 'px;';
                 divStr += 'top:' + pos.top + 'px; ">'
                 divStr += '<a href="#">'+this[2]+'</a>' + '</div>';
                $('#placeholder').append(divStr);   
             }
         });

     };

    var d1 = [[0,1,"one"],[3,8,"two"],[5,4,],[2,10],[1.2,9],[9,2],[46,41],
[22,14],[20,12,"three"],[20,25],[7,5],[18,11],[31,20],[50,40,"four"],[24,36],
[20,42],[33,41],[51,39],[11,28,"five"],[32,16],[38,40],[35,22],[41,30],
[21,18]];

    $.plot($("#placeholder"), [{
            data: d1,
            points: {
                radius: 3,
                show: true,
                fill: true
            }}],
           { hooks: { drawSeries: [divByPointHook] } }
    );

});

Upvotes: 0

DNS
DNS

Reputation: 38189

What you're looking for isn't supported by Flot's default options. The library does, however, provide hooks that you can use to extend its basic functionality.

You can register a function on either the draw or (better) drawSeries hook that iterates over your data and creates absolutely-positioned div elements to act as labels for each point. Everything else - multiple labels, color-coding, hyperlinks, etc. is then just a matter of what you put into those divs.

Upvotes: 1

Related Questions