Skip to content

N
nodejs-60-2
Commit 2f51c16e authored by winai buttasart's avatar winai buttasart
Browse files
Options

update edit graph

parent 6918e647
Show whitespace changes
Inline Side-by-side
Showing with 309 additions and 5 deletions
week05/windowapp/chartMenu/customChart/01/test.html 0 → 100644
View file @ 2f51c16e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>แก้ไข Animated chart</title>
<meta name="description" content="เว็บไซต์แนะนำเกี่ยวกับนายวินัย บุตรศาสตร์">
<meta name="keywords" content="Nize portfolio template">
<meta name="author" content="Nize">
<!-- Favicons
================================================== -->
<link rel="icon" href="../../../img/icon/icon.png">
<link href="../../../asset/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../../asset/css/round-about.css">
<style>
img.preview {
display: block;
margin: 0 auto;
width: 20px;
}
div.box {
margin-left: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="../../../graph.html">Easy Graph</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">หน้าหลัก
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#about">เกี่ยวกับ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#contact">ติดต่อผู้พัฒนา</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../../profile.html" target="_blank">โปรไฟล์ผู้พัฒนา</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Modal -->
<div>
<!-- Modal About-->
<div class="modal fade" id="about" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Easy Graph</h4>
</div>
<div class="modal-body">
<p> &nbsp;&nbsp;&nbsp;
<b>Easy Graph</b> คือโปรแกรมที่จะทำให้คุณสร้างสรรค์กราฟในแนวที่คุณชอบ สไตล์คุณต้องการ ซึ่งจุดเด่นของโปรแกรมคือความง่ายในการใช้งาน
<br> ใครเคยใช้ Microsoft Word, Microsoft Excel, Microsoft PowerPoint ลืมไปได้เลย แม้แต่เด็กประถมยังออกแบบกราฟผ่านโปรแกรมนี้ได้
ที่สำคัญผมยังเปิดให้ทุกคนใช้งานได้
<b style="color:red">ฟรี!!</b> ไม่มีค่าใช้จ่ายใดๆทั้งสิ้น
<br> เจ๋งป่ะหล่ะ >> ช้าอยู่ใย ลุยเลยสิ
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
</div>
</div>
</div>
</div>
<!-- Modal Contact-->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">สวัสดีจ้าา</h4>
</div>
<div class="modal-body">
<p> &nbsp;&nbsp;&nbsp;
<b>ผมคือใครนะหรอ??</b> ผมชื่อ
<b>นัย</b> ครับ ผมเป็น.. คนหน้าตาดี ที่อยากพัฒนาโปรแกรมนี้ขึ้นมาให้ทุกคนใช้กันแบบง่ายๆ ยังไงหล่ะ
จะว่าไปโปรแกรมนี้ผมก็แจกฟรีนะ แต่เชื่อไหม คุณจะได้บุญถ้าคุณโอนเงินเป็นค่าเบียร์ให้ผม
<br>หมายเลขพร้อมเพย์
<b>085-2170037</b> นะ นะ นะ อยากดริ้งค์
<br>
<br>&nbsp;&nbsp;&nbsp;-_- ขอโทษที่เสียมารยาทครับ สำหรับใครที่ต้องการติดต่องาน หรืออยากเชิญชวนผมไปร่วมงานด้วย
ติดต่อผมผ่านทางอีเมลล์
<b>winai.bu.58@ubu.ac.th </b>ผมจะรีบตอบกลับอย่าง Fast9 เลยครับ
<br> ดูโปรไฟล์ฉบับเต็มของผมได้ที่
<a href="../../../profile.html" target="blank">โปรไฟล์ผู้พัฒนา</a>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="box">
<div class="row">
<div class="col-lg-4">
<h3 class="my-4" style="color: #00bf9a; ">
<div id="headEdit">
<b>แก้ไขแล้วบันทึกทึกกราของคุณ</b>
<table>
<tr>
<td id="editTD">
<div id="divTD">
<h3>ชื่อกราฟ :
<textarea form="tArea" id="graphName"></textarea>
</h3>
</div>
<button id="bt1">บันทึก</button>
</td>
</tr>
</table>
</div>
</h3>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<div id="showDiv"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="py-5 bg-dark fixed-bottom">
<div class="container">
<p class="m-0 text-center text-white">อย่าสิมาลอกเว็บกันเด้อ Copyright &copy; Easy Graph</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="../../../asset/js/canvasjs/canvasjs.min.js"></script>
<script src="../../../asset/js/jquery/jquery.min.js"></script>
<script src="../../../asset/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
//Default data
var data = [{
y: 51.08,
label: "Chrome"
},
{
y: 27.34,
label: "Internet Explorer"
}, {
y: 10.62,
label: "Firefox"
}, {
y: 5.02,
label: "Microsoft Edge"
}, {
y: 4.07,
label: "Safari"
}, {
y: 1.22,
label: "Opera"
}, {
y: 0.44,
label: "Others"
}
];
var nameG = "Desktop Browser Market Share in 2016";
$('#graphName').val(nameG);
for (var i in data) {
$('#divTD').append("<div><h3>" + "<input type='text' class='te' value='" + data[i].label + "' size='10'>" +
" : <input type='text' value='" + data[i].y + "' size='2'> %</h3></div>");
// <button>ลบ</button>
}
window.onload = function () {
Render();
}
$(document).ready(function () {
$('#graphName').mouseout(function () {
nameG = $('#graphName').val();
Render();
});
$('#bt1').click(function () {
Redata();
});
function Redata() {
var a = $('input');
for (var i = 0; i < a.length; i += 2) {
data[i / 2].label = a[i].value;
i++;
data[(i - 1) / 2].y = a[i].value;
i--;
Render();
}
}
});
function Render() {
var chart = new CanvasJS.Chart("showDiv", {
theme: "light2", // "light1", "light2", "dark1", "dark2"
exportEnabled: true,
animationEnabled: true,
title: {
text: nameG
},
data: [{
type: "pie",
startAngle: 25,
toolTipContent: "<b>{label}</b>: {y}%",
showInLegend: "true",
legendText: "{label}",
indexLabelFontSize: 16,
indexLabel: "{label} - {y}%",
dataPoints: data
}]
});
chart.render();
}
</script>
</body>
</html>
\ No newline at end of file
week05/windowapp/chartMenu/graph.html
View file @ 2f51c16e
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
<img src="../asset/image/icon/files.png" alt="..." class="preview"> <img src="../asset/image/icon/files.png" alt="..." class="preview">
</button> </button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;" <button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="ChartEdit('./customChart/01/01.html')"> onclick="ChartEdit('./customChart/01/test.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview"> <img src="../asset/image/icon/create.png" alt="..." class="preview">
</button> </button>
<br> <br>
...@@ -465,9 +465,13 @@ ...@@ -465,9 +465,13 @@
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script src="../asset/js/jquery/jquery.min.js"></script> <!-- <script src="../asset/js/jquery/jquery.min.js"></script> -->
<script src="../asset/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="../asset/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.$ = window.jQuery = require("../asset/js/jquery/jquery.min.js")
</script>
<script> <script>
function ChartEdit(path) { function ChartEdit(path) {
var win = window.open(path, '_blank'); var win = window.open(path, '_blank');
......
week05/windowapp/chartMenu/graph01.html
View file @ 2f51c16e
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
<img src="../asset/image/icon/files.png" alt="..." class="preview"> <img src="../asset/image/icon/files.png" alt="..." class="preview">
</button> </button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;" <button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="ChartEdit('./customChart/01/01.html')"> onclick="ChartEdit('./customChart/01/test.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview"> <img src="../asset/image/icon/create.png" alt="..." class="preview">
</button> </button>
<br> <br>
......
week05/windowapp/graph.html
View file @ 2f51c16e
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
<link href="./asset/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="./asset/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./asset/css/round-about.css"> <link rel="stylesheet" href="./asset/css/round-about.css">
<style> <style>
img.preview { img.preview {
display: block; display: block;
...@@ -160,7 +166,7 @@ ...@@ -160,7 +166,7 @@
<img src="./asset/image/icon/files.png" alt="..." class="preview"> <img src="./asset/image/icon/files.png" alt="..." class="preview">
</button> </button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;" <button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="ChartEdit('./chartMenu/customChart/01/01.html')"> onclick="ChartEdit('./chartMenu/customChart/01/test.html')">
<img src="./asset/image/icon/create.png" alt="..." class="preview"> <img src="./asset/image/icon/create.png" alt="..." class="preview">
</button> </button>
<br> <br>
...@@ -475,7 +481,27 @@ ...@@ -475,7 +481,27 @@
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script src="./asset/js/jquery/jquery.min.js"></script> <script src="./asset/js/jquery/jquery.min.js"></script>
<script src="./asset/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="./asset/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- <script src="./asset/js/canvasjs/canvasjs.min.js"></script> -->
<script>
// <script src="./asset/js/jquery/jquery.min.js"> try {
// window.$ = window.jQuery = require("./asset/js/jquery/jquery.min.js");
// window.$ = window.jQuery = require("./asset/bootstrap/js/bootstrap.bundle.min.js");
// // window.$ = window.jQuery = require("./asset/js/jquery/jquery.min.js");
// window.$ = window.jQuery = require("./asset/bootstrap/js/bootstrap.bundle.min.js");
// $ = jQuery = module.exports;
// } catch (e) {}
// mainWindow.webContents.on('did-start-loading', function () {
// mainWindow.webContents.executeJavaScript(
// "var $ = jQuery = require('./asset/js/jquery/jquery.min.js'), mainWindow = require('remote').getCurrentWindow();"
// );
// });
</script>
<script> <script>
function ChartEdit(path) { function ChartEdit(path) {
var win = window.open(path, '_blank'); var win = window.open(path, '_blank');
......
week05/windowapp/package-lock.json
View file @ 2f51c16e
...@@ -947,6 +947,11 @@ ...@@ -947,6 +947,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true "dev": true
}, },
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"jsbn": { "jsbn": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
......
week05/windowapp/package.json
View file @ 2f51c16e
...@@ -20,5 +20,8 @@ ...@@ -20,5 +20,8 @@
"devDependencies": { "devDependencies": {
"electron": "^1.8.2", "electron": "^1.8.2",
"electron-packager": "^11.0.1" "electron-packager": "^11.0.1"
},
"dependencies": {
"jquery": "^3.3.1"
} }
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment