Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
435
Columns not in the correct positions on x axis.
posted

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>

 

 

 

 

 

Parents Reply Children