Display a vertical line that will move with the mouse

wishwami

unread,

Jul 6, 2014, 4:51:08 AM7/6/14

to google-visua...@googlegroups.com

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 and example2. 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">

<head>

<title>Nifty</title>

google.load('visualization', '1', {packages: ['corechart']});

</script>

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>

Date: <span id="date">Jan 1, 2012</span><br />

Value: <span id="value">0</span>

</div>

</body>

</html>

Andrew Gallant

unread,

Jul 6, 2014, 3:49:02 PM7/6/14

to google-visua...@googlegroups.com

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.

Wishwamitra

unread,

Jul 7, 2014, 1:56:32 PM7/7/14

to google-visua...@googlegroups.com

Thanks a lot for you response. I have tried to follow the example1 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">

<head>

<title>Nifty</title>

google.load('visualization', '1', {packages: ['corechart']});

</script>

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>

</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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Andrew Gallant

unread,

Jul 7, 2014, 10:10:14 PM7/7/14

to google-visua...@googlegroups.com

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/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Wishwamitra

unread,

Jul 8, 2014, 4:27:21 AM7/8/14

to google-visua...@googlegroups.com

Thanks, that was very helpful. Now that I can draw the annotation line, I will be able to move it.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward