0

I'm trying out the horizontal bar RGraph demo with this code and it works great:

var data = [1, 40, 30];
var hbar = new RGraph.HBar('myCanvas', data);
hbar.Set('chart.labels', ['Richard', 'Alex', 'Nick']);
hbar.Set('chart.background.barcolor1', 'white');
hbar.Set('chart.background.barcolor2', 'white');
hbar.Set('chart.background.grid', true);
hbar.Set('chart.colors', ['red']);
hbar.Draw();

Is there a way I can use Date objects instead of numbers? I couldn't get it to work with stuff like

var data = [new Date(1000), new Date(2000), new Date(3000)];
Jean-Philippe Pellet
  • 59,296
  • 21
  • 173
  • 234

1 Answers1

1

In that case, you can do something like : 

var data, dates = [new Date("11/16/2011"), new Date("11/17/2011"), new Date("11/18/2011")], labels = [];
// Get the date from the date objects
for(var i = 0, len = dates.length; i < len; i++) {
    // Data for the graph
    data[i] = dates[i].getDate();

    // Labels for each data entry
    labels[i] = dates[i].getDate() + "/" + dates[i].getMonth() + "/" + dates[i].getYear();  
}
var hbar = new RGraph.HBar('myCanvas', data);
hbar.Set('chart.labels', labels);

/// rest of the code

Date object on MDN : https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

pradeek
  • 21,445
  • 2
  • 31
  • 32
  • Thanks for your suggestion. This is only part of the deal, though, as I don't get the nice Date labels on the X axis… – Jean-Philippe Pellet Nov 16 '11 at 08:34
  • What do you want to display in the labels? Can you tell clearly? – pradeek Nov 16 '11 at 09:00
  • Well, I'd like dates instead of numbers — formatted with a format I can define, e.g. "yyyy-MM-dd". – Jean-Philippe Pellet Nov 16 '11 at 13:33
  • Check out the edited answer. You can change the formatting for the date as you wish. Also check out the MDN link on the Date object for the function references. – pradeek Nov 16 '11 at 13:43
  • Setting the labels like this doesn't work: it sets the name of the horizontal bars. I want the dates to show up along the horizontal axis. – Jean-Philippe Pellet Nov 18 '11 at 17:33
  • The values for the horizontal axis are automatically generated from the data specified. You can see the list of available customization options here : http://www.rgraph.net/docs/bar.html#properties. – pradeek Nov 19 '11 at 01:45
  • Yes, they are automatically generated, and that's the problem: they are numbers instead of dates. We're very close, but I can't award you the 100 points unless we reach a working solution. – Jean-Philippe Pellet Nov 19 '11 at 10:35
  • @Jean-PhilippePellet I've modified the RGraph.hbar.js file. http://dl.dropbox.com/u/1088914/RGraph.hbar.js . Use this file and use hbar.Set('chart.hlabels', ['l1', 'l2', ... ]); to set the text for the horizontal axis. The changes are from line 592 to 595. Check the formatting based on your inputs. P.S. : The 100 rep bounty is not the only reason we answer questions here. Its because we learn from these as well. ;) – pradeek Nov 19 '11 at 12:35