sekcompsci/feedview-sine.html

## feedview-sine.html
<html>
<head>
    <script src="https://cdn.rawgit.com/netpiemaker/feedview/master/jquery.js"></script>
    <script src="https://cdn.rawgit.com/netpiemaker/feedview/master/netpie.feedview.js"></script>
</head>
<body style="margin: 0;overflow: hidden;background-color: inherit;" id="body">
<div style="width:100vw;height:90vh;" id="main">
    <div id="chart"></div>
</div>
<button onclick="export_csv()">Export csv</button>

<script>
    let feedid = "feedid"; // *** ต้องแก้ไขก่อนการใช้งาน ***
    let apikey = "apikey"; // *** ต้องแก้ไขก่อนการใช้งาน ***
    let granularity = "15seconds"; // ตัวอย่าง เช่น 15seconds, 15minutes, 1hours, 1days
    let since = "6hours"; // ตัวอย่าง เช่น 1hours, 1days, 1months
    let option = {
        title: "title", //text
        xaxis: "time", //text
        yaxis: "value", //text
        multipleaxis: false, //true,false
        yzero: false, //true,false
        feedlinecolor: "pink,blue,yellow",
        baselinecolor: "pink,blue,yellow",
        type: "line", //line,step
        marker: true, //true,false
        filter: "", //field name
        autogap: false, //true,false
        baseline: "", //60,110
        fill: false, //true,false
        typebaseline: "solid" //solid,dash
    };

    //ex. since
    setInterval(function insertGraph() {
        $.getJSON("https://api.netpie.io/feed/" + feedid + "?apikey=" + apikey + "&granularity=" + granularity + "&since=" + since,
            function (datajson) {
                updateChart('chart', datajson, option);
            });
        return insertGraph;
    }(), 15000);

    function export_csv() {
        let xhttp = new XMLHttpRequest();
        let param = "?apikey=" + apikey + "&granularity=" + granularity + "&since=" + since + "&format=csv";
        console.log(param);

        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                let blob = new Blob([decodeURI(this.responseText)], {type: 'text/csv;charset=utf-8;'});
                let link = document.createElement("a");
                if (link.download !== undefined) { // feature detection
                    // Browsers that support HTML5 download attribute
                    let url = URL.createObjectURL(blob);
                    link.setAttribute("href", url);
                    link.setAttribute("download", feedid + '.csv');
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            } else {
                //error
                console.log("Download Error!");
            }
        };

        xhttp.open("GET", "https://api.netpie.io/feed/" + feedid + param, true);
        xhttp.timeout = 10000;
        xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhttp.send();
    }
</script>
</body>
</html>
	<html>
	<head>
	<script src="https://cdn.rawgit.com/netpiemaker/feedview/master/jquery.js"></script>
	<script src="https://cdn.rawgit.com/netpiemaker/feedview/master/netpie.feedview.js"></script>
	</head>
	<body style="margin: 0;overflow: hidden;background-color: inherit;" id="body">
	<div style="width:100vw;height:90vh;" id="main">
	<div id="chart"></div>
	</div>
	<button onclick="export_csv()">Export csv</button>

	<script>
	let feedid = "feedid"; // * ต้องแก้ไขก่อนการใช้งาน *
	let apikey = "apikey"; // * ต้องแก้ไขก่อนการใช้งาน *
	let granularity = "15seconds"; // ตัวอย่าง เช่น 15seconds, 15minutes, 1hours, 1days
	let since = "6hours"; // ตัวอย่าง เช่น 1hours, 1days, 1months
	let option = {
	title: "title", //text
	xaxis: "time", //text
	yaxis: "value", //text
	multipleaxis: false, //true,false
	yzero: false, //true,false
	feedlinecolor: "pink,blue,yellow",
	baselinecolor: "pink,blue,yellow",
	type: "line", //line,step
	marker: true, //true,false
	filter: "", //field name
	autogap: false, //true,false
	baseline: "", //60,110
	fill: false, //true,false
	typebaseline: "solid" //solid,dash
	};

	//ex. since
	setInterval(function insertGraph() {
	$.getJSON("https://api.netpie.io/feed/" + feedid + "?apikey=" + apikey + "&granularity=" + granularity + "&since=" + since,
	function (datajson) {
	updateChart('chart', datajson, option);
	});
	return insertGraph;
	}(), 15000);

	function export_csv() {
	let xhttp = new XMLHttpRequest();
	let param = "?apikey=" + apikey + "&granularity=" + granularity + "&since=" + since + "&format=csv";
	console.log(param);

	xhttp.onreadystatechange = function () {
	if (this.readyState === 4 && this.status === 200) {
	let blob = new Blob([decodeURI(this.responseText)], {type: 'text/csv;charset=utf-8;'});
	let link = document.createElement("a");
	if (link.download !== undefined) { // feature detection
	// Browsers that support HTML5 download attribute
	let url = URL.createObjectURL(blob);
	link.setAttribute("href", url);
	link.setAttribute("download", feedid + '.csv');
	link.style.visibility = 'hidden';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
	}
	} else {
	//error
	console.log("Download Error!");
	}
	};

	xhttp.open("GET", "https://api.netpie.io/feed/" + feedid + param, true);
	xhttp.timeout = 10000;
	xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	xhttp.send();
	}
	</script>
	</body>
	</html>