OHLC Chart

gireesh

unread,

Jun 18, 2009, 5:50:32 AM6/18/09

to Google Visualization API

Hi,

Is there a plan to include visualization for a OHLC and Candle Stick
Chart ?
Can you point me to any resources that I can use to create a light
weight, responsive, interactive tool set to do the OHLC and Candle
Stick Chart ?

Thanks in advance

Regards
Gireesh

MC Get Vizzy

unread,

Jun 24, 2009, 2:49:03 AM6/24/09

to google-visua...@googlegroups.com

google.visualization.ImageChart can draw an OHLC chart.

documentation for the ImageChart can be found here:

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

this is based on the ChartServer chm=F parameter, which is documented here:

http://code.google.com/apis/chart/styles.html#financial_markers

here is a sample html file that draws an OHLC chart:

<!--

You are free to copy and use this sample.

License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

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

</script>

function drawVisualization() {

var options = {};

// In the Chart API, finance chart is considered a line chart

options.cht = 'lc';

// set the line colors to transparent

options.color = '#00000000';

// create a grid for the chart

options.chg = '25.0,25.0,4.0,4.0';

options.chm = 'F,,0,-1,20,0';

options.width = 400;

dataTable = new google.visualization.DataTable();

dataTable.addColumn('string');

dataTable.addColumn('number');

dataTable.addRows(8);

dataTable.setValue(0, 0, 'ABCD');

dataTable.setValue(1, 0, 'EFGH');

dataTable.setValue(2, 0, 'IJKL');

dataTable.setValue(3, 0, 'MNOP');

dataTable.setValue(4, 0, 'QRST');

dataTable.setValue(5, 0, 'UVWX');

dataTable.setValue(6, 0, 'YZAB');

dataTable.setValue(7, 0, 'CDEF');

dataTable.setValue(0, 1, 90);

dataTable.setValue(1, 1, 70);

dataTable.setValue(2, 1, 50);

dataTable.setValue(3, 1, 20);

dataTable.setValue(4, 1, 15);

dataTable.setValue(5, 1, 10);

dataTable.setValue(6, 1, 0);

dataTable.setValue(7, 1, 0);

dataTable.setValue(0, 2, 100);

dataTable.setValue(1, 2, 80);

dataTable.setValue(2, 2, 60);

dataTable.setValue(3, 2, 30);

dataTable.setValue(4, 2, 45);

dataTable.setValue(5, 2, 20);

dataTable.setValue(6, 2, 30);

dataTable.setValue(7, 2, 5);

dataTable.setValue(0, 3, 110);

dataTable.setValue(1, 3, 90);

dataTable.setValue(2, 3, 70);

dataTable.setValue(3, 3, 40);

dataTable.setValue(4, 3, 35);

dataTable.setValue(5, 3, 30);

dataTable.setValue(6, 3, 20);

dataTable.setValue(7, 3, 15);

dataTable.setValue(0, 4, 120);

dataTable.setValue(1, 4, 100);

dataTable.setValue(2, 4, 80);

dataTable.setValue(3, 4, 50);

dataTable.setValue(4, 4, 55);

dataTable.setValue(5, 4, 40);

dataTable.setValue(6, 4, 40);

dataTable.setValue(7, 4, 25);

var chart = new google.visualization.ImageChart(document.getElementById('visualization'));

chart.draw(dataTable, options);

}

google.setOnLoadCallback(drawVisualization);

</script>

</head>

</body>

</html>

gireesh

unread,

Jun 24, 2009, 8:49:58 AM6/24/09

to Google Visualization API

Thank you !

Warm Regards
Gireesh

On Jun 24, 7:49 am, MC Get Vizzy <getvi...@google.com> wrote:
> google.visualization.ImageChart can draw an OHLC chart.
> documentation for the ImageChart can be found here:
>

> http://code.google.com/apis/visualization/documentation/gallery/gener...
>
> <http://code.google.com/apis/visualization/documentation/gallery/gener...>this

> <gireesh.venkateswa...@gmail.com>wrote:

MC Get Vizzy

unread,

Jun 29, 2009, 3:48:51 PM6/29/09

to google-visua...@googlegroups.com

there is now a playground sample demonstrating this:

http://code.google.com/apis/ajax/playground/#candlestick_chart

Reply all

Reply to author

Forward