Skip to content

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

ส่งงาน desktop application

parent dca3e62d
Show whitespace changes
Inline Side-by-side
Showing with 491 additions and 0 deletions
week05/windowapp/chartMenu/graph.html 0 → 100644
View file @ 0ceeaec2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ออกแบบกราฟของคุณ</title>
<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; ">
<b>เลือกกราฟแล้วเริ่มสร้างเลย</b>
</h3>
<div class="list-group">
<a href="graph01.html" class="list-group-item active">กราฟน่าสนใจ (Overview)</a>
<a href="graph02.html" class="list-group-item">กราฟเส้น (Line-Spline-Step-Line-Charts)</a>
<a href="graph03.html" class="list-group-item">กราฟพื้นที่ (Stacked-Spline-Range-Area-Charts)</a>
<a href="graph04.html" class="list-group-item">กราฟแท่ง (Column-Stacked-Range-Waterfall-Charts)</a>
<a href="graph05.html" class="list-group-item">กราฟวงกลม โดนัทและพีระมิด (Pie-Doughnut-Funnel-Pyramid-Charts)</a>
<a href="graph06.html" class="list-group-item">กราฟแท่งเทียน (Candlestick-Ohlc-Charts)</a>
<a href="graph07.html" class="list-group-item">แผนภูมิกระจายแบบฟองสบู่ (Scatter-Bubble-Charts)</a>
<a href="graph08.html" class="list-group-item">แผนภาพกล่อง (Box-And-Whisker-Charts)</a>
<a href="graph09.html" class="list-group-item">แผนภูมิแบบรวมกัน (Combination-Charts)</a>
<a href="graph10.html" class="list-group-item">แผนภูมิแบบไดนามิก (Dynamic-charts)</a>
</div>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-12">
<br>
<h5 class="my-4" style="color:#4C9CA0">
<b>&nbsp;&nbsp;&nbsp;เริ่มต้นสร้างกราฟของคุณได้ง่ายๆ เลือกเทมเพลตแล้วลุยกันเลย</b>
</h5>
</div>
<!-- 1 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/01.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/01.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Animated chart</h5>
<p>เป็นแผนภูมิภาพเคลื่อนไหวรูปวงกลม</p>
</div>
</div>
</div>
<!-- 2 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/02.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/02.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart From Json Data</h5>
<p>เป็นแผนภูมิแท่งที่ใช้วิธีการสร้างด้วยข้อมูล JSON</p>
</div>
</div>
</div>
<!-- 3 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/03.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/03.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Axis Scale Breaks</h5>
<p>เป็นกราปแท่งที่มีส่วนแข่งครึ่งแท่งของกราฟ</p>
</div>
</div>
</div>
<!-- 4 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/04.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/04.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Crosshair</h5>
<p>แผนภูมิสร้างด้วย Crosshair</p>
</div>
</div>
</div>
<!-- 5 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/05.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/05.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Custom Legend Chart</h5>
<p>แผนภูมิแบบกำหนดเอง</p>
</div>
</div>
</div>
<!-- 6 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/06.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/06.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Image Overlay</h5>
<p>แผนภูมิด้วยภาพซ้อนทับ</p>
</div>
</div>
</div>
<!-- 7 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/07.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/07.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Index Data Label</h5>
<p>แผนภูมิด้วยป้ายข้อมูลข้อมูลดัชนี</p>
</div>
</div>
</div>
<!-- 8 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/08.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/08.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Inverted Reversed Axis</h5>
<p>แผนภูมิกลับด้าน</p>
</div>
</div>
</div>
<!-- 9 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/09.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/09.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Logarithmic Axis</h5>
<p>แผนภูมิด้วยแกนลอการิทึม</p>
</div>
</div>
</div>
<!-- 10 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/10.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/10.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Secondary Axis</h5>
<p>แผนภูมิด้วยแกนทุติยภูมิ</p>
</div>
</div>
</div>
<!-- 11 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/11.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/11.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Chart With Zoom Pan</h5>
<p>แผนภูมิที่มีซูมแพน</p>
</div>
</div>
</div>
<!-- 12 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/12.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/12.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Dynamic Chart</h5>
<p>แผนภูมิแบบไดนามิก</p>
</div>
</div>
</div>
<!-- 13 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/13.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/13.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Interactive Draggable Chart</h5>
<p>แผนภูมิที่สามารถลากได้แบบอินเตอร์แอคทีฟ</p>
</div>
</div>
</div>
<!-- 14 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/14.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/14.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Multi Series Chart</h5>
<p>แผนภูมิหลายซีรี่ส์</p>
</div>
</div>
</div>
<!-- 15 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/15.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/15.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Null Data Chart</h5>
<p>แผนภูมิไม่มีข้อมูล</p>
</div>
</div>
</div>
<!-- 16 -->
<div class="col-lg-4 col-sm-6 text-center mb-4">
<div class="card card-shadow mb-5">
<img class="card-img-top img-responsive" src="../asset/image/01/16.png" alt="JavaScript Pie Charts &amp; Graphs">
<div class="card-footer text-center">
<button type="button" class="btn btn-info btnPreview" data-toggle="tooltip" title="ดูตัวอย่าง" onclick="previewShow('../examples/01/16.html')">
<img src="../asset/image/icon/files.png" alt="..." class="preview">
</button>
<button type="button" class="btn btn-success btnCreate" data-toggle="tooltip" title="สร้างกราฟ" style="margin-left:10px;"
onclick="editChart('./customChart/mainCustom.html','./customeChart/editChart.html','./customeChart/showChart.html')">
<img src="../asset/image/icon/create.png" alt="..." class="preview">
</button>
<br>
<br>
<h5>Performance Demo</h5>
<p>การสาธิตประสิทธิภาพ</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<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/jquery/jquery.min.js"></script>
<script src="../asset/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
function previewShow(path) {
var win = window.open(path, '_blank');
if (win) {
win.focus();
} else {
alert('อนุญาติให้เปิดเว็บไซต์');
}
}
function editChart(path, pathedit, pathshow) {
var win = window.open(path, '_blank');
if (win) {
win.focus();
} else {
alert('อนุญาติให้เปิดเว็บไซต์');
}
}
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
});
});
</script>
</body>
</html>
\ No newline at end of file
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