How to display bars with jquery flot orderBars with float values in xaxis? -


i use code provided @ pikemere > customised bar chart.

the example works fine. want use in xaxis float values instead of timestamp in example. try following code, bars don't appear correctly.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>flot bar chart</title>  <style type="text/css"> body { font-family: verdana, arial, sans-serif; font-size: 12px; } #placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; } .legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; } .legend table { border: 1px solid #555; padding: 5px; } #flot-tooltip { font-size: 12px; font-family: verdana, arial, sans-serif; position: absolute; display: none; border: 2px solid; padding: 2px; background-color: #fff; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } </style>  <!--[if lte ie 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]--> <script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"></script> <script type="text/javascript" language="javascript" src="../jquery.flot.js"></script> <script type="text/javascript" language="javascript" src="../jquery.flot.axislabels.js"></script> <script type="text/javascript" language="javascript" src="../jquery.flot.orderbars.js"></script>  <script type="text/javascript"> $(document).ready(function () {     var d1_1 = [         [1.0, 120],         [2.0, 70],         [3.0, 100],         [4.0, 60],         [5.0, 35]     ];      var d1_2 = [         [1.0, 80],         [2.0, 60],         [3.0, 30],         [4.0, 35],         [5.0, 30]     ];      var d1_3 = [         [1.0, 80],         [2.0, 40],         [3.0, 30],         [4.0, 20],         [5.0, 10]     ];      var d1_4 = [         [1.0, 15],         [2.0, 10],         [3.0, 15],         [4.0, 20],         [5.0, 15]     ];      var data1 = [         {             label: "product 1",             data: d1_1,             bars: {                 show: true,                 barwidth: 12*24*60*60*300,                 fill: true,                 linewidth: 1,                 order: 1,                 fillcolor:  "#aa4643"             },             color: "#aa4643"         },         {             label: "product 2",             data: d1_2,             bars: {                 show: true,                 barwidth: 12*24*60*60*300,                 fill: true,                 linewidth: 1,                 order: 2,                 fillcolor:  "#89a54e"             },             color: "#89a54e"         },         {             label: "product 3",             data: d1_3,             bars: {                 show: true,                 barwidth: 12*24*60*60*300,                 fill: true,                 linewidth: 1,                 order: 3,                 fillcolor:  "#4572a7"             },             color: "#4572a7"         },         {             label: "product 4",             data: d1_4,             bars: {                 show: true,                 barwidth: 12*24*60*60*300,                 fill: true,                 linewidth: 1,                 order: 4,                 fillcolor:  "#80699b"             },             color: "#80699b"         }     ];      $.plot($("#placeholder"), data1, {         xaxis: {             min: 0.0,             max: 6.0,             mode: null,             ticks: [1.0, 2.0, 3.0, 4.0, 5.0],             ticklength: 0, // hide gridlines             axislabelusecanvas: true,             axislabelfontsizepixels: 12,             axislabelfontfamily: 'verdana, arial, helvetica, tahoma, sans-serif',             axislabelpadding: 5         },         yaxis: {             axislabelusecanvas: true,             axislabelfontsizepixels: 12,             axislabelfontfamily: 'verdana, arial, helvetica, tahoma, sans-serif',             axislabelpadding: 5         },         grid: {             hoverable: true,             clickable: false,             borderwidth: 1         },         legend: {             labelboxbordercolor: "none",             position: "right"         },         series: {             shadowsize: 1         }     });      function showtooltip(x, y, contents, z) {         $('<div id="flot-tooltip">' + contents + '</div>').css({             top: y - 20,             left: x - 90,             'border-color': z,         }).appendto("body").show();     }      $("#placeholder").bind("plothover", function (event, pos, item) {         if (item) {             if (previouspoint != item.datapoint) {                 previouspoint = item.datapoint;                 $("#flot-tooltip").remove();                  var originalpoint;                  if (item.datapoint[0] == item.series.data[0][3]) {                     originalpoint = item.series.data[0][0];                 } else if (item.datapoint[0] == item.series.data[1][3]){                     originalpoint = item.series.data[1][0];                 } else if (item.datapoint[0] == item.series.data[2][3]){                     originalpoint = item.series.data[2][0];                 } else if (item.datapoint[0] == item.series.data[3][3]){                     originalpoint = item.series.data[3][0];                 } else if (item.datapoint[0] == item.series.data[4][3]){                     originalpoint = item.series.data[4][0];                 }                  var x = originalpoint;                 y = item.datapoint[1];                 z = item.series.color;                  showtooltip(item.pagex, item.pagey,                     "<b>" + item.series.label + "</b><br /> " + x + " = " + y,                     z);             }         } else {             $("#flot-tooltip").remove();             previouspoint = null;         }     }); }); </script> </head>  <body>     <div id="placeholder"></div> </body> </html>

can tell what's wrong? thanks!

i use plugin @ http://code.google.com/p/click-charts-enhanced/source/browse/trunk/click-charts-enhanced-core/src/main/resources/meta-inf/resources/flot/jquery.flot.orderbars.js

as indicated in http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/

i change barwidth: 0.2

it works now.


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more