Combo chart - candlesticks are not aligned correctly.

[wishwami]

Hello Everyone,

 Apologies for the poor title. 

 Here is the problem description. - I am plotting a candlestick and a bar chart. It is a chart of price change as candles and bars as volume on vAxis and date as the hAxis.

 It seems that the candles are drawn in such a way that the right edge of candle aligns with the vertical grid line and the bars are drawn with their left edge aligned to the vertical grid line. This make the price and volume look as if they are plotted for different dates. I expected both the bars and candles to be centered at the vertical line for a given date.

  Note : If I change the second series from bars to line - the candles are plotted as expected i.e. centered. I have pasted the screen shots of both versions below.

 Your help with fixing the 'bars' version is greatly appreciated.

Here is the drawVisualization function for the chart. 

function drawVisualization() { 

var jstringfromWeb ={"cols":[{"id":"idate","label":"IDATE","type":"string"},{"id":"low","label":"LOW","type":"number"},{"id":"open","label":"OPEN","type":"number"},{"id":"close","label":"CLOSE","type":"number"},{"id":"high","label":"HIGH","type":"number"},{"id":"totqty","label":"TOTQTY","type":"number"}],"rows":[{"c":[{"v":"17\/10\/12"},{"v":261.0},{"v":265.0},{"v":264.9},{"v":267.7},{"v":7572668.0}]},{"c":[{"v":"18\/10\/12"},{"v":266.0},{"v":266.0},{"v":270.25},{"v":271.8},{"v":6627970.0}]},{"c":[{"v":"19\/10\/12"},{"v":266.55},{"v":270.0},{"v":269.0},{"v":273.4},{"v":3928926.0}]},{"c":[{"v":"22\/10\/12"},{"v":264.6},{"v":267.5},{"v":267.05},{"v":268.7},{"v":4470904.0}]},{"c":[{"v":"23\/10\/12"},{"v":263.1},{"v":266.0},{"v":264.6},{"v":267.15},{"v":3120635.0}]},{"c":[{"v":"25\/10\/12"},{"v":260.25},{"v":264.6},{"v":261.25},{"v":265.55},{"v":7531977.0}]},{"c":[{"v":"26\/10\/12"},{"v":259.1},{"v":260.4},{"v":261.5},{"v":264.2},{"v":3586484.0}]},{"c":[{"v":"29\/10\/12"},{"v":254.2},{"v":262.1},{"v":256.75},{"v":264.35},{"v":4690571.0}]},{"c":[{"v":"30\/10\/12"},{"v":245.0},{"v":257.15},{"v":247.65},{"v":257.75},{"v":9560952.0}]},{"c":[{"v":"31\/10\/12"},{"v":247.75},{"v":248.0},{"v":254.75},{"v":255.3},{"v":9122998.0}]},{"c":[{"v":"01\/11\/12"},{"v":257.0},{"v":257.0},{"v":267.45},{"v":269.55},{"v":1.0469697E7}]},{"c":[{"v":"02\/11\/12"},{"v":265.1},{"v":272.0},{"v":270.05},{"v":272.0},{"v":1.1070892E7}]},{"c":[{"v":"05\/11\/12"},{"v":266.55},{"v":270.0},{"v":269.8},{"v":274.7},{"v":7809272.0}]},{"c":[{"v":"06\/11\/12"},{"v":265.1},{"v":269.0},{"v":266.95},{"v":272.45},{"v":9567826.0}]},{"c":[{"v":"07\/11\/12"},{"v":266.55},{"v":266.8},{"v":269.35},{"v":273.35},{"v":9676685.0}]}]};

var data = new google.visualization.DataTable(jstringfromWeb);

 var options = {title : 'My Candlestick Chart' ,   hAxis: {title: "Date", slantedText : true}, seriesType: "candlesticks",

vAxes : {0: {minValue: 200, maxValue: 400 , title: "Price",viewWindowMode :"explicit",viewWindow: {min:220, max:280}}, 

        1: {maxValue :50000000, title :"Volume" }}, series: {1: {type: "line" , targetAxisIndex : 1}}}; 

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

 chart.draw(data, options);}

 google.setOnLoadCallback(drawVisualization);

Thanks for your help!

[asgallant]

Generically, there is no fix for this, but since your two series are targeting separate vAxes, you can cheat and set the "isStacked" option to true to fix the alignment.

[asgallant]

Example based on your code: http://jsfiddle.net/asgallant/fxF47/

[wishwami]

Thanks for the tip. Ir worked.