Morris.Bar revisited + necessary Morris.Grid changes

[tiraeth]

Morris.Bar for refactored version - I am a such impatient programmer, forgive me please :-)

Features:

• Multiple series (as much as the paper can hold),
• 2-color vertical gradient with @ymax as the reference for "top",
• 3-color vertical gradient (only: 0%-50%-100%), reference as above,
• opacity decrease on x-axis category hover,

Because I needed to move first and last x-axis category to not make any bar exceed the paper geometry, I had updated Morris.Grid to allow padding per side (css-like syntax), extract Grid left/right padding, and add additional callback @overridePadding() if @overridePadding which allowed me to change all these values to get the chart working.

Example included with the library:

This PR successfully closes #98 :-)

[tiraeth]

How to boost user experience?

Disable dateFormat for drawing x-axis labels and allow Morris to put raw x-values :-)

How to define gradient in barFillColors?

To setup gradient used for filling a particular series' bars, you have to provide colors, separated by space, for each series. You can provide either two or three colors (for creating 2-color or 3-color gradient, respectively), for example:

Morris.Bar({
  element: 'graph',
  data: [
    {x: '2011 Q1', y: 3, z: 2, a: 3},
    {x: '2011 Q2', y: 2, z: 1, a: 1},
    {x: '2011 Q3', y: 0, z: 2, a: 4},
    {x: '2011 Q4', y: 4, z: 4, a: 3}
  ],
  xkey: 'x',
  ykeys: ['y', 'z', 'a'],
  labels: ['Y', 'Z', 'A'],
  barFillColors: [
    '#aaa #555',      // from light gray to dark gray (top to bottom)
    '#555 #aaa black' // from dark day, through light gray, to black
  ]
});

Hint: All color strings valid for Raphael.color() can be used with Morris.Bar. Just don't use space when using rgb, hsb, or hsl color description.

[oesmith]

Cool!

I'm going to hack on this now. I'm thinking of changing the way the x-axis scaling works for bar graphs. Instead of doing a straight time-based interpolation, I'd rather split the chart into equal-sized blocks for each entry in options.data. This should mean we don't need the padding calculations..

[tiraeth]

Waiting for your changes 👍

[oesmith]

OK, take a look at e4f4594. I've taken your work and pared it right down to the absolute bare essentials, removing some unnecessary bits that were leftover from Morris.Line and refactoring anything relating to horizontal positioning.

To keep the basic functionality of the bar chart clear, I've removed some of your new additions. I've no objections to any of them, I'd just like to build up the features incrementally from a really solid base.

What do you think?

[tiraeth]

Sweet!

Anyway, I will still need to fork Morris.Bar because I do need gradient support for fill attribute. I will work on it and try to give you more solid method for defining bar colors/gradients.

[oesmith]

Looking forward to your next pull request already - thanks for all the hard
work! :)

Sent from my iPad

On 31 Oct 2012, at 22:15, Marcin Chwedziak notifications@github.com wrote:

Sweet!

Anyway, I will still need to fork Morris.Bar because I do need gradient
support for fill attribute. I will work on it and try to give you more
solid method for defining bar colors/gradients.

—
Reply to this email directly or view it on
GitHubhttps://github.com/oesmith/morris.js/pull/101#issuecomment-9964184.

[ghost]

Hey! i love the plugin... i have a suggestion, in some cases it would be useful to hide the details pop-over on the bar chart. Im showing only one item with three bars on it, the problem is that the popover stay always visible and my beautiful colored bars are always behind it. I couldn't find a parameter to hide it
https://dl.dropbox.com/u/1000698/permalinks/10-11-2012%2019-50-32.jpg
tnx!

[tiraeth]

Set option: hideHover to false. This will prevent the popup from being constantly displayed on the graph. It will appear only when you hover the bar/group of bars.

[ghost]

Thank you for your answer! I tried to set the hideHover option but it didn't work, in the bar chart options I don't see hideHover listed http://www.oesmith.co.uk/morris.js/#bars

[tiraeth]

Morris.Bar extends Morris.Line and utilizes this parameter. Setting it to false should be enough and I assure you it is.

[ghost]

The pop-over stays always visible, is there something wrong with my code?
thank you for your help

jQuery(document).ready(function(){
    Morris.Bar({
      element: 'active-comments-chart',
      data: [
        { y: 'Active Comments', a: 20, b: 60, c: 40 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b', 'c'],
      labels: ['Complaints', 'Suggestions', 'Compliments'],
      barColors: ['#ff5d5d', '#1D9EFF', '#74d782'],
      hideHover: false
    });
})

[tiraeth]

Set this parameter to true. I can't explain why I was saying it's false.

[ghost]

it worked!

[leonid1212]

Hello there and thanks in advance. i have this problem that in the plugin when i bring information with an ajax for building a bar chart with "Morris.js" ,every second bar of the axis is not showing the information(the tooltip working through) , but if i write the "json" straight to the code it works fine what is my mistake? here is the code: $(document).ready(function(){

var numberOfSeconds=30*1000; //the interval of refreshing the information of the calls per server
var x=getTheInfoAboutTheServers();

//The m_graph contains an information
//and build the graph itself later we update the data with the m_graph.setData() function
var m_graph= Morris.Bar({
element: 'my_chart',
data: x,
xkey: 'y',
ykeys: ['a'],
labels: ['Number of calls']
});

/** * This Function get the number of calls per each server * return a JSON object to the morris.js pluggin */ function getTheInfoAboutTheServers(){

var inf=null;

$.ajax({

 async: false,    
 type: "POST",
 url : $('#site_url').val()+"index.php/Login_controller/mw_iaa_rawGraphInfoClient",
 dataType: "JSON",
    success: function(data){


        var dataArr=[];

            for (key in data) {
                if (!isNaN(key)) {
                    var obj = data[key];

                    var mySplitResult = obj['callserver'].split(".");
                    var calls=parseInt(obj['numOfCalls']);


                    dataArr.push({ y: String(mySplitResult[0]), a : calls});
                  }
              }
        inf=dataArr;

   }

});

return inf;

}