Hi there,
I have a few questions regarding a custom chart we are testing. It is actually a recreation of a legacy graph and we need to prove that we can replicate it in Ignite.Here is the original chart:
http://imgur.com/2wDjVMY
Here is the Ignite version (different data set):
http://imgur.com/DTgQl7m
Right now, I have 3 scatter type series that each connect to a separate data source. The two lines are type "scatterLine" with markers set to "none". The other series is a custom "scatter" type with a marker template to edit the rendering of the size for each point. I chose to make everything scatter as for this last series, I need to be able to plot data that share the same date on the same X axis location (the X axis values are actually ticks and I am converting to date strings with a formatLabel).
Here are my questions:
1) How can I move the second Y-axis and its labels to the right side of the chart? I can't seem to find a clear way to do this in your documentation and forums.
2) I need to fill the entire area between the purple series line and 0 (if it is above 0, as it is here, it will fill below the line, and if it, or part it, is below 0, it will be above the line). For your reference, this corresponds to the blue color filled series in the image of the original example. I tried changing the series type to splineArea, but the chart fails to render after doing so. Can you suggest the best way to approach this?
3) Regarding the same purple series, if I have data that is below or crosses 0, I would like the X axis to represent 0 and the Y axis to extend below it. Currently, the graph will automatically adjust so that the lowest value lies on the X axis. I tried playing around with the crossingAxis and crossingValue properties but this did not seem to work. I would like the chart to reflect on both sides of the X axis in case there are any Y values below 0, as in the original chart sample above. For your reference, I added a data point to move the series below 0 so that you can see what it is doing now. Image here: http://imgur.com/BrAsga5
Thank you in advance for your assistance.
HI Corey,
Basically you can set only one axis using the crossingAxis property and this makes sense. If you want the xAxis to cross both y axis at the same point (in your scenario - 0), then please use the minumumValue and maximumValue properties on the axis that is not the crossing one. Let's say we have the Volume and Volume2 y axis and the crossing one is Volume2. See what are the minimum and maximum values rendered for the Volume2 axis (let's say 30 and 100 and provide those as minimumValue and maximumValue for the other axis:
$("#chart").igDataChart({ axes: [{ name: "Year", type: "categoryX", crossingAxis: "Volume2", crossingValue: 0, }, { name: "Volume", type: "numericY", minimumValue:30, maximumValue: 100 }, { name: "Volume2", type: "numericY", labelLocation: "outsideRight", }],
Please let me know if you have further questions on the matter, I will be glad to help.
Hi again Hristo,
My apologies. I didn't see your second post. I tried your suggestion and it does indeed work for moving the x axis to intersect at a specified point on one y-axis. However, it doesn't seem to work for both at the same time. I need both the Y axes to reach 0 at the same point. Please let me know how this might be accomplished.
Thanks.
Hi Hristo,
Thanks again for your reply, and sorry for my delayed response. I had to move on to some other items first before returning to this.
Let me readdress the points one by one:
1) labelLocation: "outsideRight" worked perfectly, thank you!
2) I saw that those types were category series, my problem is (and please correct me if I am wrong) that I need data points with the same date to show up on the same x-coordinate (on top of each other, basically), instead of next to each other. My understanding is that with the category series, they will appear next to each other and not over each other. Is that not correct? I will also need the all of the different series to move on the same axis as they are representing different activities for the same dates.
3) After playing with it a little bit I was able to get your workaround to display (had to change it a little since I am using NumericX and not CategoryX). It doesn't cover the entire length of the X-axis, but I am sure I can play with it more to get it there. However, one point I forgot to explicitly mention in my original post is that I will need the zero mark on the 2 separate y-axes to occur at the same place. With crossingAxis and crossingValue not working, is there any other way to accomplish this (or do you have an update on why those settings are not working)?
Thanks again for your time and help.
This is fine,
I wil wait for your update on the thread.
Thanks for your detailed response. I will review your suggestions and come back to your shortly. Appreciate it!