问题描述:

i have use this jqplot-dateAxisRenderer-js plugin and would like to have on X axis sorting by 0h 2h 4h 6h 8h 10h 12h 14h 16h 18h 20h 22h 24h and on Y axis sorting by bandwidth....and need to show in tooltip US_CH2 (channel number that corresponds to data returned from server). My data returned from server is this:

var prevYear = [

["2011-08-02 00:00:00 US_CH1",398],

["2011-08-02 06:00:00 US_CH2",255.25],

["2011-08-02 12:00:00 US_CH3",263.9],

["2011-08-02 18:00:00 US_CH4",154.24],

["2011-08-02 23:00:00 US_CH5",210.18],

["2011-08-02 24:00:00 US_CH6",210.18]];

var currYear = [

["2011-08-02 00:00:00 US_CH1",796.01],

["2011-08-02 06:00:00 US_CH2",510.5],

["2011-08-02 12:00:00 US_CH3",527.8],

["2011-08-02 18:00:00 US_CH4",208.48],

["2011-08-02 24:00:00 US_CH5",420.36]];

As you can see i have prevYear (that is YELLOW in graph) and currYear (that is BLUE in graph).

So here is my code that i have try but it is not working as it should be:

 $(document).ready(function () {

$.jqplot._noToImageButton = true;

var prevYear = [

["2011-08-02 00:00:00 US_CH1",398],

["2011-08-02 06:00:00 US_CH2",255.25],

["2011-08-02 12:00:00 US_CH3",263.9],

["2011-08-02 18:00:00 US_CH4",154.24],

["2011-08-02 23:00:00 US_CH5",210.18],

["2011-08-02 24:00:00 US_CH6",210.18]];

var currYear = [

["2011-08-02 00:00:00 US_CH1",796.01],

["2011-08-02 06:00:00 US_CH2",510.5],

["2011-08-02 12:00:00 US_CH3",527.8],

["2011-08-02 18:00:00 US_CH4",208.48],

["2011-08-02 24:00:00 US_CH5",420.36]];

var plot1 = $.jqplot("chart2", [prevYear, currYear], {

seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],

title: 'Watched Channels & Bandwidth',

highlighter: {

show: true,

sizeAdjust: 1,

tooltipOffset: 9

},

grid: {

background: 'rgba(57,57,57,0.0)',

drawBorder: false,

shadow: false,

gridLineColor: '#666666',

gridLineWidth: 2

},

legend: {

show: true,

placement: 'outside'

},

seriesDefaults: {

rendererOptions: {

smooth: true,

animation: {

show: true

}

},

showMarker: true

},

series: [

{

fill: true,

label: '2010'

},

{

label: '2011'

}

],

axesDefaults: {

rendererOptions: {

baselineWidth: 1.5,

baselineColor: '#444444',

drawBaseline: false

}

},

axes: {

xaxis: {

renderer: $.jqplot.DateAxisRenderer,

tickOptions: {

formatString: "%H:%Mh",

angle: -30,

textColor: '#dddddd'

},

drawMajorGridlines: false

},

yaxis: {

renderer: $.jqplot.LogAxisRenderer,

pad: 0,

rendererOptions: {

minorTicks: 4

},

tickOptions: {

formatString: "%'d",

showMark: false

}

}

}

});

$('.jqplot-highlighter-tooltip').addClass('ui-corner-all')

});

And want to show in tooltip US_CH2 when mouse over on Marker.

Here is screenshoot of what i want to make:

http://postimg.org/image/k69qecfnl/

相关阅读:
Top