Pie chart, bar char and other options

[steventen]

Hi, Olly

First of all, nice work for this morris.js, simple and elegant. But may it's better to add some more standard chats? Like pie chart, and bar chart?

Donut chart is nice, but it needs user to hover over it in order to show what each stands for. Maybe provide options for legend?

Thanks

[oesmith]

I'm gradually working towards getting more charts in - if you've got some specific ideas for what you'd like to see, I'd be glad to see some mockups or similar designs (or even better, some code!).

I'd avoided including legends in the donut chart because the legend can quickly overwhelm the chart. The donut chart should be a very simple overview of the data, and if you need more information alongside it, I'd recommend adding a table or a different kind of visualisation so that its easily readable and accessible.

[onlymejosh]

Hey Olly,

I'd also like to see bar charts its really the only thing missing. I agree with you on the legends. At first I thought they would add to the design but its not the use case for them.

[oesmith]

Thanks to the enthusiasm in the other thread, area charts are next on my list of priorities. Once they're out of the way I'll start investigating bars! 👍

[luis-ca]

I've added an initial implementation for a pie chart, feedback welcome (#92). luis-ca@30206c1

[oesmith]

OK, basic support for bars are in now too! See #101 for details.

[riccardoprandini01]

i think 2 needed graph are because graph are fo non tech people

• Gauge: for example an arch where in the middle there is the absolute value and %(optional), so no particular back groud no special pointer/hand. If you want to describe various level green, yellow red ecc, whi not use an array of %

  Morris.Gauge({
  element: 'holder',
  data: [ {label: "TotalPSI", value: 80 } ],
  boundValues:[{min:0,max:1000}],
  sectionsColors: [ //optionals otherwise monocolor
  {min: 0,max: 40, color:'#167f39' }, //fist one begin with 0
  {min: 40,max: 60, color:'#FF0012' },
  {min: 60,max: 80, color:'#AF312' },
  {min: 80,max: 100, color:'#CFCF12' }//lastone end with 100
  ]
  });

image:

[IMG]http://i49.tinypic.com/2ppalpg.png[/IMG]
[IMG]http://i50.tinypic.com/30j38mu.png[/IMG]
[IMG]http://i49.tinypic.com/14m9bg8.png[/IMG]

• Radar
  This is a bit mor complex radar could be used to compare walues or to have a quick map of a system.

1. Define the number of "direction"
2. set a label to each one
   3)360°/number of axis --> angle between them
3. Draw a circle (transparent)
4. plot axis from the center to the bound of circle, using pre calculated angle between them
5. plot min max and value for each one
6. if needed plot transparent area of maximum else plot a poliline else do not plot
7. if needed plot transparent area of minimum on top maximum else plot a poliline else do not plot
8. If needed draw poliline area of values on top min e max

example of 3 direction [it's not an xyz]
[IMG]http://i45.tinypic.com/2j5x3rd.png[/IMG]

[oesmith]

Radars are a pain in the ass (and I'm not convinced they work well on the web), so I'd rather keep them out of morris completely.

Gauges are more interesting. They're pretty simple, so should be a quick-ish job to complete. I'll add a separate issue to discuss them.

Closing this issue now, since it's dragged on for a looooooooooooong while.