Welcome Guest Search | Active Topics |

Displaying hourly data
Options
Previous Topic Next Topic
BSDguru
#1 Posted : Saturday, April 19, 2014 8:52:34 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
I have a dataset with usage data per hour. I can't figure out how to get jqChart to display hours (ie 8AM, 9AM...) on the bottom axis. I'm using column data for the hourly info; so I have a graph of 3 days (72 columns) and I want the bottom axis to display:


8AM 12AM 4AM ...

or whatever fits well. I suppose I could create an array of labels but it would be convenient if I could just put out the info in the DB rather than pre-precessing it.

Data is stored with a timestamp, so my data looks like:

[ new Date(milliseconds), VALUE ]

stringFormat doesn't seem to accept the 'A' for AM/PM either.

Thanks.
Back to top
BSDguru
#2 Posted : Sunday, April 20, 2014 7:08:40 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
As a follow up to this, with more data points, setting intervalType to hours seems to put out the tick labels as hours, but not on even boundaries (ie 8:04, 9:04...) Standard JS string formats don't seem to work. "hh:mm a" puts out the a rather than am/pm.
Back to top
BSDguru
#3 Posted : Sunday, April 20, 2014 8:20:34 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
So I've given up on the dateTime axis and now I have it set up with categories; I'm generating the categories while I gather the data. Now I have 2 new things I can't figure out:

1) I'm generating the labels as such

categories: [ '','','labal A','','' '' label b']

otherwise there are too many labels and they dont fit. Is there a way to automatically have it select labels that will fit on the axis without having to fudge it? For example it would be nice if I could give every column a label, but have the plugin only put on labels where they fit on the axis.

2) Column width.

I'd like the columns to be wider, so they almost touch (ie a 1px gutter between them). Is there a way to set the gutter or the width?

3) Is there a way to randomly select a color for the columns, so with 1 series they're all different colors? Some other packages do this and it looks nicer than having all 1 color.

sorry for all of the questions but I'm converting a bunch of existing charts to see if we can use jqChart.

4) Doing the category labels the way Im doing them, they are offset too far from the axis. Since you can't Inspect elements inside the canvas Im not sure if its a CSS issue, or an artifact of the empty labels.
Back to top
 |  Edit by user
BSDguru
#4 Posted : Sunday, April 20, 2014 11:05:02 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
To answer my own question, just to put it in the record:

Code:

axes: [
                        {
                                type: 'dateTime',
                                intervalType: 'hours',
                                interval: 1,
                                location: 'bottom',
                                labels: {
                                        stringFormat: "hTT"
                                }
                        }
                ],


With data in the form:

Code:


data: [
                [ new Date(1397750400000),154 ],
                [ new Date(1397754000000),141 ],
                                ...


Works as I wanted.
Back to top
BSDguru
#5 Posted : Sunday, April 20, 2014 12:33:15 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Again, answering my own question, sort of.

To get random colors:

Code:

PHP

foreach($data as $foo)
    $colors[]="'#" . bin2hex(openssl_random_pseudo_bytes(3)) . "'";
.
.
,
fillstyles: [<? echo implode(',',$colors) ?>],



Pretty nifty. It would be AWESOME if there was an option:

fillstyle: random,

something to think about in your free time.
Back to top
Dragan
#6 Posted : Tuesday, April 22, 2014 1:24:59 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

I'm glad you found your answer. I just want to add the documentations sections in which more info can be found:
http://www.jqchart.com/docs/jquery/#!/guide/DateTimeAxis
http://www.jqchart.com/docs/jquery/#!/guide/LabelsFormatting-section-formatting-date-values

We'll think how we can add 'random' color.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
 |  Edit by user
BSDguru
#7 Posted : Wednesday, April 23, 2014 2:58:26 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 4/19/2014(UTC)
Posts: 9

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Something else to consider with random colors is when the color matches the background, the bar disappears! And very light shades are hard to see (assuming white background).
Back to top
Dragan
#8 Posted : Thursday, April 24, 2014 10:31:53 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Sure, when the colors of the bars are the same as the background color, the bars won't be visible. The light shades are probably the shadows of the bars.
http://www.jqchart.com/jquery/chart/ChartFeatures/Shadows
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.180 seconds.