| Page 1 of 2 | [ 11 posts ] | Go to page 1, 2 Next |
Khoa Bui
|
I want to place the line or spline chart over other canvas that rendered by my routine.
I need to heavily customize chart stuff so that leave only the line: - Remove x-axis, y-axis, chart background. - Set line with to about 2 pixels. - Remove or keep the dot represent a point, customer tooltip. - Can show multiple line How can I do this? Thanks. |
|
Hi,
The width of the lines in a chart's series can be set with the series' styles.line.weight property. The Axis class has a position attribute. Setting it to "none", will prevent the axis from displaying altogether. Markers can be displayed by series or globally with the showMarkers attribute. (true/false) If you set showMarkers to false, you will need to change the chart's interactionType attribute to "planar", allowing for coordinate based mouse interaction. You can set the alpha of the graph's background to zero through the global styles object. Below is an example of how you might implement all of this. Styled chart exampleClick here to see the revision history on this Gist.Thanks, Tripp |
Khoa Bui
|
Thank you Tripp,
It works. For other one that may need a working example to view result, here it is: http://jsfiddle.net/khoaminhbui/VxscF/ |
Khoa Bui
|
Hello Tripp,
After playing around with the chart, i come up with a fairly good chart that suite my specific need. Here it is: http://jsfiddle.net/khoaminhbui/VxscF/ This is a 0-9 level chart, and i need more functionality: - Draw some horizontal line with different color, for example, line that exceed level 5 will be in red. - Draw some marker with different color, for example, marker that over level 5 will be in yellow. Can I do it with YUI support? |
|
This functionality does not exist in YUI Charts. You may be able to hack it for your use case by breaking the changing your dataProvider to map values over 5 to different keys. This would force the chart to create two different series for the chart.
Thanks, Tripp |
Khoa Bui
|
Thank you, I'll dig into the code and ask you later.
There are a problem with the 0-9 level chart I create: - Although the data is integer (0-9), the points do not lay exactly on the horizontal lines. - I make a reversed chart and expect they are symmetrical, but the two halves look a bit different. How can I specify the how much a unit is? For example, a unit is 1, then 0-9 level will have 10 horizontal lines. If a unit is 2, then there are 5 horizontal lines. My new updated example is still at: http://jsfiddle.net/khoaminhbui/VxscF/ Updated: the horizontal gridlines are always 11. I see that this is default number. How can I config it to be 10 lines? |
|
You should be able to update the axis.styles.majorUnit.count property to 10 and get 10 ticks but it looks like there is a bug that won't allow you to change this property when the axis' position is set to "none". The workaround will be to set the values axis' position to left and hide all of its elements.
This will not work due to bug: Code: axes: { values: { position: "none", styles: { majorUnit: { count: 10 } } }, category: { position: "none" } } Here is the workaround: Code: axes: { values: { position: "left", styles: { majorUnit: { count: 10 //set the count to 1o }, majorTicks: { position: "none" //hide the ticks }, line: { weight: 0 //hide the line } }, labelFunction: function(label, format) //format all labels to an empty string { return ""; } }, category: { position: "none" } } Thanks, Tripp |
Khoa Bui
|
I did try the first sample but not works, now I know this is a known bug.
The workaround works well, and the symmetrical issue gone too. Thank you. |
Khoa Bui
|
I customize the chat a little bit: make category to be numeric type. Like this: http://jsfiddle.net/khoaminhbui/VxscF/
The problem is the major Unit is not exactly as set, but equal to the maximum category value. For example, I set majorUnit to be 200, but the maximum category value is 190, then the last marker that has category 190 is drawn at the end of the chart. My expectation is that the marker with category value 190 will be drawn 'near' the end of the chart. Is this a bug or i need more setting? Updated: I encounter the similar problem with value axis, although i specify the majorUnit.count = 10, Then: - If the biggest value is 9, thing is ok, a unit has value 1, the axis labels are 0, 1, ..9. - If the biggest value is 7, the problem arise, a unit value is scaled to be 7/9=0.7777777778. the axis labels are 0, 0.7777777778, 1.5555555556, 2.3333333333, 3.1111111111, 3.8888888889, 4.6666666667, 5.4444444444, 6.2222222222, 7. Updated 2: However, if i specify the values to be less than zero to make the chart rendered bottom up, thing is ok. Even if the value in the range from 0 to -7 (Because 0 is biggest value). |
|
The majorUnit.count property only specifies the number of ticks on an axis. It does not specify the maximum value on the axis. The maximum value will be determined by the data, range and number of ticks. In your case, it works nice to leave majorUnit.count at its default setting. In fact, you don't really need to style this axis at all since you have its position as "none". The defaults layout nicely.
Code: category: { position: "none", type: "numeric" } Alternatively, if you need to specify 200 as your majorUnit count, you can set the axis' roundingMethod attribute to a whole number. Assigning 1 to your existing example works well. Code: category: { position: "none", type: "numeric", roundingMethod: 1, styles: { majorUnit: { count: 200 }, ... The roundingMethod setting will work for you y-axis issues as well. Setting it to 1 will ensure whole numbers on every increment. In your examples, the range would go from 0 - 9 in each chart. Code: values: { position: "left", type: "numeric", roundingMethod: 1, ... If you are happy with the range, you could skip the above method and just clean up the labels with the labelFunction. Code: labelFunction: function(label, format) { return Math.round(parseFloat(label) * 10)/10; } Thanks, Tripp |
| Page 1 of 2 | [ 11 posts ] | Go to page 1, 2 Next |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group