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 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). We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.
Configurations
We've used CandlestickChart class to show candlestick based chart.
//candlestick chart var chart = new google.visualization.CandlestickChart (document.getElementById('container'));
Example
googlecharts_candlestick_basic.htm
<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>
Result
Verify the result.
'WEB' 카테고리의 다른 글
[PHP] number with comma (0) | 2018.02.05 |
---|---|
[Google Chart] Candle Stick (0) | 2018.01.30 |
[Google Chart] Candle Stick (0) | 2018.01.29 |
[PHP] addslashes (0) | 2018.01.24 |
자바스크립트(Javascript) 소수점 자리수, 올림, 버림, 반올림, 원단위 절사 (0) | 2018.01.24 |