Hello everyone, *What am I trying to achieve - *I have a combo chart (candlestick, bar etc). I want to create a vertical line with behaviour similar to a crosshair i.e. it will move as the mouse moves over the chart. I would then like to select the column values for the given position and show them at the top of the chart.
*What have I done so far* - I have created the charts. I have written a handler for onmouseover event. I query the data table and in the mouseover handler and display it on top of the chart.I have added an extra column for annotation with empty string as the value for all rows in that column. I have specified the the column with annotation style as line in the options. *What is working and what is not* - The chart is generated correctly, the mouseover handler is called and the correct values are displayed at the top but the vertical line for annotation is not seen. *What else have I tried - *I have tried to follow two of asgallant's fiddles - example1 <http://jsfiddle.net/asgallant/tVCv9/12/> and example2 <http://jsfiddle.net/asgallant/xwrVV/4/>. I am not able to spot the piece of code which generate the vertical line in example1 although there is a specific comment about it. The second example uses CharWrapper class and setView method. I would like to avoid using the wrapper class as I already have many charts that are generated from Java code without using ChartWrapper. It will be a very tedious task to switch them all to use the wrapper. Please see my html page below. I have highlighted the lines I added for this purpose in yellow. Any help and suggestions are appreciated - Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Nifty</title> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> 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":"volume","label":"VOLUME","type":"number"},{"id":"DMA_5","label":"5 DMA","type":"number"}],"rows":[{"c":[{"v":"02\/06\/14"},{"v":7239.5},{"v":7264.05},{"v":7362.5},{"v":7368.6},{"v":1.69891181E8},{"v":7295.15}]},{"c":[{"v":"03\/06\/14"},{"v":7342.15},{"v":7375.35},{"v":7415.85},{"v":7424.95},{"v":2.34680218E8},{"v":7314.72}]},{"c":[{"v":"04\/06\/14"},{"v":7391.35},{"v":7417.55},{"v":7402.25},{"v":7433.3},{"v":2.04592241E8},{"v":7329.24}]},{"c":[{"v":"05\/06\/14"},{"v":7360.5},{"v":7399.75},{"v":7474.1},{"v":7484.7},{"v":2.50660653E8},{"v":7376.93}]},{"c":[{"v":"06\/06\/14"},{"v":7497.65},{"v":7521.5},{"v":7583.4},{"v":7592.7},{"v":2.48397596E8},{"v":7447.62}]}]}; var data = new google.visualization.DataTable(jstringfromWeb); var newColInd=data.addColumn({type : 'string', role : 'annotation'}); var numRows = data.getNumberOfRows() - 1; for(var i=0; i<numRows; i++) { data.setFormattedValue(i,newColInd,' '); } var options = {title : "Nifty 02/Jun/14 To 08/Jun/14",annotation: { newColInd: { style: 'line' } }, focusTarget: 'category', hAxis: {title: "Date", slantedText : true}, seriesType: "candlesticks", isStacked : true, backgroundColor : {fill :"ivory", stroke: "black"}, vAxes : {0: {title: "Price", viewWindowMode : "explicit", viewWindow : {min :6732 , max :7858}}, 1: {title :"Volume" , viewWindowMode : "explicit" , viewWindow :{min : 0, max : 2147483647 }, gridlines :{color : "transparent"}}}, series: {0 : {color : "black", candlestick : {risingColor :{ stroke: "green", fill:"green"} , fallingColor : {fill: "red", stroke : "red"}} ,visibleInLegend : false }, 1: {type: "bars" , color : "steelblue", targetAxisIndex : 1} , 2: {type: "line" , color : "black", lineWidth : 2, targetAxisIndex : 0}}}; var chart = new google.visualization.ComboChart(document.getElementById('chart_div0')); var runOnce = google.visualization.events.addListener(chart, 'ready', function() { google.visualization.events.removeListener(runOnce); google.visualization.events.addListener(chart, 'onmouseover', function(e) { if (e.row != null) { // populate our "tooltip" document.getElementById('date').innerHTML = data.getFormattedValue(e.row, 0); document.getElementById('value').innerHTML = data.getValue(e.row, 1); chart.draw(data, options); } }); }); chart.draw(data, options);} google.setOnLoadCallback(drawVisualization); </script> </head> <body> <div id="dataPoint"> Date: <span id="date">Jan 1, 2012</span><br /> Value: <span id="value">0</span> </div> <div id="chart_div0" style="width: 900px; height: 500px; border-style: solid; border-color: DarkRed;"></div> <div id="blank_div" style="width: 900px; height: 10px;"></div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
