Google Charts - Google Charts tutorial - Candlestick Charts - chart js - google graphs - google charts examples




What is Candle Stick Charts?

  • A candlestick chart is mostly used to show an opening and closing value which are overlaid on top of a 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 (a gain) and , and hollow boxes are drawn where the opening value of item is more than the closing value (a loss).
 candlestick chart graph in google charts

Learn - tutorial - candlestick chart graph in google charts - examples - programs

In this section we're going to discuss following types of candlestick charts.

S. No. Chart Type / Description
1Basic Candlestick

Basic Candlestick chart

2Candlestick with customized colors

Customized Candlestick Chart

Configurations

We have used CandlestickChart class to show candlestick based chart.

//candlestick chart
var chart = new google.visualization.CandlestickChart(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Following is an example of a candlestick chart.

Example

 Tryit<html>
<head>
<title>Google Charts Tutorial</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>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output :


Related Searches to Google Charts - Candlestick Charts

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×