Show value in bar - jQuery stacked horizontal chart graph

I would like to show the value in a line on a histogram (horizontal and complex), for example:

|------------------------------------------- | 5 | 1 | |------------------------------------------- | |------------------------------------ | 3 | 2 | |------------------------------------ 

I saw this message: Show the value in the bar on the histogram in the worksheet. Values ​​are displayed only inside the first panel. The second value is the current total value, and not the corresponding value of the current bar, for example:

 |------------------------------------------- | 5 6 | | |------------------------------------------- | |------------------------------------ | 3 5 | | |------------------------------------ 

Does anyone know a good plugin for this feature? In addition, I would like to increase the font size inside the panel.

Thanks!


Here is the code:

 <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script> <script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script> var data = [ {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]}, {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]} ]; //reverse data for horizontal for (series in data){ var s = data[series]; for (i=0;i<s.data.length;i++){ var tmp = s.data[i][0]; s.data[i][0] = s.data[i][1]; s.data[i][1] = tmp; } } var options = { series: { stack: 0, lines: {show: false, steps: false }, bars: { show: true, barWidth: 0.5, align: 'center', horizontal: true, showNumbers: true }, }, yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]}, }; $.plot($("#flot-example-2"), data, options); 
+6
source share
3 answers

I updated flot-barnumbers to support stacked bars, see updated examples . If you need any other functions, send me an e-mail or open a problem, I just accidentally saw this question.

+5
source

Flot-barnumbers do not seem to support a stacked histogram. This is why the value is marked incorrectly. I would recommend using jqBarGraph, which is a jQuery plugin for implementing stacked bar charts.

http://workshop.rs/jqbargraph/

I hope this helps.

+1
source

I finally decided to use Highcharts Plugin because it is much better documented and works well!

0
source

Source: https://habr.com/ru/post/927473/


All Articles