Add vertical line for current year in google visualization

Question

I need to add one vertical line in current year (x axis)

Configuration Options in my code follows.

var options = {
        title: '*****',
        curveType: 'function',
        height: 300,
        legend: { position: 'bottom' },
        chartArea: {width: '80%'},
        pointSize:5,
        width: 500,
        annotation: {
            1: {
                style: 'line'
            }
        }
    }

Please note I have used annotation for this, but problem is a bit line alone visible. I need a line for full height .

My Full Code :

var options = {
        title: 'Chart',
        curveType: 'function',
        height: 300,
        legend: { position: 'bottom' },
        chartArea: {width: '80%'},
        pointSize:5,
        annotation: { height: 300 }
    }, 

chartData = JSON.parse(window._data.chartData), chartPoint = new Array(), i = 0, j = 0;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Google');
    data.addColumn('number', 'Yahoo');
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn('number', 'Value');
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn({type: 'string', role: 'annotation'});
    if(Object.keys(chartData.myMap).length > 0) {
        $.each(chartData.myMap, function(k, v) {
            var val = Math.round(v * 100) / 100;
            chartPoint[i] = new Array();
            var cDate = new Date();
            if(cDate.getFullYear()==k)
            chartPoint[i] = [k, val, null, false, null, false,k];
            else
            chartPoint[i] = [k, val, null, false, null, false,null];
            i++;
        });
        i--;
    }
    if(Object.keys(chartData.myDataMap).length > 0) {
        $.each(chartData.myDataMap, function(k, v) {
            var val = Math.round(v * 100) / 100;
            var val1 = Math.round(chartData.averageMap[k] * 100) / 100;
            if(j==0) {var l = val; j++; } else l = null;
            chartPoint[i] = new Array();
            chartPoint[i] = [k,l,val,false,val1, false, null];
            i++;
        });
    }
    data.addRows(chartPoint);
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

It should be like in this page [http://jsfiddle.net/NC37X/][3]

Answer 1

I have three forks from your fiddle that might be along the lines of what you are looking for:

data.addRow(["G", ' ', 'Foo annotation', 8, 1, 0.5]);

http://jsfiddle.net/Balrog30/W2JWa/1/ - Using annotations, but just placing a space makes nothing print, but still draws a line.

---

        annotations: {
            style: 'line',
            textStyle: {
                opacity: 0
            }
        }

http://jsfiddle.net/Balrog30/W2JWa/2/ - Text is still in annotation, but text opacity set to 0 so that text is totally transparent.

---

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

function drawVisualization() {
    // example copied from Google Visualization API playground,
    // modified for category axis annotations

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'annotationText'});
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    data.addColumn('number', 'Blanket 2');
    data.addRow([{v: 0, f:"A"}, null, null, 1, 1, 0.5]);
    data.addRow([{v: 1, f:"B"}, null, null, 2, 0.5, 1]);
    data.addRow([{v: 2, f:"C"}, null, null, 4, 1, 0.5]);
    data.addRow([{v: 3, f:"D"}, null, null, 8, 0.5, 1]);
    data.addRow([{v: 4, f:"E"}, null, null, 7, 1, 0.5]);
    data.addRow([{v: 5, f:"F"}, null, null, 7, 0.5, 1]);
    data.addRow([{v: 6, f:"G"}, null, null, 8, 1, 0.5]);
    data.addRow([{v: 7, f:"H"}, null, null, 4, 0.5, 1]);
    data.addRow([{v: 8, f:"I"}, null, null, 2, 1, 0.5]);
    data.addRow([{v: 9, f:"J"}, null, null, 3.5, 0.5, 1]);
    data.addRow([{v: 10, f:"K"}, null, null, 3, 1, 0.5]);
    data.addRow([{v: 11, f:"L"}, null, null, 3.5, 0.5, 1]);
    data.addRow([{v: 12, f:"M"}, null, null, 1, 1, 0.5]);
    data.addRow([{v: 13, f:"N"}, null, null, 1, 0.5, 1]);

    // Create and draw the visualization.
    new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        curveType: 'function',
        width: 500,
        hAxis: {
            ticks: [{v:6, f:"G"}, {v:10, f:"K"}]
        },
        height: 400,
        vAxis: {
            maxValue: 10
        },
        annotations: {
            style: 'line'
        }
    });
}

http://jsfiddle.net/Balrog30/W2JWa/3/ - The third one changes the horizontal axis to a continuous type axis so that I can add ticks. This only works if your x-axis is numberic or date/time in nature. This also kind of messes up your axis labeling because the labeling is tied to the ticks, but I'm not really sure what you're trying to display, so it may or may not matter to you.