Welcome Guest Search | Active Topics |

Problem with Linear Gauge
Options
Previous Topic Next Topic
dzinr38
#1 Posted : Thursday, June 20, 2013 8:44:00 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Please assist ASAP! I am working on a linear gauge that has labels from 0 - 1200 every 200 intervals. However, the label for 1200 is cutting off the last "0", and I cannot figure out how to get that to show up.

Also, is there a way to place a horizontal "grid" line across the bottom of the tick marks? We do not want them just floating but to have a base.

Any immediate assistance would be greatly appreciated.

Thanks!
Back to top
maxim.milev
#2 Posted : Thursday, June 20, 2013 11:14:01 AM(UTC)
Rank: Newbie

Groups: jQueryChart, jQueryDV, jQueryGauges, Moderator, MvcChart, Registered, WebFormsChart
Joined: 1/15/2013(UTC)
Posts: 7

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

Thank you for your question!

In order to to fit the labels inside you can try to set bigger border padding. It should looks like this code:
Code:
border: {
                    padding: 10,
                    lineWidth: 4,
                    strokeStyle: '#76786A'
      },

Here is the sample where you can see the whole Linear Gauge settings: http://www.jqchart.com/j...LinearGauge/GaugeBorder

As for the second question, you can try to create a range where the outerStartOffset and outerEndOffset have same values. Something like this code:
Code:
ranges: [
                                      {
                                          startValue: -30,
                                          endValue: 50,
                                          fillStyle: 'black',
                                          innerOffset: 0.38,
                                          outerStartOffset: 0.39,
                                          outerEndOffset: 0.39
                                      }
      ]

You can see this presented in the following sample: http://www.jqchart.com/j...earGauge/MultipleScales


Please let me know if this works for you.


Best regards,
Maxim Milev
Back to top
dzinr38
#3 Posted : Thursday, June 20, 2013 1:18:46 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

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

Thank you for your help. However, I can't seem to figure out how to get the baseline below the tickmarks on the linear gauge. It sits on top, and I need it to be at the bottom of the line. Thoughts?

I think the issue with the number may be fixed now. We will be doing some testing on that one. If you could let me know your thoughts on the baseline question above, I would really appreciate it.

Thanks,
Patty
Back to top
maxim.milev
#4 Posted : Thursday, June 20, 2013 3:57:31 PM(UTC)
Rank: Newbie

Groups: jQueryChart, jQueryDV, jQueryGauges, Moderator, MvcChart, Registered, WebFormsChart
Joined: 1/15/2013(UTC)
Posts: 7

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

Is it possible to send me the configuration ( $('#jqGauge').jqLinearGauge({…}) ) of the Linear Gauge, so I can try to set this baseline for you?


Best regards,
Maxim Milev
Back to top
 |  Edit by user
dzinr38
#5 Posted : Thursday, June 20, 2013 7:14:23 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

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

Here is the code we have for our linear gauge. Currently, the line sits on top of the tick marks, and we want them underneath, and the numbers underneath the tick marks and line. Any help you could provide would be greatly appreciated.

Thanks,
Patty

function setupJQChartGaugeFooter(footerId) {
$('#' + footerId).jqLinearGauge({
orientation: 'horizontal',
background: '#dddddd',
border: {
padding: 7,
lineWidth: 0
},
tooltips: {
disabled: true,
highlighting: false
},
scales: [{
minimum: 0,
maximum: 1200,
interval: 200,
labels: {
offset: 1,
fillStyle: '#545454'
},
majorTickMarks: {
lineWidth: 1.5,
offset: 0.38,
length: 12,
strokeStyle: '#a1a1a1'
},
minorTickMarks: {
visible: true,
lineWidth: 1.5,
interval: 40,
offset: 0.45,
strokeStyle: '#a1a1a1'
},
ranges: [
{
startValue: 0,
endValue: 1200,
fillStyle: '#a1a1a1',
innerOffset: 0.38,
outerStartOffset: 0.39,
outerEndOffset: 0.39
}
]
}
]
});
}
Back to top
maxim.milev
#6 Posted : Friday, June 21, 2013 12:23:55 AM(UTC)
Rank: Newbie

Groups: jQueryChart, jQueryDV, jQueryGauges, Moderator, MvcChart, Registered, WebFormsChart
Joined: 1/15/2013(UTC)
Posts: 7

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

I have changed the range's innerOffset to 0.44, outerStartOffset and outerEndOffset to 0.45.
Also I set the label's offset to 0.5.

Here is the modified code:

$('#jqLinearGauge').jqLinearGauge({
orientation: 'horizontal',
background: '#dddddd',
border: {
padding: 7,
lineWidth: 0
},
tooltips: {
disabled: true,
highlighting: false
},
scales: [{
minimum: 0,
maximum: 1200,
interval: 200,
labels: {
offset: 0.5,
fillStyle: '#545454'
},
majorTickMarks: {
lineWidth: 1.5,
offset: 0.38,
length: 12,
strokeStyle: '#a1a1a1'
},
minorTickMarks: {
visible: true,
lineWidth: 1.5,
interval: 40,
offset: 0.45,
strokeStyle: '#a1a1a1'
},
ranges: [
{
startValue: 0,
endValue: 1200,
fillStyle: '#a1a1a1',
innerOffset: 0.44,
outerStartOffset: 0.45,
outerEndOffset: 0.45
}
]
}
]
});

Please let me know if this works for you.


Best regards,
Maxim Milev
Back to top
dzinr38
#7 Posted : Friday, June 21, 2013 7:39:31 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

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

Thank you for your assistance. However, the line is still not going under the tick marks. When I change the offset numbers any higher than you see below, the line disappears. I am including the snippet of code I changed, but if you make the numbers any larger, the line disappears. I tried attaching a screenshot, but it looks like the only way to attach an image is via an online URL. Here is the code, though.

innerOffset: 0.48,
outerStartOffset: 0.49,
outerEndOffset: 0.49

Anything you can do to assist would be greatly appreciated. If you know of a way I can paste in the image here in the forum, that would be great. That way, you could see the issue.

Thanks,
Patty
Back to top
dzinr38
#8 Posted : Friday, June 21, 2013 7:49:02 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

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

Here is a link to the image showing the issue. My co-worker found a way to get the image to you. Hopefully, this will help you see the issue:

http://imgur.com/zt7leMp

Thanks,
Patty
Back to top
dzinr38
#9 Posted : Friday, June 21, 2013 12:38:24 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 6/20/2013(UTC)
Posts: 7

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

You can disregard my last post, as I figured it out and got it fixed. :)

Thanks,
Patty
Back to top
maxim.milev
#10 Posted : Friday, June 21, 2013 3:15:16 PM(UTC)
Rank: Newbie

Groups: jQueryChart, jQueryDV, jQueryGauges, Moderator, MvcChart, Registered, WebFormsChart
Joined: 1/15/2013(UTC)
Posts: 7

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


I am glad that you were able to fix it.
Please let me know if you have any further questions.


Best regards,
Maxim Milev
Back to top
Users browsing this topic
Guest (5)
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.205 seconds.