VBA HTML

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

//alert( window.location.href.split('/').pop());

　var n = document.getElementById('normal');
var a =document.getElementsByTagName('a');
for(var i=1;i< a.length; i++){
//alert(a[i].href.split('/').pop());

if(a[i].href.split('/').pop()==window.location.href.split('/').pop()){
a[i].style.textDecoration="underline" ;
}

};

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

CategoryFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div1',
'options': {'filterColumnIndex': 1,
'ui': { 'labelStacking': 'vertical',
　　　　　　'caption': 'Select:',
'label': '',
'allowTyping': false,
'allowMultiple': false}
},
});


// '名前' に対する文字列フィルター
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId':'filter_div2',
'options': {
'filterColumnIndex': 0,
'matchType':'any',

}
});


// (Table)
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'id_table',
'options' :{'showRowNumber':false, 'allowHtml': true,'frozenColumns':1}
});


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


//********************************************************************************************************************
// テーブルで選択された時に値をdataTableから取得する

google.visualization.events.addListener(table, 'ready', onReady);


function onReady() {
google.visualization.events.addListener(table.getChart(), 'select', usefulHandler);
}

// Called
function usefulHandler() {
var selection = dashboard.getSelection();
var message = '';

for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null) {
var str = datatbl.getFormattedValue(item.row, 3);
message += 'row:' + item.row + ', ' + str + '\n';
}
}
alert('You selected \n' + message);
}

マウスホバー
document.querySelector('#id').addEventListener('mouseenter',()=>{
$.scrollify.disable();
})
document.querySelector('#id').addEventListener('mouseleave',()=>{
$.scrollify.enable();
})




ｐ１
　
　　　　 < p style="font-size:20px;text-align:center">BBBBBBBBBB< /p>
　
　　　
　　　　　< div style="width:45vw;float:left;vertical-align:top;">

　　　　 < canvas id="myChart">< /canvas>
　　　　 < br>< br>< br>< br>< br>
　
　
　　　　　< /div>

　　　　　< div align="center" style="width:40%;text-size:7px;float:left;margin:0px 35px 0 35px">
　　　　 　　 < div id="table1_div">< /div>
　　　　 　
　　　　　< /div>
< div style="clear:both;margin:0 60px">
< div style="width:250px">
< canvas id="ID" >< /canvas>
< p style="transform : translateX(50%);">< /p>
< /div>
< hr width="100%" style="">
< /div>


Tooltips
tooltips:{
mode: 'index',
//mode: 'x',
intersect: false,
backgroundColor:'#393f635c', //#e5d8b0ba',
caretPadding:6,
yPadding:10,
xPadding:10,
titleFontSize:16,
titleFontColor:'black',
bodyFontColor:'#34495e',
bodyFontSize:14,
}


function doughnutChart() {
var ctx = document.getElementById("ID").getContext('2d');
var myChart = new Chart(ctx, {
type: "doughnut", // グラフの種類 pie, doughnut polarArea
data: {
labels: ["R", "1"], // 軸のラベル
datasets: [
{
label: "1",
data: [29, 21], // 100%
backgroundColor:['#c9d45c','transparent'], // 円の色
borderColor:['#c9d45c','transparent'],
}
]
},
options: {
animation:{//easing:'easeOutBounce',
duration: 3000},
legend: {
display: false,
},
circumference:1*Math.PI,
rotation:1*Math.PI,
responsive: false,
cutoutPercentage: 90, // 中央空白サイズ%
title: { // 図のタイトル表示
display: false,
},
tooltips:{
enabled:false,
},
}
});
}



CSS
.１ {
width: 100%;
}

.２ {
overflow-y: auto;
max-width: 1500px;

height:100%;
margin: 0 auto;
padding: 0px 60px;
vertical-align:top;"
text-align:center;
}

#ID{
background-Color:white;
margin:-10px;
padding:10px 10px 10px 10px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

#ID{
background-Color:transparent;
text-align:center;
width:90%;
padding:10px 10px 10px 50px;

}


//オプションoptions、scale、ticks

var variation1=['#6d7eca', '#05d489', '#e03122', '#93e8ec', '#e0b3cd', '#e0e4b6', '#5592ad'];
var variation2=['#99a1c6', '#51cda0', '#df7970', '#4c9ca0', '#ae7d99', '#c9d45c', '#5592ad'];

var variation3='#6d7eca';
var variation4='#99a1c6';

var variation5=['#6d7eca', '#05d489', '#e03122', '#93e8ec'];
var variation6=['#99a1c6', '#51cda0', '#df7970', '#4c9ca0'];

//var newdata=[6,7, 1, 3, 1, 1];
var newdata=6
function addData(chart, label, data) {
//alert(1)
chart.data.label.push(label);
chart.data.type.push('bar');
chart.data.push(data);

chart.update();
};

//************************************************************************************************
// line-bar-bar
//************************************************************************************************
function top_linebar(){
var [a,b,c,d,e,f,g]=AAA[1][0]
var ctx1 = document.getElementById('myChart').getContext('2d');
var myChart1 = new Chart(ctx1,{
type: 'bar',
data: {
labels: [c,d,e,f,g],
datasets: [{
type: 'line',
label: 'C',
data: [0.3, 0.5, 0.2, 0.3],
backgroundColor: "rgba(0,0,0,0.0)",
borderColor: '#99a1c6',
borderWidth: 1,
yAxisID: 'right'
}, {
type: 'bar',
label: 'B',
data: [6,7, 1, 3, 1, 1],
backgroundColor:variation5,
yAxisID: 'left'
}, {
type: 'bar',
label: 'A',

data: [12, 19, 3, 5, 2, 3],
backgroundColor:variation6,
yAxisID: 'left'
}, ]
},
options: {
title: {
display: true,
text: 'Chart.js Bar Chart',
fontSize: 20
},
legend: {
position: 'right'
},
animation: {
duration: 2000,
// easing: 'easeInElastic'
easing: 'easeOutBounce',
//onComplete :function() {alert(9)}
},
scales: {

xAxes: [{
stacked: true ,
gridLines: {
display: false
},
}],
yAxes: [{
id: 'left',
position: "left",
ticks: {stepSize: 5,min: 0,max:30},
},
{
id: 'right',
position: "right",
ticks: {stepSize: 5,min: 0,}
}
]
}

}

});
};
//************************************************************************************************
// doughnutChart
//************************************************************************************************



function doughnutChart() {
var ctx = document.getElementById("ID_doughnut").getContext('2d');
var myChart = new Chart(ctx, {
type: "doughnut", // グラフの種類 pie, doughnut polarArea
data: {
labels: ["Cantact Ratio", "1"], // 軸のラベル
datasets: [
{
label: "1",
data: [29, 21], // Data
backgroundColor:['#c9d45c','transparent'], // 円の色

}
]
},
options: {
animation:{easing:'easeOutBounce',
duration: 5000},
legend: {
display: false,
},
responsive: false,
cutoutPercentage: 80, // 中央空白サイズ%
title: { // 図のタイトル表示
display: false,
},

}
});
}

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

< link rel="stylesheet" type="text/css" href="CSS/ifrmSrc.css">
< link rel="stylesheet" type="text/css" href="Chart/googleChart.css">
< link rel="stylesheet" type="text/css" href="Chart/ChartJS.css">


< /head>



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



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

　
　　　　 < p style="font-size:20px;text-align:center">BBBBBBBBBB< /p>
　
　　　
　　　　　< div style="width:50vw;height:500px;float:left;vertical-align:top;">

　　　　 < canvas id="myChart">< /canvas>

　　　　　< /div>

　　　　　< div align="center" style="width:40%;height: 500px;text-size:7px;float:left;margin-left:35px">
　　　　 　　 < div id="table1_div">< /div>
　　　　 　　< canvas id="ID_doughnut"　style="margin:100px">< /canvas>
　　　　　< /div>

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



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



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

< !--------------------------section4----------------------------------->
< section class="section js-section" style="background: linear-gradient(white, black);"data-section-name="section4">
< div class="section-content">



< div style="width:40vw:height:600px;float:left">
< p style="font-size:20px;text-align:center;">AAAAAAAAAAAAAA< /p>
< hr width="70%">
< /div>

< div style="height: 500px;">
< table width="100%">
< tr>< td>< p>CPH< /p>< /td>< /tr>
< tr>< td style"vertical-align:bottom">< div id="gct_sample_gauge">< /div>< /td>< /tr>
< /table>
< /div>





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

< script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js">< /script>
< script src="Chart/ChartJS.js">< /script>

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

< script>


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()};


datasource={1:[['名前', '年齢'], ['Michael' , 0],['Elisa', 0]],
2:[['名前', '年齢'], ['Michael' , 12],['Elisa', 20]],
4:[['label','AAA'],['AAA',0]],
5:[['label','AAA'],['AAA',55]]
};


//*****************google.charts.load*********************
google.charts.load('current',{'packages': ['corechart','controls','gauge','table','bar']});
//*****************google.charts.setOnLoad****************
//google.charts.setOnLoadCallback(drawTable)
window.onload=function(){fload()};
function fload(){
document.body.style.visibility="visible"
//alert(1)
dataload();
gauge1()
drawChart()
//bar1Chart();
control()
drawTable()
//setTimeout(gauge1(),1500)
changeParentHeight()
top_linebar()
doughnutChart()
};


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

data3 = google.visualization.arrayToDataTable(datasource[1]);
data4 = google.visualization.arrayToDataTable(datasource[2]);
data5 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

datatbl = google.visualization.arrayToDataTable(AAA[n]);
};

//GoogleChart-Donut-----------------------
//-fun:drawChart()-draw(data5, options)
< /script>< script type="text/javascript" src="Chart/googleDonut.js">< /script>< script>
//----------------------------------------


//GoogleChart-Gauge-----------------------
//-fun:gauge1()-draw(data3, options)
//--------------draw(data4, options)
< /script>< script src="Chart/googleGauge.js">< /script>< script>
//----------------------------------------



//GoogleChart-【SideBar】-ID:bar1_div-----
//-fun:bar1Chart()-draw(bardata0, options)
//-----------------draw(bardata1, options)
< /script>< script src="Chart/googleSideBar.js">< /script>< script>
//----------------------------------------


//GoogleChart-Table-----------------------
//-fun:control()-draw(datatbl,options)
< /script>< script src="Chart/googleTable.js">< /script>< script>
//----------------------------------------

function drawTable() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataTable: [AAA[1][0],
AAA[1][7],
AAA[1][3],
AAA[1][6]
],
options: {'showRowNumber':false},
containerId: 'table1_div'
});
wrapper.draw();
}



< /script>
< style>
.google-visualization-table-tr-head {
background-color: black;
color: white;
height: 40px;
}
< /stye>

< div id="pointer">
< button id="btn1"onclick="move1(-1)">▲< /button>
< button id="btn2"onclick="move1(+1)">▼< /button>
< /div>
< div id="pointer1">
< ul>
< li>< a href="#" onclick="move1('#section1')">▲< /a>< /li>
< li>< a href="#" onclick="move1('#section2')">▼< /a>< /li>
< /ul>
< /div>
< style>

#pointer{
vertical-align:center;
position: fixed;
top:35%;
right:20px;
height:95%;
width:15px;

}
#pointer button{
text-align:center;
vertical-align:center;
height:60px;
width:30px;
background-color:transparent;
border-color: transparent;
text-size:20px;
}
#pointer button:hover{
cursor: pointer;

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

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

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

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の実行

});
var s=1
function move1(p){
s=s+p
var page='#section'+s
$.scrollify.enable();
$.scrollify.move(page);
$.scrollify.disable();
button()
}
function button(){
if(s==1){
document.getElementById("btn1").style.visibility='hidden'
}else if(s==4){
document.getElementById("btn2").style.visibility='hidden'
}else{
document.getElementById("btn1").style.visibility='visible'
document.getElementById("btn2").style.visibility='visible'
}
}

window.addEventListener("scroll", () => {
if(document.getElementById('p2').getBoundingClientRect().top==0){
alert(document.getElementById('p2').getBoundingClientRect().top)
}

});
< /script>
< /body>
< /html>

/*
div.google-visualization-tooltip { background:

var data = [
['AAA','NNN',{'type':'string','role':'tooltip','p':{'html':true}}],

var options = {

tooltip: {isHtml: true},


//backgroundColor:{fill:'#666'},
greenColor:'#1050bc',
greenFrom:85,greenTo:100,
redColor:'gray',
redFrom: 0, redTo: 20,
yellowColor:'darkgray',
yellowFrom: 20, yellowTo: 30,
minorTicks: 20,
// min:
max: 70,
majorTicks: ['0','10','20','30','40','50','60','70']




#gct_sample_gauge text {
/*fill:black;*/
fill:#ffffff;
}
#gct_sample_gauge circle[r="10"] {r: 0;}
#gct_sample_gauge circle[fill="#cccccc"] {
fill: transparent;
fill: gradient(-135deg, #E4A972, #9941D8);
/* background-color: white; */
}

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

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

#gct_sample_gauge g circle{stroke: transparent;}
#gct_sample_gauge g g circle{fill: transparent;}
#gct_sample_gauge g g path{fill: white;stroke: transparent;}


background: linear-gradient(white, black);
*/

Option Explicit
Sub Sample2()

Dim ADO As Object, FilePathName As String

Set ADO = CreateObject("ADODB.Stream")
FilePathName = ThisWorkbook.Path & "\Report1\" & "Data.js"

ADO.Charset = "UTF-8"
ADO.Open

Dim str As String

str = "const HCC={"
Dim g, i
For Each g In Range("B4:AM59")

Select Case True
Case g.Column = Range("B1").Column
i = i + 1
str = str & i & ":""" & g.Text
Case Else
' If InStr(g.Text, "%") > 0 Then
' str = str & "," & g.Value
' ElseIf IsNumeric(g.Text) = False Then
str = str & "," & g.Text
' Else
' str = str & "," & g.Value
' End If
If g.Column = Range("AM1").Column Then
If g.Row = 59 Then
str = str & """}"
Else
str = str & """," & vbCrLf
End If
End If
End Select


Next




ADO.WriteText str
ADO.SaveToFile FilePathName, 2
ADO.Close

End Sub

Sub Sample1()

Dim ADO As Object, FilePathName As String

Set ADO = CreateObject("ADODB.Stream")
FilePathName = ThisWorkbook.Path & "\Report1\" & "Data.js"

ADO.Charset = "UTF-8"
ADO.Open

Dim str As String

str = "const AAA={"
Dim g, i
For i = 1 To 2
str = str & i & ":["
For Each g In Range("B4:AM59")

Select Case True
Case g.Column = Range("B1").Column
str = str & "['" & g.Text & "'"
Case Else
' If InStr(g.Text, "%") > 0 Then
' str = str & "," & g.Value
' ElseIf IsNumeric(g.Text) = False Then
str = str & ",'" & g.Text & "'"
' Else
' str = str & "," & g.Value
' End If
If g.Column = Range("AM1").Column Then
If g.Row = 59 Then
str = str & "]" & vbCrLf
Else
str = str & "]," & vbCrLf
End If
End If
End Select


Next
str = str & "],"
Next
str = Left(str, Len(str) - 1)
str = str & "};" & vbCrLf



ADO.WriteText str
ADO.SaveToFile FilePathName, 2
ADO.Close

End Sub

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

< /head>
< body>< !-- 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: 20px;color: white;">AAAAAAAA< /p>
< /div>






< div id="menu">
< ul class="listCss" id="listID">
< li onclick="frmChange('1map.html')">< p>AAAA< /p>< /li>
< li onclick="frmChange('2GoogleApi.html')">< 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>

< div >
< iframe id="frm" name="main" width="100%" src="1map.html" frameborder="0"scrolling="yes" style="margin-top: 50px;">< /iframe>
< /div>




< script type="text/javascript">

function frmChange(URL){
document.getElementById("frm").src=URL
menuSlide()
}


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 elm = document.getElementById("frm");

// 子画面のコンテンツサイズに合わせてサイズを変更する関数
function changeParentHeight(){
//alert(window.innerHeight-64+ "px")
//alert(document.body.scrollHeight-64+ "px" )
elm.style.height =window.innerHeight-50+ "px";
}

// 親画面 iframe の高さを変更するイベント
// 1. 子画面の読み込み完了時点で処理を行う
window.onload = function(){ changeParentHeight() };
elm.contentWindow.onload = function(){ changeParentHeight() };

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


< style>


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

#header {
background-color: #34495e;
height: 50px;
/* margin-bottom: 110; */
position: fixed;
width: 100vw;
z-index: 100;
/* margin-top: -70px; */
background-color: #4a80b7;
box-shadow: 0px 2px 12px 1px #9E9E9E;
}


#humberger {
position: absolute;
height: 16px;
width: 24px;
display: inline-block;
box-sizing: border-box;
top: 17px;
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:-260px;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:100%;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;
}


< /style>





< /body>
< /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">

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



< div style="width:50vw;padding-top: 50px;margin-left:50px;height:500px;float:left">

< hr width="70%">
< br>
< br>
< div id="region-div">< /div>
< /div>
< div>
< br>< br>< br>
< h1>AAAAAAAAAAAAAAA< /h1>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< p>aaaaaaaaaaaaaaaaaaaaa< /p>
< /div>

< hr width="70%">



< script type="text/javascript" src="https://www.google.com/jsapi">< /script>



< script type="text/javascript">

google.load('visualization','1',{'packages': ['geochart']});
google.setOnLoadCallback(drawMap);

function drawMap() {
//都道府県単位のデータ
var data = [
['所在地','回数','VVV'],
['埼玉', 500,10],
['東京', 700,6],
['神奈川', 600,8]
];
var dt = google.visualization.arrayToDataTable(data);
var options = {
region: 'JP', //地域
//displayMode: 'markers',
// colorAxis: {colors: ['blue','blue']}
//backgroundColor: '#ebf7fe', //背景色
resolution: 'provinces', //境界線
colors: ['#ffeb3b','#f44336']
};
//出力するDivを指定して chart を生成
var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
//描画
chart.draw(dt, options);
}




< /script>


< style>


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




< /style>





< /body>
< /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>