javascript - Flotchart stacked bar total label -


enter image description here

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

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more