thanks
look, this is a draft, it needs some pruning
but I'm very close with CandleSticks
<html>
<head>
<style>
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
position: absolute;
}
.overlay-marker {
position: absolute;
}
.circle2 {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#ffff00;
border:1px solid #000000;
}
</style>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 66, 66, 77, 77],
['Fri', 66, 66, 22, 22]
// Treat the first row as data.
], true);
var options = {
legend: 'none', orientation: 'vertical',
bar: { groupWidth: '90%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 1, stroke: '#c0c0c0', fill:
'#F4655E' }, // red
risingColor: { strokeWidth: 1, stroke: '#c0c0c0', fill:
'#0f9d58' } // green
}
};
var chart = new
google.visualization.CandlestickChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready',
placeMarker.bind(chart, data));
chart.draw(data, options);
chart.draw(data, options);
}
function placeMarker(dataTable) {
var cli = this.getChartLayoutInterface();
var chartArea = cli.getChartAreaBoundingBox();
//document.querySelector('.overlay-marker').style.top =
Math.floor(cli.getYLocation(dataTable.getValue(3, 1)))+ "px";
document.querySelector('#overlay-marker0').style.top =
Math.floor(cli.getYLocation(0))-6+ "px";
document.querySelector('#overlay-marker0').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(0, 3)))-5+ "px";
//document.querySelector('#overlay-marker0>div').innerHTML=
dataTable.getValue(0, 3);
document.querySelector('#overlay-marker2').style.top =
Math.floor(cli.getYLocation(2))-6+ "px";
document.querySelector('#overlay-marker2').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(2, 3)))-5+ "px";
//document.querySelector('#overlay-marker2
.overlay-text').innerHTML= dataTable.getValue(2, 3);
document.querySelector('#overlay-marker3').style.top =
Math.floor(cli.getYLocation(3))-6+ "px";
document.querySelector('#overlay-marker3').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(3, 3)))-5+ "px";
document.querySelector('#overlay-text3').innerHTML=
dataTable.getValue(3, 3);
document.querySelector('#overlay-text3').style.top =
Math.floor(cli.getYLocation(3))-10+ "px";
document.querySelector('#overlay-text3').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(3, 3)))+10+ "px";
document.querySelector('#overlay-marker4').style.top =
Math.floor(cli.getYLocation(4))-6+ "px";
document.querySelector('#overlay-marker4').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(4, 3)))-5+ "px";
document.querySelector('#overlay-text4').innerHTML=
dataTable.getValue(4, 3);
if(dataTable.getValue(4, 3)<dataTable.getValue(4, 1)){
document.querySelector('#overlay-text4').style.top =
Math.floor(cli.getYLocation(4))-10+ "px";
document.querySelector('#overlay-text4').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(4, 3)))-30+ "px";
}else{
document.querySelector('#overlay-text4').style.top =
Math.floor(cli.getYLocation(4))-10+ "px";
document.querySelector('#overlay-text4').style.left =
Math.floor(cli.getXLocation(dataTable.getValue(4, 3)))-30+ "px";
}
};
</script>
</head>
<body>
<div class="chartWithMarkerOverlay">
<div id="chart_div" style=""></div>
<div class="overlay-marker" id="overlay-marker0"><div
class="circle"></div></div>
<div class="overlay-marker" id="overlay-marker2"><div
class="circle"></div></div>
<div class="overlay-marker" id="overlay-marker3"><div
class="circle2"></div></div>
<div class="overlay-marker" id="overlay-marker4"><div
class="circle2"></div></div>
<div class="overlay-text" id="overlay-text3"></div>
<div class="overlay-text" id="overlay-text4"></div>
</div>
</body>
</html>
bye
thanks
El lunes, 10 de agosto de 2015, 12:01:43 (UTC-3), charter escribió:
>
> Hi
> this is a wonderful API !
>
> I've rotated a CandleStick chart
> that is, the sticks are horizontal (with "orientation")
>
> the html container has no "height" neither "width" html settings
>
> the rows (sticks) are too much close
> I need them to be farther, more separated
>
> how could I control the row height
> or how can I specify a sort of "autosize" chart --not using HTML ?
>
> and, second question
> how can I include horizontal gridlines
> I set them but it seems candlestick charts doesn't accept them
>
>
> thanks
>
>
>
>
> <html>
> <head>
> <script type="text/javascript" src="https://www.google.com/jsapi
> "></script>
> <script type="text/javascript">
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(drawChart);
>
> function drawChart() {
>
> var options = {
> pointShape: 'star',
> legend:'none',
> hAxis:{ticks:[0,10,20,30,40,50,60,70,80,90,100],gridlines:{color:
> '#d0d0d0'}}, orientation: 'vertical'
> };
>
> var chart = new
> google.visualization.CandlestickChart(document.getElementById('chart_div'));
>
> var dataTable = new google.visualization.DataTable();
>
> dataTable.addColumn({ type: 'string', id: 'Perfil' });
> dataTable.addColumn({ type: 'number', id: 'Mín Depto' });
> dataTable.addColumn({ type: 'number', id: 'Mín Docente' });
> dataTable.addColumn({ type: 'number', id: 'Máx Docente' });
> dataTable.addColumn({ type: 'number', id: 'Máx Depto' });
> dataTable.addColumn({ type: 'string', role: 'tooltip' });
> dataTable.addRows([
> ['Formales', 20, 28, 38, 45, 'Formales'],
> ['Material', 31, 38, 55, 66, 'Material'],
> ['Planificación', 50, 55, 77, 80, 'Planificación'],
> ['Contenidos', 77, 50, 66, 50, 'Contenidos'],
> ['Práctica', 68, 46, 62, 15, 'Práctica'],
> ['test', 50, 40, 40, 90, 'test']
> ]);
>
> chart.draw(dataTable, options);
> }
> </script>
> </head>
> <body>
> <div id="chart_div" style="width: 900px; height: 500px;"></div>
> </body>
> </html>
>
>
>
>
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
