CODEWITHSUNDEEP
javascriptgoogle-visualization
William Tio Wee Leong
William Tio Wee Leong

Reputation: 473

Straight line down on line chart google chart?

Possible to make a line (dotted and straight) down from the dots in line chart google chart?

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2004', 1000],
        ['2005', 1170],
        ['2006', 660],
        ['2007', 1030]
    ]);

var options = {
    title: 'Company Performance',
    pointSize: 10
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

The concept is something like this... enter image description here

http://jsfiddle.net/TD92C/

Upvotes: 0

Views: 945

Answers (1)

asgallant
asgallant

Reputation: 26330

You can fake those lines by using a ComboChart and using a DataView to duplicate your data series. Set one series to the "line" type and the second to the "bar" type. Disable interactivity on the bars and remove that series from the chart legend. Use the bar.groupWidth option to narrow the bars drawn so that they resemble lines:

bar: {
    // use this to set the width of the vertical lines
    groupWidth: 2
},
series: {
    0: {
        // this is the line series
        type: 'line',
        pointSize: 10
    },
    1: {
        // this creates the vertical "lines" down from the points
        type: 'bars',
        color: '#666666',
        enableInteractivity: false,
        visibleInLegend: false
    }
}

See an example here http://jsfiddle.net/asgallant/TD92C/1/.

Upvotes: 2

Related Questions