( function ( $ ) { var options = { series : { images : { show : false , alpha : 1 , anchor : "corner" } } } ; $ . plot . image = { } ; $ . plot . image . loadDataImages = function ( series , options , callback ) { var urls = [ ] , points = [ ] ; var defaultShow = options . series . images . show ; $ . each ( series , function ( i , s ) { if ( ! ( defaultShow || s . images . show ) ) return ; if ( s . data ) s = s . data ; $ . each ( s , function ( i , p ) { if ( typeof p [ 0 ] == "string" ) { urls . push ( p [ 0 ] ) ; points . push ( p ) ; } } ) ; } ) ; $ . plot . image . load ( urls , function ( loadedImages ) { $ . each ( points , function ( i , p ) { var url = p [ 0 ] ; if ( loadedImages [ url ] ) p [ 0 ] = loadedImages [ url ] ; } ) ; callback ( ) ; } ) ; } ; $ . plot . image . load = function ( urls , callback ) { var missing = urls . length , loaded = { } ; if ( missing == 0 ) callback ( { } ) ; $ . each ( urls , function ( i , url ) { var handler = function ( ) { -- missing ; loaded [ url ] = this ; if ( missing == 0 ) callback ( loaded ) ; } ; $ ( '<img />' ) . load ( handler ) . error ( handler ) . attr ( 'src' , url ) ; } ) ; } ; function drawSeries ( plot , ctx , series ) { var plotOffset = plot . getPlotOffset ( ) ; if ( ! series . images || ! series . images . show ) return ; var points = series . datapoints . points , ps = series . datapoints . pointsize ; for ( var i = 0 ; i < points . length ; i += ps ) { var img = points [ i ] , x1 = points [ i + 1 ] , y1 = points [ i + 2 ] , x2 = points [ i + 3 ] , y2 = points [ i + 4 ] , xaxis = series . xaxis , yaxis = series . yaxis , tmp ; if ( ! img || img . width <= 0 || img . height <= 0 ) continue ; if ( x1 > x2 ) { tmp = x2 ; x2 = x1 ; x1 = tmp ; } if ( y1 > y2 ) { tmp = y2 ; y2 = y1 ; y1 = tmp ; } if ( series . images . anchor == "center" ) { tmp = 0.5 * ( x2 - x1 ) / ( img . width - 1 ) ; x1 -= tmp ; x2 += tmp ; tmp = 0.5 * ( y2 - y1 ) / ( img . height - 1 ) ; y1 -= tmp ; y2 += tmp ; } if ( x1 == x2 || y1 == y2 || x1 >= xaxis . max || x2 <= xaxis . min || y1 >= yaxis . max || y2 <= yaxis . min ) continue ; var sx1 = 0 , sy1 = 0 , sx2 = img . width , sy2 = img . height ; if ( x1 < xaxis . min ) { sx1 += ( sx2 - sx1 ) * ( xaxis . min - x1 ) / ( x2 - x1 ) ; x1 = xaxis . min ; } if ( x2 > xaxis . max ) { sx2 += ( sx2 - sx1 ) * ( xaxis . max - x2 ) / ( x2 - x1 ) ; x2 = xaxis . max ; } if ( y1 < yaxis . min ) { sy2 += ( sy1 - sy2 ) * ( yaxis . min - y1 ) / ( y2 - y1 ) ; y1 = yaxis . min ; } if ( y2 > yaxis . max ) { sy1 += ( sy1 - sy2 ) * ( yaxis . max - y2 ) / ( y2 - y1 ) ; y2 = yaxis . max ; } x1 = xaxis . p2c ( x1 ) ; x2 = xaxis . p2c ( x2 ) ; y1 = yaxis . p2c ( y1 ) ; y2 = yaxis . p2c ( y2 ) ; if ( x1 > x2 ) { tmp = x2 ; x2 = x1 ; x1 = tmp ; } if ( y1 > y2 ) { tmp = y2 ; y2 = y1 ; y1 = tmp ; } tmp = ctx . globalAlpha ; ctx . globalAlpha *= series . images . alpha ; ctx . drawImage ( img , sx1 , sy1 , sx2 - sx1 , sy2 - sy1 , x1 + plotOffset . left , y1 + plotOffset . top , x2 - x1 , y2 - y1 ) ; ctx . globalAlpha = tmp ; } } function processRawData ( plot , series , data , datapoints ) { if ( ! series . images . show ) return ; datapoints . format = [ { required : true } , { x : true , number : true , required : true } , { y : true , number : true , required : true } , { x : true , number : true , required : true } , { y : true , number : true , required : true } ] ; } function init ( plot ) { plot . hooks . processRawData . push ( processRawData ) ; plot . hooks . drawSeries . push ( drawSeries ) ; } $ . plot . plugins . push ( { init : init , options : options , name : 'image' , version : '1.1' } ) ; } ) ( jQuery ) ;