Skip to content

Instantly share code, notes, and snippets.

@nttuyen

nttuyen/1_column_chart

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nttuyen/b965ee1b696f28860c89 to your computer and use it in GitHub Desktop.
Save nttuyen/b965ee1b696f28860c89 to your computer and use it in GitHub Desktop.
Download ZIP
Google chart
Raw
1_column_chart
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.arrayToDataTable([
['Tháng', 'Lượt người', { role: 'annotation' }],
['Tháng 1', 158734, '158.734'],
['Tháng 2', 238265, '238.265'],
['Tháng 3', 190476, '190.476'],
['Tháng 4', 216659, '216.659'],
['Tháng 5', 194018, '194.018'],
['Tháng 6', 136726, '136.726'],
['Tháng 7', 123442, '123.442'],
['Tháng 8', 135170, '135.170']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
// Set chart options
var options = {
title: 'Lượng khách Trung Quốc đến Việt Nam 8 tháng đầu năm 2014',
seriesType: 'bars',
series: {
0: {
type: 'bars',
targetAxisIndex: 0
},
1: {
type: 'line',
targetAxisIndex: 1,
color: 'blue',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
isStacked: false,
titleTextStyle: {
fontSize: 16,
fontName: 'Time news roman'
},
hAxis: {title: 'Đơn vị: lượt người'},
vAxes: {
0: {
//minValue: 0,
//maxValue: 5000,
textPosition: 'none'
},
1: {
//minValue: 0,
//maxValue: 30,
textPosition: 'none'
}
},
legend: { position: "none" },
width:1000,
height:400
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Raw
2_colum_chart
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.arrayToDataTable([
['Tháng', 'Chiếc', { role: 'annotation' }, 'Giá trị (triệu USD)', { role: 'annotation' }],
['Tháng 1', 1907, 1.907, 22.8, '22,8'],
['Tháng 2', 1578, 1.578, 20.5, '20,5'],
['Tháng 3', 1813, 1.813, 17, '17'],
['Tháng 4', 1677, 1.677, 22.4, '22,4'],
['Tháng 5', 5264, 5.264, 30.2, '30,2'],
['Tháng 6', 4269, 4.269, 26.1, '26,1'],
['Tháng 7', 2472, 2.472, 30.8, '30,8'],
['Kỳ 1 tháng 8', 1193, 1193, 15.1, '15,1']
]);
// Set chart options
var options = {
title: 'Lượng xe hơi Việt Nam nhập khẩu từ 1/1 - 15/8/2014',
seriesType: 'bars',
series: {
0: {
targetAxisIndex: 0
//color: '#0000cc'
},
1: {
type: "bar",
targetAxisIndex: 1
//color: '#0000ff'
}
},
titleTextStyle: {
fontSize: 20,
fontName: 'Time news roman'
},
//hAxis: {title: 'Tháng'},
vAxes: {
0: {
minValue: 0,
maxValue: 5000
},
1: {
minValue: 0,
maxValue: 30
}
},
legend: { position: "top" },
width:1000,
height:400
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Raw
Google Chart
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.arrayToDataTable([
['Tháng', 'Chiếc', { role: 'annotation' }, 'other', { role: 'annotation' }],
['Tháng 1', 3124, 3124, 111, 111],
['Tháng 2', 2960, 2960, 222, 222],
['Tháng 3', 4361, 4361, 333, 333],
['Tháng 4', 4411, 4411, 444, 444],
['Tháng 5', 4687, 4687, 555, 555],
['Tháng 6', 5621, 5621, 666, 666],
['Tháng 7', 6079, 6079, 777, 777],
['Kỳ 1 tháng 8', 2703, 2703, 888, 888]
]);
// Set chart options
var options = {'title':'Biểu đồ nhập khẩu ô tô nguyên chiếc',
'width':400,
'height':300};
var options = {
seriesType: 'bars',
series: {1: {type: "line"}},
title: 'Biểu đồ nhập khẩu ô tô nguyên chiếc',
titleTextStyle: {
fontSize: 16
},
//hAxis: {title: 'Tháng'},
vAxis: {
minValue: 0,
maxValue: 7000
},
legend: { position: "none" },
width:1000,
height:400
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment