Glad you like the Google Charts API. The code you included does specify the container element width and height, and it seems to work fine then. If you don't specify the height and width, a default will be assumed that may or may not work out for your actual chart, so you will have to override either the container height and width, or use the height and width options. See the example based on your code at: https://jsfiddle.net/dlaliberte/qtgq547o/
The horizontal gridlines would be controlled by the vertical axis, since the values for each gridline are specified by the vertical axis. But since your domain values are discrete strings, no gridlines are drawn at all (yet). If you want gridlines but string labels, you could specify numeric values in your datatable and ticks option as shown in this example: https://jsfiddle.net/dlaliberte/qtgq547o/3/ The vAxis options look like this: vAxis: { direction: -1, ticks: [{v: 0, f: 'Formales'}, {v: 2, f: 'Planificación'}, {v: 4, f: 'Práctica'}] } On Mon, Aug 10, 2015 at 11:01 AM, charter <[email protected]> wrote: > 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. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- 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.
