[Charts] Google Charts - Column Chart

Google Charts - Column Chart

 

https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

 

Point 커스터마이징 : https://developers.google.com/chart/interactive/docs/points#fullhtml

 

 

 

- 우축 인덱스 영역은 legend

 

- 그래프 기준값을 0부터 보여주고 싶으면 minValue 를 이용하면 된다.

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------------------------------------

 

HTML

 

//-- <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','bar']}]}"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> //--

 

 

JAVASCRIPT

//-- google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); } //--

 

* 가로나 세로 인덱스에서 0 값으로 시작하고 싶으면 아래와 같이 지정. (minValue) 

//-- function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'], ['2003', 0, 0, 0, 0, 0, 0], ['2004', 0, 0, 0, 0, 0, 0], ['2005', 0, 0, 0, 0, 0, 0], ['2006', 0, 0, 0, 0, 0, 0], ['2007', 0, 0, 0, 0, 0, 0], ['2008', 0, 0, 0, 0, 0, 0] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, hAxis: {title: "Year"}, vAxis:{minValue:0, viewWindow: {min : 0 ;}} } ); } //--

 //-- 라인그래프의 옵션 변경 예시 var options = { title: ' ' , curveType: 'function' , colors :['red' ] , legend: { position: 'none' } , vAxism:{ minValue:"-1.5" } //, dataOpacity:{opacity: 1,color: 'blue' } //, crosshair: { focused: { color: '#3bc', opacity: 0.8 } } , pointSize: 15 , pointShape: 'circle' //, series: { 0: { pointShape: 'circle', color : "blue" } } }; //--

 

 

화면 사이즈 변경시 화면에 맞게 Redraw //-- function resize () { var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } window.onload = resize(); window.onresize = resize; //--

 

 

 

 

 

Visualization: Column Chart

1. Overview
2. A simple example
3. Coloring columns
4. Column styles
5. Labeling columns
6. Stacked column charts
7. Creating Material column charts
8. Dual-Y charts
9. Loading
10. Data format
11. Configuration options
12. Methods
13. Events
14. Data policy