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":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.
