I’ve spent almost a week and so just figuring out on how to be able to use icons as point values on the chart. Thanks to this post , it worked like a charm. I did made some additional coding to make it possible to display an icon over the chart.

Here is the code:

On your index page or from the page the flot is located.


var options = {

points: { show: true, radius: 3, type: "o" }

/* Note I added the "type" with either x or o value, in order to set it to the usual circle (which is "o") or custom image (which is "x") */
...

On the jquery.flot.js file, search for ” function plotPoints(” this is where we will update and do some coding…



function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) {
                
var points = datapoints.points, ps = datapoints.pointsize;
                
	for (var i = 0; i < points.length; i += ps) {
      	var x = points[i], y = points[i + 1];
            if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)
            continue;
            
/* Below this line is where we start to do some additional coding...*/   
  
                  if(series.points.type == "x") {
                	
                	  customimage(axisx.p2c(x)-1,axisy.p2c(y)-11);

	              /* we call the function to retrieve and display the image*/
                  
					
			} else if(series.points.type == "o") {
					
				ctx.beginPath();
				ctx.arc(axisx.p2c(x), axisy.p2c(y) + offset, radius, 0, circumference, true);
	                    if (fillStyle) {
	                        ctx.fillStyle = fillStyle;
	                        ctx.fill();
	                    }
	                    ctx.stroke();
			} 
                  
                
               }
            }

/* this is the function that I added to draw the image on the chart canvass*/

function customimage(x,y){

	var img = new Image();
        	
	img.onload = function() {

      ctx.beginPath();    
      ctx.drawImage(img,x,y,24,34);
      ctx.closePath();
      ctx.stroke();

      }
     img.src = 'star.jpg';  	
}

Regarding the LEGEND part of the chart. I’ve made some additional updated to in order to display a thumbnail of the icon beside the Label name.

On the jquery.flot.js file, search for ” function insertLegend(” this is where we will update…


if (i % options.legend.noColumns == 0) {
                    if (rowStarted)
                        fragments.push('</tr>');
                    fragments.push('<tr>');
                    rowStarted = true;
}

if (lf)
/* Below this line is where I made some updates. */                    
               
if (label != 'Star'){  
/* Star is the sample Label name. you can edit it and change it to the actual label name */

	label = lf(label, s);
	fragments.push('<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:13px;height:13px;background-color:' + s.color + ';overflow:hidden"></div></div></td>' +'<td class="legendLabel">' + label + '</td>');

} else {
/* this is where I add the image source of the star icon */
	fragments.push('<td class="legendColorBox"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:13px;height:13px;overflow:hidden"><img src="star.jpg"/></div></div></td>' +
'<td class="legendLabel">' + label + '</td>');

}

So that’s about it :) Hope to be of help again, one way or another. Feel free to correct me or add any suggestions.

About these ads