-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrafing_index.html
159 lines (151 loc) · 9.79 KB
/
grafing_index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grafing - The Ninja Graph Plotter</title>
<link rel="shortcut icon" href="grafing_src/graphy-png-logo.png">
<link rel="stylesheet" href="grafing_src/main components/index.css">
<link rel="stylesheet" href="grafing_src/lib/bootstrap.min.css">
<link rel="stylesheet" type="text/CSS" href="grafing_src/lib/jsxgraph.css">
<link rel="stylesheet" type="text/CSS" href="grafing_src/lib/tabulator.min.css">
<link rel="stylesheet" type="text/CSS" href="grafing_src/lib/bulma.min.css">
<link rel="stylesheet" type="text/css" href="grafing_src/lib/easyui.css">
<script src="grafing_src/lib/jsxgraphcore.js"></script>
<script src="grafing_src/main components/validator.js"></script>
<script src="grafing_src/lib/tabulator.min.js"></script>
<script type="text/javascript" src="grafing_src/lib/jquery.min.js"></script>
<script type="text/javascript" src="grafing_src/lib/jquery.easyui.min.js"></script>
<script type="text/javascript" src="grafing_src/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="grafing_src/lib/math.js"></script>
</head>
<body>
<!-- TOP NAV BAR -->
<div>
<div style="background:black; width: 100%; height: 3rem;">
<div>
<b style="color: azure; font-size: 24pt; margin-left: 10px;">Grafing</b>
<b style="font-size: 12pt; float: right; margin-right: 15rem; margin-top: 12px;"><a href="https://github.com/arijit-ship/Grafing" style="color:white;">Repository</a></b>
<b style="font-size: 12pt; float: right; margin-right: 1rem; margin-top: 12px;"><a href="grafing_src/grafing_about&faq.html" style="color:white;">About & Help</a></b>
<!--
<div class="form-check" style=" float: right ;margin-right: 1rem; margin-top: 1rem;">
<input class="form-check-input" type="checkbox" value="" id="gridCheck" checked>
<label class="form-check-label" for="flexCheckDefault" style="color:whitesmoke;">
Show Grids
</label>
</div>
-->
</div>
</div>
</div>
<!-- RESIZABLE LAYOUT -->
<div class="easyui-layout" style="width:100%; height:93%;">
<!-- WEST PANEL -- TOOLBAR, TABLE etc -->
<div data-options="region: 'west', split:true" style="width:42%; border: rgb(14, 14, 14); height: 100%;">
<!-- MAIN TOOLBAR -->
<div>
<div style="height: 1.5cm; width:100%;background: rgb(241, 241, 241);display: flex;">
<div>
<span style="float: left; margin-left: 1rem;margin-top: 0.4cm; text-align: center;">Plot type</span>
<div class="form-group" style="float: left; margin-left: 1rem;margin-top: 0.5rem;">
<select class="form-control" id="plotType" onchange="toggleUI()">
<option value="scatter2d">Scatter 2D</option>
<option value="linearReg">Linear Regression</option>
<option value="poly" >Polynomial Regression</option>
<option value="functionPlot" data-toggle="modal" data-target="#myModal">Function Plot</option>
<option value="bez" data-toggle="modal" data-target="#myModal" disabled>Bézier Curve</option>
</select>
</div>
</div>
<div>
<div id="option-div" style="float: left ;margin-left: 1rem; margin-top: 0.3rem;">
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showAxes" onclick="showAxesGrid()" checked disabled>
<label class="form-check-label" for="flexCheckDefault" style="color:rgb(0, 0, 0);">
Show Axes & Grids
</label>
</div>
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="polyChain" checked onchange="isOrderedX()">
<label class="form-check-label" for="flexCheckDefault" style="color:rgb(0, 0, 0);">
Polygonal Chain
</label>
</div>
</div>
</div>
<div id="poly-div" style="float: left; display: none;">
<span style="float: left; margin-left: 1.5rem;margin-top: 0.4cm; text-align: center;">Polynomial Order</span>
<div class="form-group" id="1" style="float: left; margin-left: 1rem; margin-top: 0.7rem;">
<input type="number" id="poly-Oder" name="points" step="1" value="2" min="2" max="20" style="height: 30px; width: 5rem;">
</label>
</div>
</div>
</div>
<div id="best-slope-intercept" style="float: left; display: none;">
<div style="display: grid;">
<span id="best-slop" style="margin-left: 1rem; margin-top: 5px;">Best slop: </span>
<span id="y-intercept" style="margin-left: 1rem; margin-top: 5px;">Y-intercept: </span>
</div>
</div>
</div>
<!-- TABLE TOOLBAR -->
<div id="table-toolbar" style="height: 30px; display:flex ;">
<button class="button is-small" id="getData" onclick="clearBoard(), isFunctionPlot()" style="background:palegreen; border-color: black; float: left; margin-left: 0;"><b>PLOT</b></button>
<button class="button is-small" id="getData" onclick="replot()" style="background: cornflowerblue; border-color: black">Replot</button>
<button class="button is-small" id="exportButton" onclick="resetClear()" style="background: azure; border-color:black;">Reset & Clear</button>
<button class="button is-small" id="addRows" style="margin-left: 5px"><b>+Row</b></button>
<button class="button is-small" id="addEqn" style="margin-left: 0; display: none;"><b>+Equation</b></button>
<button class="button is-small" id="randomPoint" onclick="randomPoints()">Random(-10 to +10)</button>
<button class="button is-small" id="example-function-button" style="display: none;" onclick="exampleFunctionWrite()">Show Examples</button>
<div class="form-check" id="hide-names-div" style="margin-left: 0.5rem; margin-top: 5px">
<input class="form-check-input" type="checkbox" id="show-names-checkbox" checked>
<label class="form-check-label" for="flexCheckDefault" style="color:rgb(0, 0, 0);">
<small>Show Names</small>
</label>
</div>
<div class="form-check" id="is-orderedX-div" style="margin-left: 0.5rem; margin-top: 5px">
<input class="form-check-input" type="checkbox" id="is-orderedX" checked>
<label class="form-check-label" for="flexCheckDefault" style="color:rgb(0, 0, 0);">
<small>Ordered</small>
</label>
</div>
<div class="form-check" id="show-poly-term-div" style="margin-left: 0.5rem; margin-top: 5px; display: none;">
<input class="form-check-input" type="checkbox" id="show-poly-term" checked>
<label class="form-check-label" for="flexCheckDefault" style="color:rgb(0, 0, 0);">
<small>Terms</small>
</label>
</div>
</div>
</div>
<!-- INPUT AREA -->
<div style="display: contents;">
<!-- DATA TABLE AREA -->
<div id="data-table" style="width: auto;"> <!-- HERE IS THE DATA TABLE --> </div>
<!-- EQUATION INPUT DIV -->
<div id="equation-div" style="width: auto; display: none;"> <!-- HERE IS EQUATION INPUT --> </div>
</div>
</div>
<!-- EAST PANEL -- GRAPHING AREA -->
<div data-options="region:'center' " style="width: 58%; height: 100%;">
<div id="jxgbox3a" style="height: 100%;;background:whitesmoke; width: 100%;"></div>
</div>
</div>
<div style="width: 100%;height: 10rem; background: black;">
<p style="padding: 1rem; color: white; text-align: justify;">Hello there. Thanks for using Graphy, the ninja graph plotting tool. This is the web version and some features are disabled(not implemented yet tbh😅). You may want to install the desktop app version(which I'm working on right now) to use those features, like <i>random sample points generator, Bézier curve, WYSIWYG equation editor, etc</i>. You're welcome to fork this project, go to the repository, and download the source code to start your own development. Happy coding!
<br><br> © Arijit Das / Project Graphy /
<span style="color: azure;">Updated Dec 26 / 2021</span>
<!-- hitwebcounter Code START -->
<span style="float: right">
<a href="https://www.hitwebcounter.com" target="_blank">
<img src="https://hitwebcounter.com/counter/counter.php?page=7916369&style=0006&nbdigits=5&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" /></a>
</span>
</div>
</body>
<script src="grafing_src/main components/fendProcess.js"></script>
<script src="grafing_src/math components/scatter_plot.js"></script>
<script src="grafing_src/math components/linear_regression.js"></script>
<script src="grafing_src/math components/polynomial_regression.js"></script>
<script src="grafing_src/math components/function_plot.js"></script>
</html>