Activity Widget
How do I make an activity widget?
Uses Polychart [ polychart2.js ] Based on: http://dribbble.com/shots/1029611-Dashboard-Widgets/attachments/124364?return_to=%2Fmadebyanton%2Fprojects%2F119517-medical-web-app%23attachment-124364. What is a activity widget? How do you make a activity widget? This script and codes were developed by Aleks on 14 October 2022, Friday.
Activity Widget Previews
Activity Widget - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Activity Widget</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { font-family: 'Ubuntu', sans-serif !important;
}
body { background: #7f8c8d;
}
#container { width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -300px;
}
#header { color: #ecf0f1; height: 24px;
}
#header span { position: inherit; margin-left: 12px; bottom: -10px; font-size: 12px;
}
#display { height: 400px; background: #2C2F3B; border-top-left-radius: 7px; border-top-right-radius: 7px;
}
#details { height: 200px; background: #FFF; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
}
#t-head * { margin-top: 20px; font-size: 12px; color: #7f8c8d; display: inline-block;
}
#t-head :nth-child(1) { width: 320px; margin-left: 45px;
}
#t-head :nth-child(2), #t-head :nth-child(3) { width: 110px;
}
#t-body div :nth-child(1) { display: inline-block; margin: 15px; vertical-align: middle;
}
#icon1 { width: 10px; height: 10px; background: #F1736A;
}
#icon2 { width: 10px; height: 10px; background: #00BDCC;
}
#icon3 { width: 10px; height: 10px; background: #D4D5D7;
}
#icon4 { width: 10px; height: 10px; background: #5FB571;
}
#t-body div span { display: inline-block;
}
#t-body div span:nth-child(2) { width: 320px;
}
#t-body div span:nth-child(3) { font-weight: 700; width: 90px; text-align: right;
}
#t-body div span:nth-child(4) { font-weight: 700; width: 110px; text-align: right;
}
sup { font-size: 10px; left: -19px; top: -5px; position: relative;
}
#upper select { border: none; height: 40px; width: 580px; padding-left: 10px; font-weight: bold; font-size: 16px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower select { border: 1px solid #7f8c8d; background: #2C2F3B; color: #FFF; height: 30px; width: 220px; padding-left: 10px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower input { border: 1px solid #7f8c8d; background: #2C2F3B; color: #FFF; height: 30px; width: 130px; padding-left: 10px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower span { color: #7f8c8d; font-style:italic
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id='container'> <div id='header'> <span>ACTIVITY WIDGET</span> </div> <div id='display'> <div id='upper'> <select> <option>Disk space usage</option> <option>Something else 1</option> <option>Something else 2</option> <option>Something else 3</option> </select> </div> <div id='lower'> <select> <option>YEARLY ACTIVITY</option> <option>MONTHLY ACTIVITY</option> <option>WEEKLY ACTIVITY</option> <option>DAILY ACTIVITY</option> </select> <span>- or -</span> <input type='date'> <span>-</span> <input type='date'> </div> <div id='chart'></div> </div> <div id='details'> <div id='t-head'> <span>DRIVE NAME</span> <span>SELECTED</span> <span>CURRENT</span> </div> <div id='t-body'> <div> <div id='icon1'></div> <span>Drive A</span> <span> 176 <sup>GB</sup> </span> <span> 153 <sup>GB</sup> </span> </div> <div> <div id='icon2'></div> <span>Drive B</span> <span> 94 <sup>GB</sup> </span> <span> 149 <sup>GB</sup> </span> </div> <div> <div id='icon3'></div> <span>Drive C</span> <span></span> <span> 68 <sup>GB</sup> </span> </div> <div> <div id='icon4'></div> <span>Drive D</span> <span> 46 <sup>GB</sup> </span> <span> 137 <sup>GB</sup> </span> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/Polychart/polychart2/master/polychart2.standalone.js'></script> <script src="js/index.js"></script>
</body>
</html>
Activity Widget - Script Codes CSS Codes
* { font-family: 'Ubuntu', sans-serif !important;
}
body { background: #7f8c8d;
}
#container { width: 600px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -300px; margin-left: -300px;
}
#header { color: #ecf0f1; height: 24px;
}
#header span { position: inherit; margin-left: 12px; bottom: -10px; font-size: 12px;
}
#display { height: 400px; background: #2C2F3B; border-top-left-radius: 7px; border-top-right-radius: 7px;
}
#details { height: 200px; background: #FFF; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
}
#t-head * { margin-top: 20px; font-size: 12px; color: #7f8c8d; display: inline-block;
}
#t-head :nth-child(1) { width: 320px; margin-left: 45px;
}
#t-head :nth-child(2), #t-head :nth-child(3) { width: 110px;
}
#t-body div :nth-child(1) { display: inline-block; margin: 15px; vertical-align: middle;
}
#icon1 { width: 10px; height: 10px; background: #F1736A;
}
#icon2 { width: 10px; height: 10px; background: #00BDCC;
}
#icon3 { width: 10px; height: 10px; background: #D4D5D7;
}
#icon4 { width: 10px; height: 10px; background: #5FB571;
}
#t-body div span { display: inline-block;
}
#t-body div span:nth-child(2) { width: 320px;
}
#t-body div span:nth-child(3) { font-weight: 700; width: 90px; text-align: right;
}
#t-body div span:nth-child(4) { font-weight: 700; width: 110px; text-align: right;
}
sup { font-size: 10px; left: -19px; top: -5px; position: relative;
}
#upper select { border: none; height: 40px; width: 580px; padding-left: 10px; font-weight: bold; font-size: 16px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower select { border: 1px solid #7f8c8d; background: #2C2F3B; color: #FFF; height: 30px; width: 220px; padding-left: 10px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower input { border: 1px solid #7f8c8d; background: #2C2F3B; color: #FFF; height: 30px; width: 130px; padding-left: 10px; margin-top: 10px; margin-left: 10px; border-radius: 5px; -webkit-appearance: none; outline: none;
}
#lower span { color: #7f8c8d; font-style:italic
}Activity Widget - Script Codes JS Codes
var s1 = polyjs.data({ date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], count: [6, 7, 4, 3, 7, 8, 6, 8, 7, 6, 7, 5]
});
var s2 = polyjs.data({ date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], count1: [4, 5, 4, 3, 2, 2, 3, 4, 5, 4, 5, 6]
});
var s3 = polyjs.data({ date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], count2: [3, 4, 3, 2, 5, 7, 9, 6, 5, 2, 3, 4]
});
var options = { layers: [{ data: s1, type: "line", x: "date", y: "count", color: { const: "#e74c3c"}, size: { const: 3 } },{ data: s2, type: "line", x: "date", y: "count1", color: { const: "#2980b9"}, size: { const: 3 } },{ data: s3, type: "line", x: "date", y: "count2", color: { const: "#27ae60"}, size: { const: 3 } }], guide: { x: { min: 0, max: 0, numticks : 12, title: ""}, y: { min: 0, max: 10, numticks : 1, title: ""} }, dom: "chart", width: 580, height: 300
};
polyjs.chart(options);
| Developer | Aleks |
| Username | achudars |
| Uploaded | October 14, 2022 |
| Rating | 4.5 |
| Size | 4,276 Kb |
| Views | 14,168 |
Do you need developer help for Activity Widget?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Aleks (achudars) Script Codes
| Name | Size |
| Ubuntu OS logo | 4,063 Kb |
| Minimal White Audio Player | 2,760 Kb |
| Letter A | 2,219 Kb |
| Levelled Pyramid | 2,996 Kb |
| Diagonally-cut Search and Login Form | 3,349 Kb |
| Stylish and Dark Login Form | 3,279 Kb |
| Pulsating rings | 2,324 Kb |
| Flaky in pure CSS | 7,114 Kb |
| Gem Fox | 2,905 Kb |
| Scroll Percentage | 2,088 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Perspective Origin Demo | Agelber | 3,614 Kb |
| Vue.js | Thommyboy02 | 1,506 Kb |
| A Different Type of Gallery | DonPage | 2,950 Kb |
| SVG Scalable Text | Said_FD | 1,451 Kb |
| Lecture 1 | Law | 0 Kb |
| About Us | Francescaedits | 1,902 Kb |
| Midterm dry run | Jds317 | 1,649 Kb |
| Next Word Predictor | Rfalor | 2,776 Kb |
| FCC_Twitch.tv | MitchES | 3,466 Kb |
| Magnus 3 | ARocketfish | 7,944 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!