Pareto Chart/Graph using Javascript/Html/JSON

Question

Im trying to find any plugins, examples or related resources on how to built a Pareto Chart for an html page. I'd like to be able to built it out of html, style it w/ CSS and populate data via json. Im willing to build it out of scratch by using a combination of a line graph and bar graph, however want to be sure there isnt anything already out there for this.

Here is an example of the output i hope to produce

Based on my searches i can only seem to find How-To's, Examples, etc on how to build one in Excel, however nothing for the web.

Any ideas or suggestions are greatly appreciated.

Answer 1

Pareto charts come standard in quite a few JS charting libraries. Here's a demo of one in ZingChart.

You can view the docs for creating pareto charts here. I'm part of the ZingChart team, and you're welcome to reach out to us if you have any questions at [email protected].

Answer 2

It seems some of the options aren't free and/or open source :(

For building from scratch, or at least basing on common libraries, d3 might be a good choice. I ran into a similar issue looking to generate histograms with a cumulative frequency line included in the chart, and to build my own based on some examples. I then investigated further for options for pareto charts and sorted histograms.

If you want to try it with d3, here's some examples to start from (they're not as pretty rendered like the other answers, but a charting/UI web developer can prettify it I'm sure):

• a basic d3 pareto chart based off Excel example
• a histogram-based pareto chart in d3 - at the time of this post, this d3 sample is incomplete

Answer 3

I am not sure from your description whether you would like to build from scratch or if you want to use a charts package. Normally, I would avoid re-inventing the wheel, but I sometimes do a challenge to learn. Below are a few links to pre-made packages of javascript charts that can do pareto, found with a google search (javascript pareto chart -excel -matlab).

http://cyberpython.github.io/AwesomeChartJS/ is apache 2.0

one of the better paid-for versions is http://www.dundas.com/ but there are others.

Sorry that this is a list of links. I would like to be able to rattle off the method from my memory, but I do not do HTML charts as much as I would like to.