100 lines
3.3 KiB
HTML
100 lines
3.3 KiB
HTML
|
<script type="text/javascript">
|
||
|
|
google.load("visualization", "1", {
|
||
|
|
packages:["corechart"]
|
||
|
|
});
|
||
|
|
google.setOnLoadCallback(drawChart);
|
||
|
|
function drawChart() {
|
||
|
|
|
||
|
|
var usersData = google.visualization.arrayToDataTable([
|
||
|
|
['Date', 'Signups']
|
||
|
|
{$foo=1}
|
||
|
|
{while $foo < 14}
|
||
|
|
{$foo=$foo+1}
|
||
|
|
{$signup=10|mt_rand:20}
|
||
|
|
,['{$foo}',{$signup}]
|
||
|
|
{/while}
|
||
|
|
]);
|
||
|
|
|
||
|
|
var videosData = google.visualization.arrayToDataTable([
|
||
|
|
['Date', 'Signups']
|
||
|
|
{$foo=1}
|
||
|
|
{while $foo < 14}
|
||
|
|
{$foo=$foo+1}
|
||
|
|
{$signup=10|mt_rand:20}
|
||
|
|
,['{$foo}',{$signup}]
|
||
|
|
{/while}
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
var photosData = google.visualization.arrayToDataTable([
|
||
|
|
['Date', 'Signups']
|
||
|
|
{$foo=1}
|
||
|
|
{while $foo < 14}
|
||
|
|
{$foo=$foo+1}
|
||
|
|
{$signup=10|mt_rand:20}
|
||
|
|
,['{$foo}',{$signup}]
|
||
|
|
{/while}
|
||
|
|
]);
|
||
|
|
|
||
|
|
var groupsData = google.visualization.arrayToDataTable([
|
||
|
|
['Date', 'Signups']
|
||
|
|
{$foo=1}
|
||
|
|
{while $foo < 14}
|
||
|
|
{$foo=$foo+1}
|
||
|
|
{$signup=10|mt_rand:20}
|
||
|
|
,['{$foo}',{$signup}]
|
||
|
|
{/while}
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
var options = {
|
||
|
|
backgroundColor : '#f5f5f5',
|
||
|
|
seriesType: "bars",
|
||
|
|
width : 480,
|
||
|
|
series: { 1: { type: "line" } },
|
||
|
|
chartArea:{ left:30,top:30,width:"90%",height:"70%" },
|
||
|
|
legend: { position: 'none'},
|
||
|
|
hAxis : { textStyle : { fontSize : 0 } },
|
||
|
|
bar : { groupWidth:'98%' }
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var userChart = new google.visualization.ComboChart(document.getElementById('usersData'));
|
||
|
|
userChart.draw(usersData, options);
|
||
|
|
|
||
|
|
var videoChart = new google.visualization.ComboChart(document.getElementById('videosData'));
|
||
|
|
videoChart.draw(videosData, options);
|
||
|
|
|
||
|
|
|
||
|
|
var photoChart = new google.visualization.ComboChart(document.getElementById('photosData'));
|
||
|
|
photoChart.draw(photosData, options);
|
||
|
|
|
||
|
|
|
||
|
|
var groupChart = new google.visualization.ComboChart(document.getElementById('groupsData'));
|
||
|
|
groupChart.draw(groupsData, options);
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="nav nav-tabs">
|
||
|
|
<li class="active"><a href="#users-chart" data-toggle="tab" ><i class="icon-user"></i></a></li>
|
||
|
|
<li><a href="#videos-chart" data-toggle="tab"><i class="icon-film"></i></a></li>
|
||
|
|
<li><a href="#photos-chart" data-toggle="tab"><i class="icon-picture"></i></a></li>
|
||
|
|
<li><a href="#groups-chart" data-toggle="tab"><i class="icon-groups icon-v3"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tab-content" style="overflow:hidden">
|
||
|
|
<div class="tab-pane active" id="users-chart">
|
||
|
|
<div id="usersData" ></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="videos-chart">
|
||
|
|
<div id="videosData"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="photos-chart">
|
||
|
|
<div id="photosData" ></div>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="groups-chart">
|
||
|
|
<div id="groupsData"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|