Thanks, that was very helpful. Now that I can draw the annotation line, I will be able to move it.
On Tue, Jul 8, 2014 at 7:40 AM, Andrew Gallant <[email protected]> wrote: > To get vertical lines, you have to annotate the domain column, which means > that your annotation column has to be column index 1. Use the > #insertColumn method to add the new column at the required index: > > var newColInd = 1; > data.insertColumn(newColInd, {type : 'string', role : 'annotation'}); > > see it working here: http://jsfiddle.net/asgallant/kcVqX/ > > > On Monday, July 7, 2014 1:56:32 PM UTC-4, wishwami wrote: > >> Thanks a lot for you response. I have tried to follow the example1 >> <http://jsfiddle.net/asgallant/tVCv9/12/> but I am not able to reproduce >> the effect on my chart as cli.getBoundingBox('hAxis#0#gridline') always >> returns a null. >> Now I am trying to start over with the simplest use case. I have created >> the chart, added annotation column with empty string as values and set the >> annotation style to line. I expected to see a vertical line when I selected >> a chart element. Is this correct? It would be great if you can give me some >> pointers about default behaviour of annotation with line as style . >> >> Thanks >> Here is the html. >> >> <!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 annotationOption = {};* >> >> annotationOption[newColInd] = {style: 'line'}; >> >> var options = {title : "Nifty 02/Jun/14 To 08/Jun/14", >> >> *annotation: annotationOption ,* >> >> * 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')); >> >> chart.draw(data, options);} >> >> google.setOnLoadCallback(drawVisualization); >> >> </script> >> >> </head> >> >> <body> >> >> <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> >> >> >> On Mon, Jul 7, 2014 at 1:19 AM, Andrew Gallant <[email protected]> >> wrote: >> >>> First, this won't work: >>> >>> annotation: { >>> newColInd: { >>> style: 'line' >>> } >>> } >>> >>> That creates a object with a key "newColInd", when you want the key to >>> be the value of the variable "newColInd". Try this: >>> >>> var annotaionOption = {}; >>> annotaionOption[newColInd] = {style: 'line'}; >>> >>> and then set the annotation option to this object: >>> >>> var options = { >>> title : "Nifty 02/Jun/14 To 08/Jun/14", >>> annotation: annotationOption, >>> //... >>> }; >>> >>> The "mouseover" event will only fire when a chart element is moused >>> over, so it won't do what you want; you have to use a "mousemove" event >>> handler like I did in the example. >>> >>> >>> >>> On Sunday, July 6, 2014 4:51:08 AM UTC-4, wishwami wrote: >>>> >>>> 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":73 >>>> 62.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 a topic in the >>> Google Groups "Google Visualization API" group. >>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>> topic/google-visualization-api/GX65jUBcZgY/unsubscribe. >>> To unsubscribe from this group and all its topics, 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. >>> >> >> -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/GX65jUBcZgY/unsubscribe > . > To unsubscribe from this group and all its topics, 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. > -- 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.
