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:

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


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -