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




What is Basic candlestick chart?

  • A candlestick chart is 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).
 basic candlestick chart

Learn google charts - google charts tutorial - basic candlestick chart - google charts examples - google charts programs

Configurations

  • · You have used CandlestickChart class to show candlestick based chart.

Syntax

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

Sample Code

Googlecharts-candlestick-basic.html

 Tryit
<html>
<head>
<title>Google Charts Tutorial - Wikitechy</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([
      ['Jan', 30, 38, 48, 55],
      ['Feb', 41, 48, 65, 76],
      ['Mar', 60, 65, 87, 90],
      ['Apr', 87, 87, 76, 60],
      ['May', 78, 76, 32, 25]
      // Treat first row as data as well.
    ], true);
    
 // Set chart options
   var options = {
      legend: 'none',
       bar: { groupWidth: '75%' }, // Remove space between bars.
      candlestick: {
         risingColor: { strokeWidth: 0, fill: '#ff3385' }, // pink
      }
   };

   // 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 - Basic Candlestick Chart

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.

×