VBA HTML

< !DOCTYPE HTML>
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< meta http-equiv="content-language" content="ja" />
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">< /script>

< /head>
< body onload="fload()">< !-- onclick="gauge1()"-->



< !--------------------------section1--------------------------------->
< section class="section js-section" data-section-name="section1">
< div class="section-content" id="p1">



< div style="width:50vw;height:600px;float:left;vertical-align: top;">
< p style="font-size:20px;text-align:center">BBBBBBBBBB< /p>
< div id="bar1_div">< /div>
< hr width="70%">
< /div>

< div style="top:120px;height: 500px;">
< canvas id="myChart" width="300px" height="400px">< /canvas>
< /div>





< /div>
< /section>< !--box-->
< !--------------------------section1--------------------------------->



< !--------------------------section2--------------------------------->
< section class="section js-section" data-section-name="section2">
< div class="section-content">



< hr width="70%">
< br>< br>

< div id="donutchart" style="width: 1000px; height: 400px;float:left;">< /div>

< div>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< /div>


< /div>
< /section>< !--box-->
< !--------------------------section2--------------------------------->



< !--------------------------section3--------------------------------->
< section class="section js-section" data-section-name="section3">
< div class="section-content">



< div id="control_div" style="clear:both;width:100%;height:102vw;">

< div id="filter_div"style="width:90%;float:left">< /div>
< br>< button onclick="data(1)">week< /button>< button onclick="data(2)">days< /button>
< div id="id_table" style="width:100%;clear: both;">< /div>
< /div>


< /div>
< /section>
< !--------------------------section3--------------------------------->

< !--------------------------section1---------------------------------
< section class="section js-section" data-section-name="section1">
< div class="section-content" id="p1">



< div style="width:50vw;padding-top: 100px;margin-left:50px;height:600px">
< p style="font-size:20px;text-align:center">AAAAAAAAAAAAAA< /p>
< hr width="70%">
< /div>

< div style="position: absolute;top:120px;right:20px; width: 500px; height: 500px;">
< table width="100%">
< tr>< td>< p>CPH< /p>< /td>< /tr>
< tr>< td>< div id="gct_sample_gauge">< /div>< /td>< /tr>
< /table>
< /div>





< /div>
< /section>< !--box-->
--------------------------section1--------------------------------->

< script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">< /script>
< script type="text/javascript" src="Data.js">< /script>



< script type="text/javascript">

AAA[1].forEach(function (value, index) {
AAA[1][index].splice(7)
});
AAA[2].forEach(function (value, index) {
AAA[2][index].splice(2,5)
});




var n=1
function data(num){n=num;fload()}


var datasource={1:[['名前', '年齢'], ['Michael' , 0],['Elisa', 0],['Robert', 0],['John', 0],['Jessica',0], ['Aaron', 0]],
2:[['名前', '年齢'], ['Michael' , 12],['Elisa', 20],['Robert', 7],['John', 54],['Jessica', 22], ['Aaron', 3]],
4:[['label','AAA'],['AAA',0]],
5:[['label','AAA'],['AAA',55]]
};


//*****************google.charts.load*********************
google.charts.load('current',{packages: ['controls','corechart','gauge','table','bar']});

//*****************google.charts.setOnLoad****************
google.charts.setOnLoadCallback(fload())

function fload(){
//alert(1)
dataload()
//gauge1()
drawChart()
bar1Chart()
control()
//setTimeout(gauge1(),1500)
changeParentHeight()
};


//*****************dataのimport*****************
function dataload() {
datatbl = google.visualization.arrayToDataTable(AAA[n]);
data3 = google.visualization.arrayToDataTable(datasource[1]);
data4 = google.visualization.arrayToDataTable(datasource[2]);

};

//******************TableとFilter****************
function control(){

stringFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {'filterColumnIndex': 1,
'ui': { 'labelStacking': 'vertical',
'label': 'Gender Selection:',
'allowTyping': false,
'allowMultiple': true }
},
});


// (Table)
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'id_table'
});

//'width':'70%',
//'allowHtml':'true',

var options = {'showRowNumber': true, 'allowHtml': true};

var dashboard = new google.visualization.Dashboard(document.getElementById('control_div'))
dashboard.bind(stringFilter,table).draw( datatbl,options);
};

// tableの要素を取得
var elm = document.getElementById("id_table");
// windowサイズに合わせてサイズを変更する関数
function changeParentHeight(){

document.getElementById("id_table").style.height =window.innerHeight-150+ "px";
}

// tableの高さを変更するイベント
//changeParentHeight()

//ウィンドウサイズ変更が完了した時点で処理を行う
var timer = 0;
window.onresize = function () {
if (timer > 0) {
clearTimeout(timer);
}
timer = setTimeout(function () {
changeParentHeight()
}, 100)
};




//*******************Gauge*************************
function gauge1() {


var options = {
animation: {
duration: 1500,
easing: 'linear',
startup: true

},
//backgroundColor:{fill:'#666'},
greenColor:'#1050bc',
greenFrom:85,greenTo:100,
redColor:'#c8524f',
redFrom: 0, redTo: 20, // 赤の範囲
yellowColor:'#dc8e3d',
yellowFrom: 20, yellowTo: 50, // 黄色の範囲
minorTicks: 20, // 小目盛りの単位 (デフォルトは 2)
// min:
max: 70,
majorTicks: ['0','10','20','30','40','50','60','70']
};

var chart = new google.visualization.Gauge(
document.getElementById('gct_sample_gauge'));

chart.draw(data3, options);
chart.draw(data4, options);

// var chart2 = new google.visualization.Gauge(
// document.getElementById('topgauge'));
/// chart2.draw(topdata1, options);
// chart2.draw(topdata2, options);


// setInterval(function() {
// data4.setValue(Math.round(6* Math.random()), 1, Math.round(100* Math.random()));
// randomload()
// }, Math.round(7000*Math.random()+10000));
// setInterval(function() {
// data4.setValue(Math.round(6* Math.random()), 1, Math.round(100* Math.random()));
// randomload()
// }, Math.round(10000*Math.random()+5000));

// function randomload(){
//chart.draw(data4, options);
// setTimeout(function() {
// dataload()
// chart.draw(data4, options);
// },500)
//alert(Math.round(6* Math.random()))
// };

};
//setInterval(gauge1,15000);


//***********DonutChart*******************
function drawChart() {
var data5 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

var options = {
title: 'My Daily Activities',
pieHole: 0.4,
legend:{
textStyle:{fontSize:20}
},
colors:['#3d4557','#c8524f','#d6731e','#dc8e3d','#e5d8c2'],
animation: {
duration: 1500,
easing: 'linear',
startup: true},
};

var chart2 = new google.visualization.PieChart(document.getElementById('donutchart'));
chart2.draw(data5, options);
};



function bar1Chart() {
var bardata1 = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
]);
var bardata0 = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 0, 0],
['Los Angeles, CA', 0, 0],
['Chicago, IL', 0, 0],
['Houston, TX', 0, 0],
['Philadelphia, PA', 0, 0]
]);

var options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '70%'},
hAxis: {
title: 'Total Population',
minValue: 0,
maxValue: 8175000
},
vAxis: {
title: 'City'
},
animation: {
duration: 1500,
easing: 'linear',
startup: true}
};

var chart = new google.visualization.BarChart(document.getElementById('bar1_div'));
chart.draw(bardata0, options);
chart.draw(bardata1, options);
}




var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: [10, 20, 30],

// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
],
options: options
});

< /script>


< style>
#gct_sample_gauge text {
fill:black;
}
#gct_sample_gauge circle[r="10"] {r: 0;}
#gct_sample_gauge circle[fill="#cccccc"] {
/*fill:#333333;*/
fill:black;
}

#gct_sample_gauge circle[stroke-width="2"] {
stroke-width:0;
fill:#ffffff;
}

#gct_sample_gauge text[font-size="10"] {
font-size: 80%;
}



.google-visualization-table-tr-head{background-color:black;color:white;height:40px;}
.google-visualization-table-table tr{height:40px;}
.google-visualization-table-table {width:100%;text-align:center;}
.google-visualization-table-table tr{}
.google-visualization-table {width: 100%;}

body {
background-color: #ffffff;
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
/* margin: 0;*/
/* height:2500px;*/
/* padding-top: 64px; */
margin-right: auto;
　　　　 margin-left : auto;
}




#gct_sample_gauge tr{
height: 200px;
border: 1px solid #ccc;
}




// ===========================
// section
// ------------------------------
.section {
width: 100%;

}
.section-content {
max-width: 1500px;
margin: 0 auto;
padding: 40px 60px;

}




< /style>


< div class="pointer">
< button onclick="move1('#section1')">▲< /button>
< button onclick="move1('#section2')">■< /button>
< button onclick="move1('#section3')">▼< /button>
< /div>
< div id="pointer">
< ul>
< li>< a href="#" onclick="move1('#section1')">T< br>O< br>P< /a>< /li>
< li>< a href="#" onclick="move1('#section2')">A< br>B< br>O< br>U< br>T< /a>< /li>
< li>< a href="#" onclick="move1('#section3')">D< br>I< br>A< br>R< br>Y< /a>< /li>

< /ul>
< /div>
< style>

#pointer{
position: fixed;
top:0px;
right:20px;
height:95%;
width:13px;

}
#pointer ul{
height:95%;
margin: 0;
padding: 0;
list-style-type: none;

}
#pointer li{
height:95%;
display: inline;
padding: 0;
margin: 0;

}
#pointer li a{
margin-top: 30px;
height:30%;
display: block;
vertical-align: middle;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 20px;

text-align: center;
font-size: 14px;


}
#pointer li a:hover{

}
< /style>
< script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">< /script>
< script src="https://cdn.rawgit.com/lukehaas/Scrollify/01cca204/jquery.scrollify.min.js">< /script>
< script>
var option = {
section : '.js-section',
easing: "swing",
scrollSpeed: 600,
scrollbars: false,
};
$.scrollify.disable();
$(function() {
$.scrollify(option); // scrollifyの実行
});
function move1(page){
$.scrollify.enable();
$.scrollify.move(page);
$.scrollify.disable();
}
< /script>
< /body>
< /html>