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,
To make the xAxis float up/down you should set the crossingAxis, crossingValue and labelLocation property, and the labelLocation property should have an "inside" value. e.g.:
axes: [ { name: "NameAxis", type: "categoryX", crossingAxis: "PopulationAxis", crossingValue: 100, labelLocation: "insideTop", }, { name: "PopulationAxis", type: "numericY", }]
It seems like i have answered all your questions and verified that my suggestions work on my test sample. However you can try and confirm if those work on your side too or if they dont just to make sure we are on the same track. If you need any firther assistance, you can send an attachment of your sample or share any mock data and your grd condition. I can also send you my test sample for your reference.
Sorry for my late response. I have been investigating the possibilities of the igDataChart to achieve the desired and I am glad to inform you the following:
- you can control the location of the axis by using the labelLocation property of the axes and setting it to "outsideRight":
labelLocation: "outsideRight",
- Area types (inlcuding splineArea) are working with categorized data only, so this may be a reason that the chart fails to render. Please make sure that your xAxis is of type "categoryX" or "categoryDateTimeX" as stated at http://www.igniteui.com/help/igdatachart-series-requirements#category
For more info on configuring series please refer to http://www.igniteui.com/help/igdatachart-series-types
- Generally the xAxis will always stay on the lowest point, regardless if it is 0 or - 100 or 200 on the numeric yAxis, but you should be able to make the xAxis float up/down using the crossingAxis and crossingValue properties. They do seem to not work and I am currently investigating this and if other settings need to be applied as well. However you can leave the xAxis at the lowest point and draw a line at 0 value, that can be orange for example to resemble the chart from the image. To do this just add a data field containing the value 0 (it is enough to have it on the first and last data object) and then add the following series:
{ name: "zeroLine", type: "line", xAxis: "NameAxis", yAxis: "PopulationAxis2", valueMemberPath: "zeroPoint", // this will point to the field added unknownValuePlotting: "linearInterpolate", brush: "orange"}
I hope the above is helpful. Please let me know if you have questions on it or if you need a sample demonstrating those approaches. I will upodate you later once I have more information on the crossgingAxis and crossingValue properties.
Just wondering if anyone might be available to assist here. Thanks.