Hi Hernán, You should probably check out Intervals before rolling your own chart: https://developers.google.com/chart/interactive/docs/gallery/intervals
On Wed, Aug 12, 2015 at 1:38 PM, Hernán Castelo <[email protected]> wrote: > Hi, thanks Daniel > > I actually see that candlestick charts doesn't fulfill my requirements > I was trying to achieve a visualization such as: > > > [image: Imágenes integradas 1] > > where : > - the shadows bars are "ranges", meaning the mix and max *global* average > of a group of teachers/professors > - the yellow marks are *individual average* of a specific individual ( a > teacher/professor, in this case ) > > > I'm guessing I need to craft my own chart... > > Is there a way to do that with the existing chart set ? > > thanks > > > > > 2015-08-10 12:20 GMT-03:00 'Daniel LaLiberte' via Google Visualization API > <[email protected]>: > >> 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 a topic in the >> Google Groups "Google Visualization API" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/google-visualization-api/i19pxp0PiLo/unsubscribe >> . >> To unsubscribe from this group and all its topics, 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. >> > > > > -- > atte, > Hernán > > -- > 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.
