Jquery flot - zero value exceeds grid when changing axes direction -
i have problem jquery flot , jquery.flot.symbol usage. render flot using jquery.flot , using additional plugin (jquery.flot.symbol make rectangles on graph).
the problem when reverse axes (ox starting right left , oy position right). part generated of jquery.flot.symbol exceeds grid , 0 values somehow outside graph (with other words values moved right)
http://jsfiddle.net/5l3eyafn/2/
and relevant part of code
var data1 = [ { data: graphdata, bars: { show: true, linewidth: 3, horizontal: false, fillcolor: "#f8e7b3" }, color: "#ffffff" }, { data: trenddata, points: { show: true, linewidth: 3, radius: 10, fill: true, fillcolor: "#000000", symbol: "rectanglegraph" }, color: "#000000" } ]; $.plot($(".graph"), data1, { grid:{ tickcolor: "#eee", bordercolor: "#eee", borderwidth: 1, hoverable: true, clickable: true }, xaxis:{ show: true, transform: function (v) { return -v; }, inversetransform: function (v) { return -v; } }, yaxis: { show: true, position: "right" } });
the problem here bars aligned left default switches alignment right transformation reverse. not happen automatically symbols. here have hand.
1) changing symbol alignment right bars (fiddle):
change
ctx.rect(x + 3, y - 8, 12, 1); //12 - width, 1 - height to
ctx.rect(x - 15, y - 8, 12, 1); //12 - width, 1 - height if want able switch between normal , reverse axis have use variable x offset.
2) using center alignment (fiddle):
change above line to
ctx.rect(x - 6, y - 8, 12, 1); //12 - width, 1 - height and add bars options:
align: "center" with center alignment can switch between normal , reverse without need change symbol code. (and better shows bar belongs x value.)
3) correction symbol y values (fiddle):
as can see in fiddles both 1) , 2), symbol value x = 0 above bar, should not (symbol y = 41.6, bar y = 42.0).
correct can change y offset in code line above to
ctx.rect(x - 6, y + 1, 12, 1); //12 - width, 1 - height here result 2) plus 3) code snippet:
/* flot plugin adds symbols plotting points. symbols accessed strings through standard symbol choice: series: { points: { symbol: "square" // or "diamond", "triangle", "cross" } } */ (function ($) { function processrawdata(plot, series, datapoints) { // normalize area of each symbol approximately // same circle of given radius var handlers = { square: function (ctx, x, y, radius, shadow) { // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 var size = radius * math.sqrt(math.pi) / 2; ctx.rect(x - size, y - size, size + size, size + size); }, diamond: function (ctx, x, y, radius, shadow) { // pi * r^2 = 2s^2 => s = r * sqrt(pi/2) var size = radius * math.sqrt(math.pi / 2); ctx.moveto(x - size, y); ctx.lineto(x, y - size); ctx.lineto(x + size, y); ctx.lineto(x, y + size); ctx.lineto(x - size, y); }, triangle: function (ctx, x, y, radius, shadow) { // pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3)) var size = radius * math.sqrt(2 * math.pi / math.sin(math.pi / 3)); var height = size * math.sin(math.pi / 3); ctx.moveto(x - size / 2, y + height / 2); ctx.lineto(x + size / 2, y + height / 2); if (!shadow) { ctx.lineto(x, y - height / 2); ctx.lineto(x - size / 2, y + height / 2); } }, cross: function (ctx, x, y, radius, shadow) { // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 var size = radius * math.sqrt(math.pi) / 2; ctx.moveto(x - size, y - size); ctx.lineto(x + size, y + size); ctx.moveto(x - size, y + size); ctx.lineto(x + size, y - size); }, rectangle: function (ctx, x, y, radius, shadow) { // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 var size = radius * math.sqrt(math.pi) / 2; ctx.rect(x + 2, y - 8, 5, 8); //5 - width, 9 - height }, rectanglegraph: function (ctx, x, y, radius, shadow) { // pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2 var size = radius * math.sqrt(math.pi) / 2; //ctx.rect(x + 3, y - 8, 12, 1); //12 - width, 1 - height ctx.rect(x - 6, y + 1, 12, 1); //12 - width, 1 - height } }; var s = series.points.symbol; if (handlers[s]) series.points.symbol = handlers[s]; } function init(plot) { plot.hooks.processdatapoints.push(processrawdata); } $.plot.plugins.push({ init: init, name: 'symbols', version: '1.0' }); })(jquery); // end of symbol plugin $(document).ready(function () { var graphdata = [ [0, "42.00"], [1, "42.00"], [2, "42.00"], [3, "42.00"], [4, "42.00"], [5, "42.00"], [6, "42.00"], [7, "42.00"], [8, "42.00"], [9, "42.00"], [10, "42.00"], [11, "42.00"], [12, "43.00"], [13, "43.00"], [14, "43.00"], [15, "43.00"], [16, "43.00"], [17, "43.00"], [18, "43.00"], [19, "43.00"], [20, "43.00"], [21, "43.00"], [22, "43.00"], [23, "42.00"], [24, "42.00"], [25, "42.00"], [26, "41.00"], [27, "41.00"], [28, "41.00"], [29, "41.00"], [30, "41.00"], [31, "41.00"], [32, "41.00"], [33, "41.00"], [34, "41.00"], [35, "41.00"], [36, "41.00"], [37, "40.00"], [38, "40.00"], [39, "41.00"], [40, "41.00"], [41, "40.00"] ]; var trenddata = [ [0, "41.60"], [1, "39.93"], [2, "39.13"], [3, "38.87"], [4, "38.20"], [5, "37.93"], [6, "37.13"], [7, "36.73"], [8, "36.27"], [9, "36.07"], [10, "34.60"], [11, "35.20"], [12, "35.00"], [13, "33.53"], [14, "34.07"], [15, "33.47"], [16, "32.93"], [17, "31.40"], [18, "32.07"], [19, "30.07"], [20, "28.80"], [21, "29.00"], [22, "28.67"], [23, "29.20"], [24, "26.13"], [25, "28.40"], [26, "26.27"], [27, "25.07"], [28, "25.07"], [29, "24.53"], [30, "25.80"], [31, "20.40"], [32, "25.07"], [33, "23.27"], [34, "22.13"], [35, "22.07"], [36, "20.27"], [37, "22.07"], [38, "18.67"], [39, "19.13"], [40, "18.87"], [41, "18.67"] ]; var data1 = [{ data: graphdata, bars: { show: true, linewidth: 3, horizontal: false, fillcolor: "#f8e7b3", align: "center" }, color: "#ffffff" }, { data: trenddata, points: { show: true, linewidth: 3, radius: 10, fill: true, fillcolor: "#000000", symbol: "rectanglegraph" }, color: "#000000" }]; $.plot($(".graph"), data1, { grid: { tickcolor: "#eee", bordercolor: "#eee", borderwidth: 1, hoverable: true, clickable: true }, xaxis: { show: true, //* transform: function (v) { return -v; }, inversetransform: function (v) { return -v; } //*/ }, yaxis: { show: true, position: "right" } }); });.graph { width: 800x; height: 300px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script> <div class="graph bar"></div>
Comments
Post a Comment