Hi,
In the attached chart, it has two series, the series with the column type missing the first and last columns. Also, the column positions are not correct on the x axis. Anything we can correct this?
Thanks,
We draw the chart using the following code:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=9">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20121/1010/js/infragistics.loader.js"></script>
<script type="text/javascript"> $.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/jquery/20121/1010/js/", cssPath: "http://cdn-na.infragistics.com/jquery/20121/1010/css/", });
var transperantBrush = "rgba(0,0,0,0)", priceBrush = "rgba(68, 172, 214, .8)", negativeBrush = "rgba(198, 45, 54, .8)", trendlineBrush = "rgba(68, 172, 214, .8)", outlineBrush = "black", volumeBrush = "rgba(73, 73, 73, .8)", brush, negBrush, outlBrush;
$.ig.loader({ scriptPath: "http://cdn-na.infragistics.com/jquery/20121/1010/js/", cssPath: "http://cdn-na.infragistics.com/jquery/20121/1010/css/", resources: "igDataChart.Financial.Category" });
$.ig.loader(function () { data = [ { "x": "2.1", "y": 1000}, { "x": "4.1", "y": 1005}, { "x": "6.1", "y": 1010}, { "x": "9.1", "y": 1033}, { "x": "13.1", "y": 1069}, { "x": "17.1", "y": 1033}, { "x": "20.1", "y": 1010}, { "x": "22.1", "y": 1005}, { "x": "25.1", "y": 1000} ],
data1 = [ { "x": "2.1", "y": 1000}, { "x": "3.1", "y": 1020}, { "x": "4.1", "y": 1021}, { "x": "5.1", "y": 1033}, { "x": "6.1", "y": 1042}, { "x": "7.1", "y": 1029}, { "x": "8.1", "y": 1042}, { "x": "9.1", "y": 1053}, { "x": "10.1", "y": 1015}, { "x": "11.1", "y": 1049}, { "x": "12.1", "y": 1043}, { "x": "13.1", "y": 1069}, { "x": "14.1", "y": 1026}, { "x": "15.1", "y": 1025}, { "x": "16.1", "y": 1042}, { "x": "17.1", "y": 1057}, { "x": "18.1", "y": 1057}, { "x": "19.1", "y": 1038}, { "x": "20.1", "y": 1019}, { "x": "21.1", "y": 1037}, { "x": "22.1", "y": 1022}, { "x": "23.1", "y": 1041}, { "x": "24.1", "y": 1042}, { "x": "25.1", "y": 1063}],
$("#chart").igDataChart({ width: '750px', height: '400px', verticalZoomable: true, horizontalZoomable: true, axes: [ { type: 'categoryX', name: 'xAxis2', dataSource: data, label: 'x', labelExtent: 50, labelVisibility: 'visible' },{ type: 'categoryX', name: 'xAxis', dataSource: data1, label: 'x', labelVisibility: 'collapsed' },{ type: 'numericY', name: 'yAxis', labelVisibility: 'visible' }, { type: 'numericY', name: 'yAxis2', labelVisibility: 'visible', stroke: 'rgba(0,0,0,0)', majorStroke: 'rgba(0,0,0,0)' }], series: [{ type: 'column', name: 'series1', brush: priceBrush, dataSource: data1, thickness: 2, xAxis: 'xAxis', yAxis: 'yAxis', valueMemberPath: 'y', }, { type: 'spline', name: 'series2', dataSource: data, xAxis: 'xAxis2', yAxis: 'yAxis', valueMemberPath: 'y', }] }); });
</script>
<style> #chart { position: relative; float: left; margin-right: 10px; margin-bottom: 20px; } .options { float: left; font-size: 0.857em; } </style> </head> <body> <div id="chart"></div>
</body> </html>
Actually, the first and last columns are there. It is just the range of y axis not large enough. But the the column postions are wrong.
Hi, You should plot the columns and the line on the same x axis if you want them to align appropriately. You have hidden the axis that the columns are aligning to. Putting the line and the column series on the same x axis will adjust the line series to align properly with the columns on the same x axis.
You can adjust the minimum value of the y axis by setting the minimumValue option on the yaxis.
Yes. You are right. We knew that. Basically, we want to draw a historgram chart with the x axis lables for the normal distribution curve and the columns show the real data points. We want to show the x axis lables from the line series not from the column series. Anything we can do to make the column series align properly on the x axis? We tried to use same ranges of the two x axises with different x points. It did not work.
I'm not sure I understand. The entire purpose of sharing an x axis is to have the same alignment for the series. Why don't you want to share the x axis? Are there a different number of points or something?
The category x axis aligns based on "categories" which are essentially string identifiers that you are providing. It does not automatically align, based on a hash join or anything like that. You can imagine the ideal scenario for series sharing an x axis as each series binding to a different column on a set of rows. If you want to share an x axis, then you also should have the same categories and in the same order for each series that you want to align.
You could achieve that, if you have different amounts of data for each series, but inserting the interpolated values where values are missing, or leaving gaps by inserting NaN. You can have the chart auto interpolate past missing values by setting unknownValuePlotting to linearInterpolate (which I believe is the default).
If you can't correlate the values onto the x axis, then maybe you are dealing with an x axis that is truly numeric? We unfortunately don't have a column series that would plot on a numeric x axis though. Only on category x or datetime category x.
-Graham
Its for a different charting product but the principle of this explanation is the same:
http://es.infragistics.com/community/forums/p/71286/366652.aspx#366652
Hope this helps!
You can alternatively trick the line series into aligning with the columns by putting a column series on its x axis, but to set the brush and outline to transparent. This will force the line series into a mode where it aligns with the hidden column series. But the issue is that the alignment would be flawed as the series would be aligning with the centers of the columns of the hidden column series which has a different number of columns than the visible column series. Your best way to approach this would be to get the column series and the line series onto the same x axis.