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.