VBA 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">

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




< div id="header">
< div id="humberger"onclick="menuSlide()">
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
< p style="margin-top: 15px;margin-left: 60px;font-size: 30;color: white;">Outbound Report< /p>

< /div>

< div style="width:50vw;padding-top: 100px;margin-left:50px;height:600px">
< p style="font-size:20px;text-align:center">ABCDE< /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>
< hr width="70%">
< br>< br>
< div id="donutchart" style="width: 1000px; height: 400px;float:left;">< /div>

< div>< p>AAAAA< /p>
< p>BBBBB< /p>
< p>CCCCC< /p>< p>DDDDD< /p>
< p>EEEEE< /p>< p>FFFFFF< /p>< p>GGGGG< /p>
< /div>

< div id="string_filter_dashboard_div" style="clear:both;margin-left:15px;">
< br>
< div id="string_filter_control_div"style="width:200px;float: left;">< /div>
< br>
< div id="string_filter_chart_div" style="width:100%;">< /div>
< /div>
< div id="table">< /div>

< div id="menu">
< ul class="listCss" id="listID">
< li onclick="">< p>AAAA< /p>< /li>
< li onclick="">< p>BBBB< /p>< /li>
< li onclick="">< p>CCCC< /p>< /li>
< li onclick="">< p>DDDD< /p>< /li>
< li onclick="">< p>EEEE< /p>< /li>
< /ul>
< /div>
< div id="menusheet" onclick="menuSlide()"style="visibility:hidden;">< /div>




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



< script type="text/javascript">


function menuSlide(){
if(document.getElementById("menusheet").style.visibility=="hidden"){
document.getElementById("menu").style.left=0;
document.getElementById("menusheet").style.visibility="visible";
}else{
document.getElementById("menu").style.left=-255+"px";
document.getElementById("menusheet").style.visibility="hidden";
}
};

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]],
3:[['名前', '年齢','Title','number','fix'],
['Michael' , 12,'AAAA','2222','True'],
['Elisa', 20,'AAAA','2222','True'],
['Robert', 7,'AAAA','2222','True'],
['John', 54,'AAAA','2222','True'],
['Jessica', 22,'AAAA','2222','True'],
['Aaron', 3,'AAAA','2222','True']]
};


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

//*****************google.charts.setOnLoad****************
google.charts.setOnLoadCallback(function(){

dataload()
gauge1()
drawChart()
control()
setTimeout(gauge1(),1500)
});

//*****************dataのimport*****************
function dataload() {

data3 = google.visualization.arrayToDataTable(datasource[1]);
data4 = google.visualization.arrayToDataTable(datasource[2]);
datatbl = google.visualization.arrayToDataTable(datasource[3]);
};

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

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


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

//'width':'70%',
//'allowHtml':'true',
var cssClassNames = {
'headerRow':'GglheadCss',
'tableRow':'h40',
'oddTableRow':'oddCss',
'selectedTableRow':'selectedCss',
'hoverTableRow':'hoverCss'
}
var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

//var container = document.getElementById('table');
//var table = new google.visualization.Table(container);
// table.draw(datatbl, options);


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






//*******************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: 5 // 小目盛りの単位 (デフォルトは 2)
};

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

chart.draw(data3, options);
chart.draw(data4, 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);
};

< /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%;
}

.h40{height:40px;}
.GglheadCss{background-color:black;color:white;height:40px;}
.oddCss{background-color: rgb(229, 229, 229);height:40px;}
.selectedCss{background-color:#375488;height:40px;}
.hoverCss{background-color:#375488;color:white;height:40px;}

#string_filter_chart_div{}
.google-visualization-table-tr-head{background-color:black;color:white;height:40px;}
.google-visualization-table-table tr{height:40px;}
.google-visualization-table-table {width:70vw;text-align:center;}
.google-visualization-table-table tr{width:30px;}
.google-visualization-table-sortind:after{content: "";}

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

#header {
background-color: #34495e;
height: 64px;
/* margin-bottom: 110; */
position: fixed;
width: 100vw;
z-index: 100;
/* margin-top: -70px; */
}


#humberger {
position: absolute;
height: 16px;
width: 24px;
display: inline-block;
box-sizing: border-box;
top:25;
left:15px;
float:left;
cursor: pointer;
}
#humberger div {
position: absolute;
left: 0;
height: 2px;
width: 24px;
background-color: white;
border-radius: 2px;
display: inline-block;
box-sizing: border-box;
}
#humberger div:nth-of-type(1) { top: 0;}
#humberger div:nth-of-type(2) {top: 7px;}
#humberger div:nth-of-type(3) {bottom: 0;}
#menu{position:fixed;top:0;left:-260;width:250px;height:100vw;background-color:#322e2e;z-index:99;transition: left 0.5s;text-align: center;}
#menusheet{position:fixed;top:0;left:0;width:100vw;height:100vw;background-color:#00000061;z-index:95;transition-duration:0.5s;cursor: pointer;}


.listCss {
list-style: none;
overflow: hidden;
width: 250px;
padding: 0;
margin-top: 100px;
}
.listCss li {
list-style: none;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid #879c18;
}
.listCss li:last-child {
border-bottom: 0px;
}
.listCss li p {
display: block;
position: relative;
z-index: 10;
height: 40px;
margin: 0;
padding: 0px 10px 0px 30px;
background: #322e2e;
color: #fff;
font-size: 14px;
line-height: 40px;
font-weight: bold;
text-decoration: none;
}
.listCss li p:hover {
cursor: pointer;
background: gray;
}
#listID li p:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 25px;
width: 0;
height: 0;
margin-top: -5px;
border: 5px solid transparent;
border-left: 5px solid #fff;
}
#gct_sample_gauge tr{
height: 200px;
border: 1px solid #ccc;
}

< /style>





< /body>
< /html>