Google Charts - Basic Candlestick Chart - Adglob Infosystem Pvt Ltd

Following is an example of a basic candlestick chart. A candlestick chart is generally used to show an opening and closing value which are overlaid on top of the total variance. Candlestick charts are often used to show stocks value behavior. In this chart, filled boxes are drawn for items where the opening value is less than the closing value (again) and, and hollow boxes are drawn where the opening value of the item is more than the closing value (a loss). We’ve already seen the configuration used to draw this chart in the Google Charts Configuration Syntax chapter. So, let’s see the complete example.

Configurations

We’ve used CandlestickChart class to show the candlestick-based chart.

//candlestick chart

var chart = new google.visualization.CandlestickChart

(document.getElementById('container'));

Example

googlecharts_candlestick_basic.htm

<html>

   <head>

      <title>Google Charts </title>

      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">

      </script>

      <script type = "text/javascript">

         google.charts.load('current', {packages: ['corechart']});

      </script>

   </head>

   <body>

      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">

      </div>

      <script language = "JavaScript">

         function drawChart() {

            // Define the chart to be drawn.

            var data = google.visualization.arrayToDataTable([

               ['Mon', 20, 28, 38, 45],

               ['Tue', 31, 38, 55, 66],

               ['Wed', 50, 55, 77, 80],

               ['Thu', 77, 77, 66, 50],

               ['Fri', 68, 66, 22, 15]

               // Treat first row as data as well.

            ], true);

            // Set chart options

            var options = {legend: 'none'};

            // Instantiate and draw the chart.

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

            chart.draw(data, options);

         google.charts.setOnLoadCallback(drawChart);

      </script>

   </body>

</html>

Result

Verify the result.