candlestick heights

charter

unread,

Aug 10, 2015, 11:01:43 AM8/10/15

to Google Visualization API

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>

Auto Generated Inline Image 1

Daniel LaLiberte

unread,

Aug 10, 2015, 11:21:25 AM8/10/15

to Google Visualization API

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'}]

}

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Hernán Castelo

unread,

Aug 12, 2015, 1:38:35 PM8/12/15

to google-visua...@googlegroups.com

Hi, thanks Daniel

I actually see that candlestick charts doesn't fulfill my requirements

I was trying to achieve a visualization such as:

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

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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

Daniel LaLiberte

unread,

Aug 12, 2015, 1:48:00 PM8/12/15

to Google Visualization API

Hi Hernán,

You should probably check out Intervals before rolling your own chart: https://developers.google.com/chart/interactive/docs/gallery/intervals

charter

unread,

Aug 14, 2015, 4:55:08 PM8/14/15

to Google Visualization API

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>

        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

Auto Generated Inline Image 1

Hernan Desio

unread,

Jul 29, 2016, 9:40:29 AM7/29/16

to Google Visualization API

Charter

Just a comment. Given your description of what you are trying to plot, shouldn't the yellow dots be always within the bars (how can someone be beyond the max?).

Reply all

Reply to author

Forward