Skip to content

skeleton9/flot.stackpercent

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

flot.stackpercent

This is a plugin for jQuery flot, to create chart as stacked percentage.

This plugin is based on another plugin jQuery.flot.stack.js which can be found on http://code.google.com/p/flot/

Option to enable stackpercent:

series: {
    stackpercent: true
}

Here is a basic example's javascript code:

$(function () {

	var data = [
		{"label":"Apple", "data": [[1,12], [2, 10], [3,2], [4,5], [5, 9], [6,11]], "color":"#B41722"},
		{"label":"Samsang", "data":[[1,11], [2, 3], [3,8], [4,1], [5, 2], [6,17]], "color":"#E78800"},
		{"label":"HTC", "data":[[1,10], [2, 6], [3,5], [4,3], [5, 12], [6,19]], "color":"#83BA4F"}
	];
	
	var options = {
        series: {
			stackpercent : true,    // enable stackpercent
            bars: {
				show: true,
				barWidth: 0.6,
				fillColor: {
					colors:[{opacity: 1},{opacity: 1}]
				},
				align: "center"
			}
        },
		legend : {
			container : "#legends",
			noColumns : 3
		},
        xaxis: {tickSize : 1},
        yaxis: {max:100}  // so the yaxis is from 0 to 100
    };
	
	$.plot($("#placeholder"), data, options);

});

It will create a chart like this:

example chart

And it can be horizontal:

horizontal example

You can disable a series's stackpercent by setting its own stackpercent : null, so you can display other type of charts with it.

with_line example

You may need to set options yaxis:{max:100} to make the yaxis is 0-100.

It can work with another plugin called flot.tooltip https://github.com/skeleton9/flot.tooltip to easily show y value, percentage and x value.

See and try examples yourself.

jquery.flot.stackpercent is available under the MIT license.

About

plugin for jQuery flot, to create chart as stacked percentage

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •