javascript - Flotchart stacked bar total label -
i using flotcharts create stacked bar chart show breakdown of values. have working once hover on stack show tool tip value stack in (you can see in second column).
what need @ top of stacks shows label of total value.
something high charts stacked column.
you can see code below. loop through data (using smarty) , set there.
// set data var data = [ { label: 'tenant', data: [ {foreach $metrics.rent_applied_by_month $rent_applied} [{$rent_applied@index}, {$rent_applied.tenant_value|number_format:2:'.':''}], {/foreach} ], color: '#008000' }, { label: 'benefit', data: [ {foreach $metrics.rent_applied_by_month $rent_applied} [{$rent_applied@index}, {$rent_applied.benefit_value|number_format:2:'.':''}], {/foreach} ], color: '#0000ff' } ]; // set xasis labels var ticks = [ {foreach $metrics.rent_applied_by_month $rent_applied} [{$rent_applied@index}, '{$rent_applied.period}'], {/foreach} ]; // chart options var options = { series: { stack: 0, bars: { show: true, align: "center", barwidth: 0.6, fill: .75, } }, xaxis: { ticks: ticks, ticklength: 1 }, grid: { hoverable: true, clickable: true, borderwidth: { top: 0, right: 0, bottom: 1, left: 1 }, bordercolor: { top: "#e5e5e5", right: "#e5e5e5", bottom: "#a5b2c0", left: "#a5b2c0" } }, legend: { show: true, nocolumns: 2, position: "nw", margin: [10, 0], labelboxbordercolor: null } }; $.plot("#rent_applied", data, options);
you'll need loop through each of bars in each stack total value of bars in each stack. total value in hand, can pass flot's plot.pointoffset() method position of top of stacked bars.
the code below has sample method of values of stack of bars, uses plot.pointoffset() append div showing value on top of bar.
$(function() { var data = [{ data: [ [0, 21.51], [1, 32.50], [2, 47.14], [3, 10] ], stack: 0, label: 'bottom' }, { data: [ [0, 37.77], [1, 24.65], [2, 7.67], [4, 15]], stack: 0, label: 'top' }]; var options = { series: { bars: { show: true, barwidth: .5, align: "center" }, points: { show: false } } }; var plot = $.plot($('#graph'), data, options); displaybarvalues(); // display values on top of bars function displaybarvalues() { var plotdata = plot.getdata(); var xvaluetostackvaluemapping = []; // loop through each data series (var = 0; < plotdata.length; i++) { var series = plotdata[i]; // loop through each data point in series (var j = 0; j < series.data.length; j++) { var value = series.data[j]; // if x axis value not in mapping, add it. if (!xvalueexistsinmapping(xvaluetostackvaluemapping, value[0])) { xvaluetostackvaluemapping.push([value[0], 0]); } // add value of bar x value mapping addvaluetomapping(xvaluetostackvaluemapping, value[0], value[1]); } } // loop through each of our stacked values , place them on bar chart $.each(xvaluetostackvaluemapping, function(i, value) { // find offset of top left of bar var leftoffset = plot.pointoffset({ x: value[0] - .5, y: value[1] }); // find offset of top right of bar (our bar width .5) var rightoffset = plot.pointoffset({ x: value[0] + .5, y: value[1] }); $('<div class="data-point-value">' + value[1] + '</div>').css({ left: leftoffset.left, top: leftoffset.top - 14, width: rightoffset.left - leftoffset.left, textalign: 'center' }).appendto(plot.getplaceholder()); }); } function xvalueexistsinmapping(mapping, value) { (var = 0; < mapping.length; i++) { if (mapping[i][0] !== undefined && mapping[i][0] === value) { return true; } } return false; } function addvaluetomapping(mapping, xvalue, yvalue) { (var = 0; < mapping.length; i++) { if (mapping[i][0] === xvalue) { mapping[i][1] = mapping[i][1] + yvalue; } } } });#graph { margin: 0 auto; text-align: center; width: 600px; height: 400px; } .data-point-value { position: absolute; white-space: nowrap; font-size: 11px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> <script src="https://rawgit.com/flot/flot/master/jquery.flot.stack.js"></script> <div id="graph"></div>
Comments
Post a Comment