Welcome Guest Search | Active Topics |

Fix x-axis for column chart and line chart.
Options
Previous Topic Next Topic
bharathnav
#1 Posted : Friday, October 11, 2013 8:04:17 AM(UTC)
Rank: Member

Groups: Registered
Joined: 9/17/2013(UTC)
Posts: 16

Thanks: 5 times
Was thanked: 0 time(s) in 0 post(s)
Hello All,

I have a issue displaying x-axis. I'm getting data from server for 3 hours for a week. So I get 56 number of data with dates and hour. How should I display the same which helps look my graph cleaner.

And for one hour a week I get 168 number of data. Please help me to fix this.

I have attached the images for reference in the below mentioned links:

for 3 hrs:[img][img][img][img]https://plus.google.com/photos/107323798782052521170/albums/5933480662233737425/5933480659345063858?banner=pwa&pid=5933480659345063858&oid=107323798782052521170[/img]


and 1 hour:
[img]https://plus.google.com/photos/107323798782052521170/albums/5933480662233737425/5933480661947947586?banner=pwa&pid=5933480661947947586&oid=107323798782052521170[/img]

Thanks in advance,
Bharat
Back to top
Dragan
#2 Posted : Friday, October 11, 2013 8:34:09 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)
You can use the following code:

Code:
axes:[
{
    location : 'bottom',
    labels: {
            resolveOverlappingMode: 'hide'// hide | multipleRows
    }
}
]


You can also add your x-values as true date values. Instead of ['2013-10-06', 50], you can use [new Date('2013-10-06'), 50]

Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
bharathnav on 10/11/2013(UTC)
bharathnav
#3 Posted : Friday, October 11, 2013 8:39:51 AM(UTC)
Rank: Member

Groups: Registered
Joined: 9/17/2013(UTC)
Posts: 16

Thanks: 5 times
Was thanked: 0 time(s) in 0 post(s)
Hello Dragan,

Thank you very much. It helped me :)

Thanks again,
Bharat
Back to top
bharathnav
#4 Posted : Tuesday, October 15, 2013 4:26:07 AM(UTC)
Rank: Member

Groups: Registered
Joined: 9/17/2013(UTC)
Posts: 16

Thanks: 5 times
Was thanked: 0 time(s) in 0 post(s)
Dear Dragan,

Based on your suggestion in the previous post I used resolveOverlappingMode: 'hide' to hide the extra overflowing content but it was not user friendly, because was unable to understand the data.

Data I get from server is : [["2013-10-06 00", "240.0"], ["2013-10-06 01", "240.0"], ["2013-10-06 02", "240.0"], ["2013-10-06 03", "240.0"], ["2013-10-06 04", "240.0"], ["2013-10-06 05", "240.0"], ["2013-10-06 06", "240.0"], ["2013-10-06 07", "240.0"], ["2013-10-07 00", "240.0"], ["2013-10-07 01", "240.0"], ["2013-10-07 02", "240.0"], ["2013-10-07 03", "210.0"], ["2013-10-07 04", "190.5"], ["2013-10-07 05", "182.0"], ["2013-10-07 06", "181.5"], ["2013-10-07 07", "182.8"], ["2013-10-08 00", "256.8"], ["2013-10-08 01", "330.0"], ["2013-10-08 02", "330.0"], ["2013-10-08 03", "288.2"], ["2013-10-08 04", "264.5"], ["2013-10-08 05", "190.7"], ["2013-10-08 06", "190.5"], ["2013-10-08 07", "360.0"], ["2013-10-09 00", "360.0"], ["2013-10-09 01", "360.0"], ["2013-10-09 02", "360.0"], ["2013-10-09 03", "317.3"], ["2013-10-09 04", "264.2"], ["2013-10-09 05", "275.7"], ["2013-10-09 06", "301.3"], ["2013-10-09 07", "270.0"], ["2013-10-10 00", "270.0"], ["2013-10-10 01", "270.0"], ["2013-10-10 02", "270.0"], ["2013-10-10 03", "245.5"], ["2013-10-10 04", "186.3"], ["2013-10-10 05", "176.8"], ["2013-10-10 06", "183.7"], ["2013-10-10 07", "270.0"]]

and I want to show that in the below expected manner:

http://s15.postimg.org/561vklp0b/expected.png

I tried using categories but it wont suit me.

Could you help me to resolve this please.

Thanks in advance,
Bharat
Back to top
 |  Edit by user
Dragan
#5 Posted : Tuesday, October 15, 2013 7:03:00 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)
Please use:
Code:
[[new Date("2013/10/06 00:00"), 200.0], [new Date("2013/10/06 01:00"), 200.0],..

instead of:
Code:
[["2013-10-06 00", "240.0"], ["2013-10-06 01", "240.0"], ...

Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
bharathnav on 10/16/2013(UTC)
Users browsing this topic
Guest (2)
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.107 seconds.