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).
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>