javascript - jqplot.dateAxisRenderer.js X-Axis sort with 2hour parameters and tooltip -
i have use jqplot-dateaxisrenderer-js plugin , have on x axis sorting 0h 2h 4h 6h 8h 10h 12h 14h 16h 18h 20h 22h 24h , on y axis sorting bandwidth....and need show in tooltip us_ch2 (channel number corresponds data returned server). data returned server 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 can see have prevyear (that yellow in graph) , curryear (that blue in graph).
so here code have try not working 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 show in tooltip us_ch2 when mouse on over marker.
here screenshoot of want make:
Comments
Post a Comment