DaVis/index.html at master · abhinav1602/DaVis · GitHub

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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Da-vis | Real Time Data Visualization</title>

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!--Import jQuery before materialize.js-->
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- custom css defined here -->
    <link rel="stylesheet" type="text/css" href="css/mycss.css">

    <!-- Chart JS library include -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"/></script>

    <!-- For Github Banner -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.ie.min.css" />
    <![endif]-->


    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Rationale" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald|PT+Sans|Roboto|Ubuntu:300,400" rel="stylesheet">

    <script type="text/javascript">
      $(document).ready(function(){
        $("#contact").hide();
        $(".button-collapse").sideNav();

        $('.contactUs').click(function(){
          $("#contact").toggle();
          $("#top").toggle();
          $("#bottom").toggle();
        });

        $('.modal').toggle('open');
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal').modal({
            dismissible: true, // Modal can be dismissed by clicking outside of the modal
            opacity: 0.5, // Opacity of modal background
            inDuration: 300, // Transition in duration
            outDuration: 200, // Transition out duration
            startingTop: '30%', // Starting top style attribute
            endingTop: '20%', // Ending top style attribute
          }
        );
      });
    </script>
</head>
<body onload="init();">
    <!--Navigation Bar -->
       <nav>
        <div class="nav-wrapper cyan darken-1">
          <a class="brand-logo" style="font-family:'Gloria Hallelujah','Roboto';margin-left:10%;">Da-vis</a>

      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

          <ul id="nav_ul" class="right hide-on-med-and-down">
            <li><a href="index.html">Home</a></li>
            <!-- Modal Trigger -->
            <li><a data-target="modal1">About Da-vis</a></li>
            <li><a href="https://abhinav1602.github.io" target="_blank">About Developer</a></li>
            <li><a class="contactUs">Contact Us</a></li>
          </ul>

        <!-- For Mobile -->
          <ul class="side-nav" id="mobile-demo">
            <li><a href="index.html">Home</a></li>
            <!-- Modal Trigger -->
            <li><a data-target="modal1">About Da-vis</a></li>
            <li><a href="https://abhinav1602.github.io" target="_blank">About Developer</a></li>
            <li><a class="contactUs">Contact Us</a></li>
          </ul>

        </div>

      </nav>

      <div id="modal1" class="modal" style="z-index:999">
                <div class="modal-content">
                  <h3 class="card-title center">About Da-vis</h3>
                  <hr>
                  <h4 class="grey-text text-darken-4">Da-vis stands for Data Visualizer. It is an online open source project which aims at providing real time data visualization on small scale. The user needs to enter the data manually and Da-vis will be displaying the statistical visualization for the same using Histogram, Pie Chart, Doughnut Chart and Line Chart. It uses Chart.js library for statistical data visualization</h4>
                </div>

                <div class="modal-footer">
                <a onclick=" $('#modal1').modal('close');" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
                </div>
      </div>

      <!-- Contact Form -->
        <div id="contact" class="row card hoverable col s10 m10 l10 offset-s1 offset-l1 offset-m1">
          <form class="col s10 m10 l10 offset-s1 offset-l1 offset-m1" method="POST">
            <div class="row">
              <div class="input-field col s6">
                <input id="first_name" type="text" class="validate" name="first" required>
                <label for="first_name">First Name</label>
              </div>
              <div class="input-field col s6">
                <input id="last_name" type="text" class="validate" name="last">
                <label for="last_name">Last Name</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12 m12 l12">
                <input id="email" type="email" class="validate" name="email_id" required>
                <label for="email">Email</label>
              </div>
            </div>

            <div class="row">
              <div class="input-field col s6 m12 l12">
                <i class="material-icons prefix"></i>
                <textarea id="icon_prefix2" class="materialize-textarea" name="msg" required></textarea>
                <label for="icon_prefix2">Message</label>
              </div>
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
            </button>
          </form>
        </div>
        <!-- Contact From Ends Here -->

      <div class="row" id="top">

          <div class="col s10 m5 l6 push-s1 push-m1 push-l1 center" style="margin-top:5%;" >
            <canvas class="myHistogram hoverable" id="can1" height="300">
              Canvas failed to load
            </canvas>
          </div>

          <div class="col s10 m4 l3 push-s1 push-m2 push-l2 center" style="margin-top:5%;">
              <canvas class="myPieChart hoverable" id="can2" height="300">
                Canvas failed to load
              </canvas>
          </div>

      </div>

      <div class="row" id="bottom" >

          <div class="col s10 m4 l4 push-s1 push-m1 push-l1 center" id="can3" style="margin-top:5%;">
            <canvas class="myDoughnut hoverable" height="300">
              Canvas failed to load
            </canvas>
          </div>

        <div class="col s6 m3 l3 push-s3 push-m1 card hoverable z-depth-5" id="mid1">

            <div id="in-mid">

            <label for="number">Number of data</label>
            <br>
            <input type="text" id="num" class="center" name="number" style="position:relative;float:center;width:40%"></input>
            <br>
            <input type="submit" id="n" onclick="fillLabel();"></input>

            <br>

            <label for="y">Value of data</label>
            <br>
            <input type="number" class="center" name="y" id="y" style="position:relative;float:center;width:20%"></input>
            <br>
            <input type="submit" id="val" onclick="pushVal();" style="position:relative;float:center;margin-bottom:10px"></input>

          </div>
        </div>

          <div class="col s10 m4 l3 push-s1 push-l1 push-m1 center" style="margin-top:5%;">
              <canvas class="myLineChart hoverable"  id="can4" height="300">
                Canvas failed to load
              </canvas>
          </div>
      </div>

     <!-- BOTTOM LEFT RIBBON: START COPYING HERE -->
    <a id="git_banner" class="github-fork-ribbon left-bottom" style="position:relative;bottom:-5px;z-index:999" target="_blank" href="https://github.com/abhinav1602/DaVis" title="Fork me on GitHub"></a>
    <!-- BOTTOM LEFT RIBBON: END COPYING HERE -->

    <footer class="page-footer cyan darken-4" >
        <div class="footer-copyright container">

          <div class="center" >
            <a class="white-text" href="https://github.com/abhinav1602" target="_blank">© abhinav1602</a>

            <a href="https://github.com/abhinav1602" target="_blank">
              <img src="images/github.png" height="20" width="20" style="margin-left:5px">
            </a>
            <a href="https://in.linkedin.com/in/abhinav-tiwari-a6829643" target="_blank">
              <img title="LinkedIn" alt="LinkedIn" src="images/linked.png" height="20" width="20" style="margin-left:5px" />
            </a>
          </div>
        </div>


    </footer>
      <!--Custom Scripts -->
      <script src="js/app.js"></script>
</body>
</html>