Vertical line on line graph (chm)

[LB]

I`m interested in adding a vertical line to my graph using
visualization, something similar to what`s in the first example of
this: http://code.google.com/apis/chart/styles.html#shape_markers

I have code and have added chm within the options section of the draw
command but no matter what I do I can`t seem to get a vertical line
drawn!

Here`s the code:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', '10th Percentile');
data.addColumn('number', '25th Percentile');
data.addColumn('number', '50th Percentile');
data.addColumn('number', '75th Percentile');
data.addColumn('number', '90th Percentile');
data.addRows(6);
data.setCell(0,1,322067);
data.setCell(1,1, 324259);
data.setCell(2,1, 326397);
data.setCell(3,1, 328625);
data.setCell(4,1, 330871);
data.setCell(5,1, 332915);
data.setCell(0,0,'2009-10');
data.setCell(1,0,'2009-11');
data.setCell(2,0,'2009-12');
data.setCell(3,0,'2010-01');
data.setCell(4,0,'2010-02');
data.setCell(5,0,'2010-03');
data.setCell(0,2,403781);
data.setCell(1,2, 406659);
data.setCell(2,2, 409465);
data.setCell(3,2, 412388);
data.setCell(4,2, 415333);
data.setCell(5,2, 418014);
data.setCell(0,3,497555);
data.setCell(1,3, 501346);
data.setCell(2,3, 505044);
data.setCell(3,3, 508897);
data.setCell(4,3, 512781);
data.setCell(5,3, 516316);
data.setCell(0,4,596634);
data.setCell(1,4, 600953);
data.setCell(2,4, 605162);
data.setCell(3,4, 609542);
data.setCell(4,4, 613954);
data.setCell(5,4, 617966);
data.setCell(0,5,755284);
data.setCell(1,5, 761057);
data.setCell(2,5, 766682);
data.setCell(3,5, 772535);
data.setCell(4,5, 778430);
data.setCell(5,5, 783789);


// Create and draw the visualization.
new google.visualization.ImageLineChart(document.getElementById
('visualization')).
draw(data, {
width: 600, height: 300,
title: 'Valuation',
chm: 'V,3399CC,0,2,1.0',
});
}

Can someone please help? Why doesn't chm do anything?

Thanks!

[Meera Bavadekar]

Hi LB,

Try using google.visualization.ImageChart, which is wrapper on Google
Chart API.
See following link for documentation.

http://code.google.com/apis/visualization/documentation/gallery/genericimagechart.html

You need to select option {cht: 'lc' } (chart type is line chart) to
draw line chart.
chm options works on this generic chart.

-Meera Bavadekar

[LB]

Thanks for your reply Meera.

I've done as you suggested, on a smaller example:

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();

data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows(3);
data.setCell(0, 0, 'A');
data.setCell(1, 0, 'B');
data.setCell(2, 0, 'C');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);

// Create and draw the visualization.

var options = {cht: 'lc', chm: 'V,000000,1,1,1', width:600, height:
300};
new google.visualization.LineChart(document.getElementById
('visualization')).
draw(data, options);
}

Unfortunately it still doesn't add a vertical line. Any other
suggestions?

[Meera Bavadekar]

You are still using LineChart in the code.
Options for LineChart are different them options for ImageChart. You
probably can not mix the two options.


Try passing appropriate color value too - 0000 will not work.
and use
new google.visualization.ImageChart.


Following code worked for me on the playground..


----------------------------------------------

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows(3);
data.setCell(0, 0, 'A');
data.setCell(1, 0, 'B');
data.setCell(2, 0, 'C');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);


// Create and draw the visualization.

var options = {cht: 'lc', chm: 'V,3399CC,0,1,1.0'};
chart = new google.visualization.ImageChart(document.getElementById
('visualization'));
chart.draw(data, options);

}

[LB]

Thanks Meera, works perfectly.