2\/ Create a foremost undertaking folder and subfolders<\/strong><\/p>\nOpen your command terminal and run the next instructions. I\u2019m utilizing Ubuntu on my Home windows field for this, however you may change it to fit your most well-liked command-line utility and system.<\/p>\n
$ mkdir my-dashboard\n$ cd my-dashboard\n$ mkdir shopper\n% mkdir server<\/code><\/pre>\n3\/ Initialise a Node undertaking<\/strong><\/p>\n$ npm init -y<\/code><\/pre>\nThis command robotically creates a default bundle.json<\/strong> file in your undertaking listing with out requiring consumer enter.<\/strong><\/p>\nThe -y<\/strong> flag solutions \u201csure\u201d<\/strong> to all prompts, utilizing the default values<\/strong> for fields like:<\/p>\n\ntitle<\/strong><\/li>\nmodel<\/strong><\/li>\ndescription<\/strong><\/li>\nforemost<\/strong><\/li>\nscripts<\/strong><\/li>\ncreator<\/strong><\/li>\nlicense<\/strong><\/li>\n<\/ul>\nHere’s what my bundle file seemed like.<\/p>\n
{\n \"title\": \"my-dashboard\",\n \"model\": \"1.0.0\",\n \"foremost\": \"index.js\",\n \"scripts\": {\n \"take a look at\": \"echo \"Error: no take a look at specified\" && exit 1\"\n },\n \"key phrases\": [],\n \"creator\": \"\",\n \"license\": \"ISC\",\n \"description\": \"\",\n \"dependencies\": {\n \"specific\": \"^4.21.2\",\n \"sqlite3\": \"^5.1.7\"\n }\n}<\/code><\/pre>\n4\/ Set up Categorical and SQLite<\/strong><\/p>\nSQLite<\/strong> is a light-weight, file-based relational database engine that shops all of your information in a single, transportable file, eliminating the necessity for a separate server.<\/p>\nCategorical<\/strong> is a minimal, versatile internet utility framework for Node.js that simplifies the constructing of APIs and internet servers by way of routing and middleware.<\/p>\nWe will set up each utilizing the command beneath.<\/p>\n
$ npm set up specific sqlite3<\/code><\/pre>\nNow, we are able to begin creating our code. For this undertaking, we\u2019ll want 4 code information: an index.html file, a server.js file, a shopper.js file, and a script.js file.\u00a0<\/p>\n
Let\u2019s undergo every of them step-by-step.<\/p>\n
1) shopper\/index.html<\/strong><\/p>\n\n\n\n Gross sales Efficiency Dashboard<\/title>\n\n\n <div class=\""container"\">\n \n \n\n \n \n\n \n <h2 class=\""mt-5"\">Key Metrics<\/h2> \n \n\n \n <p>\n <label for=\""chart-type-selector"\">Choose Chart:<\/label>\n <select id=\""chart-type-selector"\" class=\""form-control\" mb-3=\"\">\n <option value=\""revenueOverTime"\">Income Over Time<\/option>\n <option value=\""revenueByCategory"\">Income By Class<\/option>\n <option value=\""topProducts"\">Prime Merchandise by Income<\/option>\n <\/select>\n <canvas id=\""chart-canvas"\"\/>\n <\/p>\n\n \n \n <\/div>\n\n \n <template id="RrVxxa9vdPTmk23ZzcA4"></template>\n <template id="EezHcjRqxqSYoxiuxPJV"></template>\n <template id="evYEALEjdLTuGk9pFjUo"></template>\n <template id="4E69XqFLZxHVCocSgblj"></template>\n <template id="ZdmFodbalSIcswlqePeR"></template>\n\n<\/code><\/pre>\n<p class=\"wp-block-paragraph\">This HTML file establishes the essential visible components of our Gross sales Efficiency Dashboard, together with interactive filters for date and class, a piece displaying key gross sales metrics, a dropdown menu to pick chart sorts, and a desk for uncooked information.\u00a0<\/p>\n<p class=\"wp-block-paragraph\"><strong>Bootstrap <\/strong>is used for styling. <strong>Flatpickr <\/strong>is used for date inputs. <strong>Chart.js<\/strong> is used for visualisations, and<strong> DataTables <\/strong>is used for tabular show. Interactivity is dealt with by an exterior <strong>script.js<\/strong> file, which we\u2019ll look at shortly.<\/p>\n<p class=\"wp-block-paragraph\">Bootstrap is a well-liked front-end framework, initially developed by Twitter, that helps you construct responsive and visually constant internet interfaces extra simply and rapidly.<\/p>\n<p class=\"wp-block-paragraph\">DataTables is a jQuery-based plugin that enhances normal HTML <strong><\/p>\n<table> components, reworking them into absolutely interactive, feature-rich tables.<\/p>\n<p class=\"wp-block-paragraph\">Flatpickr is a light-weight, customizable JavaScript date and time picker. It lets customers choose dates (and optionally occasions) from a smooth pop-up calendar as a substitute of typing them manually.<\/p>\n<p class=\"wp-block-paragraph\">Chart.js is a straightforward but highly effective JavaScript library for creating interactive, animated charts in internet purposes utilizing the <canvas> factor.<\/canvas><\/p>\n<p class=\"wp-block-paragraph\"><strong>2) shopper\/model.css<\/strong><\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">\/* shopper\/model.css *\/\nphysique {\n background-color: #f8f9fa;\n font-family: 'Arial', sans-serif;\n}\n\nh1 {\n text-align: middle; \/* Heart the heading *\/\n margin-top: 20px; \/* Add spacing above the heading *\/\n margin-bottom: 40px; \/* Add spacing beneath the heading *\/\n}\n\n.container .filters {\n margin-top: 20px;\n margin-bottom: 60px !essential; \/* Guarantee bigger spacing between filters and Key Metrics *\/\n}\n\n.container #key-metrics {\n margin-top: 40px !essential; \/* Further spacing above the Key Metrics part *\/\n margin-bottom: 20px; \/* Elective spacing beneath *\/\n}\n\n.key-metrics div {\n margin: 10px 0;\n padding: 10px;\n background-color: #f4f4f4;\n border: 1px stable #ccc;\n border-radius: 4px;\n}\n\n\/* Repair for DataTables Pagination Spacing *\/\n.dataTables_wrapper .dataTables_paginate {\n text-align: middle;\n margin-top: 10px;\n}\n\n.dataTables_wrapper .dataTables_paginate .paginate_button {\n margin: 0 12px;\n padding: 5px 10px;\n border: 1px stable #ddd;\n border-radius: 4px;\n background-color: #f9f9f9;\n shade: #007bff;\n text-decoration: none;\n show: inline-block;\n}\n\n.dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n background-color: #007bff;\n shade: #fff;\n border: 1px stable #007bff;\n}\n\n.dataTables_wrapper .dataTables_paginate .paginate_button.present {\n font-weight: daring;\n shade: #fff;\n background-color: #007bff;\n border-color: #007bff;\n}<\/code><\/pre>\n<p class=\"wp-block-paragraph\">We use a cascading model sheet (CSS) to model the essential visible elements of our dashboard, for instance, button and textual content colors, spacing between components, and so forth.\u00a0<\/p>\n<p class=\"wp-block-paragraph\">The model.css file offers the dashboard its look and total look. It\u2019s a clear, gentle theme with ample spacing and structure changes for readability and readability. The model.css file additionally customises the looks of DataTables\u2019 pagination buttons, making them extra user-friendly and visually in step with Bootstrap\u2019s design.<\/p>\n<p class=\"wp-block-paragraph\"><strong>3) server\/server.js<\/strong><\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const specific = require('specific');\nconst sqlite3 = require('sqlite3').verbose();\nconst path = require('path');\nconst app = specific();\nconst PORT = 3000;\n\n\/\/ Full path to your SQLite database\nconst DB_PATH = \"C:Customersthomatasksmy-dashboardsales_data.db\";\n\n\/\/ Serve static information from the shopper listing\napp.use(specific.static(path.be a part of(__dirname, '..', 'shopper')));\n\n\/\/ Path to fetch information from SQLite database\napp.get('\/information', (req, res) => {\n const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {\n if (err) {\n console.error(\"Error connecting to database:\", err.message);\n res.standing(500).json({ error: \"Database connection failed\" });\n return;\n }\n });\n\n \/\/ Question the database\n const question = \"SELECT * FROM gross sales;\"; \/\/ Exchange 'gross sales' along with your desk title\n db.all(question, [], (err, rows) => {\n if (err) {\n console.error(\"Error operating question:\", err.message);\n res.standing(500).json({ error: \"Question failed\" });\n } else {\n res.json(rows); \/\/ Ship the question end result as JSON\n }\n });\n\n db.shut((err) => {\n if (err) {\n console.error(\"Error closing database:\", err.message);\n }\n });\n});\n\n\/\/ Catch-all path to serve the primary HTML file\napp.get('*', (req, res) => {\n res.sendFile(path.be a part of(__dirname, '..', 'shopper', 'index.html'));\n});\n\n\/\/ Begin the server\napp.pay attention(PORT, () => {\n console.log(`Server operating at http:\/\/localhost:${PORT}`);\n});<\/code><\/pre>\n<p class=\"wp-block-paragraph\">This Node.js script incorporates the JavaScript code that units up a primary Categorical server that powers the Gross sales Efficiency Dashboard. It does two foremost issues:<\/p>\n<ol class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Serves static information (like HTML, CSS, and JS) from the shopper subfolder so the frontend hundreds within the browser.<\/li>\n<li class=\"wp-block-list-item\">Gives a<strong> \/information<\/strong> endpoint that reads from a neighborhood SQLite database (sales_data.db) and returns your complete gross sales desk as JSON, enabling dynamic information visualisations and tables on the frontend.<\/li>\n<\/ol>\n<p class=\"wp-block-paragraph\"><strong>4) shopper\/script.js<\/strong><\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">let chartInstance = null; \/\/ World variable to retailer the present Chart.js occasion\n\n\/\/ Wait till the DOM is absolutely loaded\ndoc.addEventListener('DOMContentLoaded', perform () {\n \/\/ Fetch gross sales information from the backend API\n fetch('\/information')\n .then((response) => response.json())\n .then((information) => {\n \/\/ Deal with case the place no information is returned\n if (!information || information.size === 0) {\n const app = doc.getElementById('app');\n if (app) {\n app.innerHTML = \"<p>No information obtainable.<\/p>\";\n }\n return;\n }\n\n \/\/ Initialize filters and dashboard content material\n setupFilters(information);\n initializeDashboard(information);\n\n \/\/ Re-render charts when chart kind modifications\n doc.getElementById('chart-type-selector').onchange = () => filterAndRenderData(information);\n })\n .catch((error) => {\n \/\/ Deal with fetch error\n console.error('Error fetching information:', error);\n const app = doc.getElementById('app');\n if (app) {\n app.innerHTML = \"<p>Didn't fetch information.<\/p>\";\n }\n });\n});\n\n\/\/ Initialize Flatpickr date pickers and class filter\nperform setupFilters(information) {\n \/\/ Convert date strings to JS Date objects\n const dates = information.map((merchandise) => new Date(merchandise.order_date.break up('\/').reverse().be a part of('-')));\n const minDate = new Date(Math.min(...dates));\n const maxDate = new Date(Math.max(...dates));\n\n \/\/ Configure begin date picker\n flatpickr(\"#start-date\", {\n defaultDate: minDate.toISOString().slice(0, 10),\n dateFormat: \"Y-m-d\",\n altInput: true,\n altFormat: \"F j, Y\",\n onChange: perform () {\n filterAndRenderData(information);\n },\n });\n\n \/\/ Configure finish date picker\n flatpickr(\"#end-date\", {\n defaultDate: maxDate.toISOString().slice(0, 10),\n dateFormat: \"Y-m-d\",\n altInput: true,\n altFormat: \"F j, Y\",\n onChange: perform () {\n filterAndRenderData(information);\n },\n });\n\n \/\/ Arrange class dropdown change listener\n const categoryFilter = doc.getElementById('category-filter');\n if (categoryFilter) {\n categoryFilter.onchange = () => filterAndRenderData(information);\n }\n}\n\n\/\/ Initialize dashboard after filters are set\nperform initializeDashboard(information) {\n populateCategoryFilter(information); \/\/ Populate class dropdown\n filterAndRenderData(information); \/\/ Preliminary render with all information\n}\n\n\/\/ Apply filters and replace key metrics, chart, and desk\nperform filterAndRenderData(information) {\n const chartType = doc.getElementById('chart-type-selector').worth;\n const startDate = doc.getElementById('start-date')._flatpickr.selectedDates[0];\n const endDate = doc.getElementById('end-date')._flatpickr.selectedDates[0];\n const selectedCategory = doc.getElementById('category-filter').worth;\n\n \/\/ Filter information by date and class\n const filteredData = information.filter((merchandise) => );\n\n updateKeyMetrics(filteredData); \/\/ Replace metrics like income and orders\n drawChart(filteredData, 'chart-canvas', chartType); \/\/ Render chart\n populateDataTable(filteredData); \/\/ Replace desk\n}\n\n\/\/ Replace dashboard metrics (complete income, order rely, and so forth.)\nperform updateKeyMetrics(information) {\n const totalRevenue = information.cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0);\n const totalOrders = information.size;\n const averageOrderValue = totalOrders > 0 ? totalRevenue \/ totalOrders : 0;\n\n \/\/ Calculate complete income per class to seek out prime class\n const revenueByCategory = information.cut back((acc, merchandise) => , {});\n\n \/\/ Decide class with highest complete income\n const topCategory = Object.keys(revenueByCategory).cut back(\n (a, b) => (revenueByCategory[a] > revenueByCategory[b] ? a : b),\n \"None\"\n );\n\n \/\/ Show metrics within the DOM\n doc.getElementById('total-revenue').textContent = `$${totalRevenue.toFixed(2)}`;\n doc.getElementById('total-orders').textContent = `${totalOrders}`;\n doc.getElementById('average-order-value').textContent = `$${averageOrderValue.toFixed(2)}`;\n doc.getElementById('top-category').textContent = topCategory || 'None';\n}\n\n\/\/ Draw the chosen chart kind utilizing Chart.js\nperform drawChart(information, elementId, chartType) {\n const ctx = doc.getElementById(elementId).getContext('2nd');\n\n \/\/ Destroy earlier chart if one exists\n if (chartInstance) {\n chartInstance.destroy();\n }\n\n change (chartType) {\n case 'revenueOverTime':\n \/\/ Line chart displaying income by order date\n chartInstance = new Chart(ctx, {\n kind: 'line',\n information: {\n labels: information.map((merchandise) => merchandise.order_date),\n datasets: [{\n label: 'Revenue Over Time',\n data: data.map((item) => parseFloat(item.total)),\n fill: false,\n borderColor: 'rgb(75, 192, 192)',\n tension: 0.1,\n }],\n },\n choices: {\n scales: {\n y: { beginAtZero: true },\n },\n },\n });\n break;\n\n case 'revenueByCategory':\n \/\/ Bar chart displaying complete income per class\n const classes = [...new Set(data.map((item) => item.categories))];\n const revenueByCategory = classes.map((class) => {\n return {\n class,\n income: information\n .filter((merchandise) => merchandise.classes === class)\n .cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0),\n };\n });\n chartInstance = new Chart(ctx, {\n kind: 'bar',\n information: {\n labels: revenueByCategory.map((merchandise) => merchandise.class),\n datasets: [{\n label: 'Revenue by Category',\n data: revenueByCategory.map((item) => item.revenue),\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n }],\n },\n choices: {\n scales: {\n y: { beginAtZero: true },\n },\n },\n });\n break;\n\n case 'topProducts':\n \/\/ Horizontal bar chart displaying prime 10 merchandise by income\n const productRevenue = information.cut back((acc, merchandise) => 0) + parseFloat(merchandise.complete);\n return acc;\n , {});\n\n const topProducts = Object.entries(productRevenue)\n .kind((a, b) => b[1] - a[1])\n .slice(0, 10);\n\n chartInstance = new Chart(ctx, {\n kind: 'bar',\n information: {\n labels: topProducts.map((merchandise) => merchandise[0]), \/\/ Product names\n datasets: [{\n label: 'Top Products by Revenue',\n data: topProducts.map((item) => item[1]), \/\/ Income\n backgroundColor: 'rgba(54, 162, 235, 0.8)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n }],\n },\n choices: {\n indexAxis: 'y', \/\/ Horizontal bars\n scales: {\n x: { beginAtZero: true },\n },\n },\n });\n break;\n }\n}\n\n\/\/ Show filtered information in a DataTable\nperform populateDataTable(information) {\n const tableElement = $('#data-table');\n\n \/\/ Destroy present desk if it exists\n if ($.fn.DataTable.isDataTable(tableElement)) {\n tableElement.DataTable().clear().destroy();\n }\n\n \/\/ Create a brand new DataTable with related columns\n tableElement.DataTable({\n information: information.map((merchandise) => [\n item.order_id,\n item.order_date,\n item.customer_id,\n item.product_names,\n item.categories,\n `$${parseFloat(item.total).toFixed(2)}`,\n ]),\n columns: [\n { title: \"Order ID\" },\n { title: \"Order Date\" },\n { title: \"Customer ID\" },\n { title: \"Product\" },\n { title: \"Category\" },\n { title: \"Total\" },\n ],\n });\n}\n\n\/\/ Populate the class filter dropdown with obtainable classes\nperform populateCategoryFilter(information) {\n const categoryFilter = doc.getElementById('category-filter');\n categoryFilter.innerHTML = '';\n categoryFilter.appendChild(new Choice('All Classes', 'all', true, true));\n\n \/\/ Extract distinctive classes\n const classes = new Set(information.map((merchandise) => merchandise.classes));\n classes.forEach((class) => {\n categoryFilter.appendChild(new Choice(class, class));\n });\n}<\/code><\/pre>\n<p class=\"wp-block-paragraph\">It\u2019s our most complex code file, nevertheless it has to do loads. This JavaScript file powers the interactivity and information visualisation for the Gross sales Efficiency Dashboard. In brief, it\u00a0\u2026<\/p>\n<p class=\"wp-block-paragraph\"><strong>1\/ Fetches gross sales information<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">When the web page hundreds (<code>DOMContentLoaded<\/code>), it calls a backend API on the \/information endpoint.<\/li>\n<li class=\"wp-block-list-item\">If no information is returned, a \u201cNo information obtainable\u201d message is displayed.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>2\/ Units up filters<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Makes use of <strong>Flatpickr<\/strong> date pickers to decide on a begin and finish date based mostly on the dataset\u2019s min\/max order dates.<\/li>\n<li class=\"wp-block-list-item\">Provides a <strong>class dropdown, permitting customers to<\/strong> filter by product class.<\/li>\n<li class=\"wp-block-list-item\">Provides a <strong>chart kind selector<\/strong> to change between totally different chart visualisations.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>3\/ Initialises the dashboard<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Populates the class filter with obtainable classes.<\/li>\n<li class=\"wp-block-list-item\">Runs the primary render with the complete dataset.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>4\/ Applies filters and re-renders<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Every time the consumer modifications a filter (date vary, class, or chart kind), it:\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Filters the dataset by date vary and class.<\/li>\n<li class=\"wp-block-list-item\">Updates <strong>key metrics<\/strong>: complete income, variety of orders, common order worth, and prime income class.<\/li>\n<li class=\"wp-block-list-item\">Redraws the chosen <strong>Chart.js chart<\/strong>.<\/li>\n<li class=\"wp-block-list-item\">Refreshes the <strong>information desk<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>5\/ Attracts charts with Chart.js<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><strong>Income Over Time<\/strong> \u2192 Line chart displaying income developments by date.<\/li>\n<li class=\"wp-block-list-item\"><strong>Income by Class<\/strong> \u2192 Bar chart aggregating complete income per class.<\/li>\n<li class=\"wp-block-list-item\"><strong>Prime Merchandise<\/strong> \u2192 Horizontal bar chart displaying the highest 10 merchandise by income.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>6\/ Shows tabular information<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Makes use of <strong>DataTables (<\/strong><span style=\"margin: 0px; padding: 0px;\"><strong>a jQuery plugin)<\/strong>\u00a0to render a desk of filtered orders,<\/span> with columns for order ID, date, buyer ID, product, class, and complete.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>7\/ Retains the UI in sync<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Destroys and recreates charts\/tables when filters change to keep away from duplicates.<\/li>\n<li class=\"wp-block-list-item\">Retains metrics, charts, and tables in step with the lively filters.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Working our dashboard<\/h2>\n<p class=\"wp-block-paragraph\">Now that now we have all our code sorted, it\u2019s time to run the dashboard, so go to the <strong>server<\/strong> subfolder and kind within the following command.<\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\">$ node server.js<\/code><\/pre>\n<p class=\"wp-block-paragraph\">You\u2019ll get a response to the above command, one thing like,<\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\">Server operating at http:\/\/localhost:3000<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Open an internet browser and go to <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/localhost:3000\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>http:\/\/localhost:3000<\/strong><\/a>. It's best to see your dashboard populated with information from the SQLite database, as proven within the picture beneath.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/09\/image-126-867x1024.png\" alt=\"\" class=\"wp-image-620479\"\/><figcaption class=\"wp-element-caption\">Picture by Creator<\/figcaption><\/figure>\n<p class=\"wp-block-paragraph\">All of the filters, chart choice, and so forth, ought to work as marketed.<\/p>\n<h2 class=\"wp-block-heading\">Abstract<\/h2>\n<p class=\"wp-block-paragraph\">On this article, I\u2019ve walked you thru creating a totally purposeful, interactive gross sales efficiency dashboard utilizing core internet applied sciences\u2014HTML, CSS, JavaScript, Node.js, Categorical, and a neighborhood SQLite database.<\/p>\n<p class=\"wp-block-paragraph\">We mentioned the tech stack & setup. i.e.<\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><strong>Backend:<\/strong> Node.js, Categorical, SQLite<\/li>\n<li class=\"wp-block-list-item\"><strong>Frontend:<\/strong> HTML, Bootstrap (for structure), Chart.js (for charts), Flatpickr (date pickers), DataTables (for tabular information)<\/li>\n<li class=\"wp-block-list-item\">Folder construction as proven beneath.<\/li>\n<\/ul>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\">my-dashboard\/\n\u251c\u2500\u2500 shopper\/\n\u2502 \u251c\u2500\u2500 index.html\n\u2502 \u251c\u2500\u2500 model.css\n\u2502 \u2514\u2500\u2500 script.js\n\u2514\u2500\u2500 server\/\n \u2514\u2500\u2500 server.js<\/code><\/pre>\n<p class=\"wp-block-paragraph\">I confirmed you learn how to create and populate a SQLite database in code that we might use because the supply information for our dashboard. We additionally mentioned the atmosphere setup and each the front-end and back-end improvement processes, and briefly touched on our information dashboard performance.<\/p>\n<p class=\"wp-block-paragraph\">Lastly, I walked you thru and defined intimately the 4 code information we wanted to create, after which confirmed you learn how to run the dashboard in a browser.<\/p>\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dotted\" style=\"margin-top:var(--wp--preset--spacing--64);margin-bottom:var(--wp--preset--spacing--64)\"\/>\n<div class=\"tds-cta-box\">\n<p>In the direction of Knowledge Science is a neighborhood publication. Submit your insights to achieve our international viewers and earn by way of the TDS Creator Cost Program.<\/p>\n<p>\t<br \/>\n\t<a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/towardsdatascience.com\/questions-96667b06af5\/\" class=\"tds-cta-btn\">Write for TDS<\/a>\n<\/div>\n<p><\/p>\n<div class=\"wp-block-group has-surface-secondary-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-heading-3-font-size\">Associated Articles<\/h2>\n<div class=\"wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow\">\n<ul class=\"wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-862d62c5 wp-block-post-template-is-layout-grid is-entire-card-clickable\">\n<li class=\"wp-block-post post-4713 post type-post status-publish format-standard has-post-thumbnail hentry category-artificial-intelligence category-data-science category-programming category-software-engineering tag-artificial-intelligence tag-data-science tag-programming tag-python tag-software-engineering\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<figure style=\"aspect-ratio:16\/9;width:100%;\" class=\"wp-block-post-featured-image\"><img loading=\"lazy\" width=\"1262\" height=\"394\" src=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2024\/03\/1WjWCJiFO9C_cKCiAZFidAg.png\" class=\"attachment-post-thumbnail size-post-thumbnail has-transparency wp-post-image\" alt=\"Building Hash Table\" style=\"--dominant-color: #eceaea;width:100%;height:100%;object-fit:cover;\" decoding=\"async\" srcset=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2024\/03\/1WjWCJiFO9C_cKCiAZFidAg.png 1262w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2024\/03\/1WjWCJiFO9C_cKCiAZFidAg-300x94.png 300w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2024\/03\/1WjWCJiFO9C_cKCiAZFidAg-1024x320.png 1024w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2024\/03\/1WjWCJiFO9C_cKCiAZFidAg-768x240.png 768w\" sizes=\"auto, (max-width: 1262px) 100vw, 1262px\" data-has-transparency=\"true\" data-dominant-color=\"eceaea\"\/><\/figure>\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Three widespread Python methods make your program sooner, I'll clarify the mechanisms <\/p>\n<\/div>\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-17c695da wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-7489e3c2 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-text-secondary-color has-text-color has-link-color wp-elements-4287f74efd571ebaf333140d25a0dab7 is-nowrap is-layout-flex wp-container-core-group-is-layout-a442b01b wp-block-group-is-layout-flex\">\n<p><time datetime=\"2024-03-24T15:26:24-05:00\">March 24, 2024<\/time><\/p>\n<p>\n\t8 min learn<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5039 post type-post status-publish format-standard has-post-thumbnail hentry category-data-science category-programming tag-data-science tag-programming tag-python tag-tds-features tag-the-variable\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<figure style=\"aspect-ratio:16\/9;width:100%;\" class=\"wp-block-post-featured-image\"><img loading=\"lazy\" width=\"2560\" height=\"1707\" src=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-scaled.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image\" alt=\"Photo by Fleur on Unsplash\" style=\"--dominant-color: #7a685d;width:100%;height:100%;object-fit:cover;\" decoding=\"async\" srcset=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-scaled.jpg 2560w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-300x200.jpg 300w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-1024x683.jpg 1024w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-768x512.jpg 768w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-1536x1024.jpg 1536w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/0Toxf8BG4AYRs_hYM-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" data-has-transparency=\"false\" data-dominant-color=\"7a685d\"\/><\/figure>\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Our weekly collection of must-read Editors\u2019 Picks and authentic options <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5642 post type-post status-publish format-standard has-post-thumbnail hentry category-data-science category-programming tag-algorithms tag-data-science tag-image-processing tag-programming tag-python\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<figure style=\"aspect-ratio:16\/9;width:100%;\" class=\"wp-block-post-featured-image\"><img width=\"3123\" height=\"1859\" src=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw.png\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image\" alt=\"Objects detection with YOLO, Image by author\" style=\"--dominant-color: #7e6e59;width:100%;height:100%;object-fit:cover;\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw.png 3123w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw-300x179.png 300w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw-1024x610.png 1024w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw-768x457.png 768w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw-1536x914.png 1536w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1qO5vNCiEz9UrEbeV21CIUw-2048x1219.png 2048w\" sizes=\"auto, (max-width: 3123px) 100vw, 3123px\" data-has-transparency=\"false\" data-dominant-color=\"7e6e59\"\/><\/figure>\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Let\u2019s journey 8 years again in time <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5684 post type-post status-publish format-standard has-post-thumbnail hentry category-artificial-intelligence category-data-science category-machine-learning category-programming tag-artificial-intelligence tag-data-science tag-machine-learning tag-programming tag-python\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<figure style=\"aspect-ratio:16\/9;width:100%;\" class=\"wp-block-post-featured-image\"><img width=\"2560\" height=\"1706\" src=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-scaled.jpeg\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image\" alt=\"Photo by Szabolcs Toth on Unsplash\" style=\"--dominant-color: #65714b;width:100%;height:100%;object-fit:cover;\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-scaled.jpeg 2560w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-300x200.jpeg 300w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-1024x683.jpeg 1024w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-768x512.jpeg 768w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-1536x1024.jpeg 1536w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1slqCTKnUpqKDQTCsAAqDag-2048x1365.jpeg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" data-has-transparency=\"false\" data-dominant-color=\"65714b\"\/><\/figure>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5687 post type-post status-publish format-standard has-post-thumbnail hentry category-data-science category-data-visualization category-programming tag-data-science tag-data-visualization tag-programming\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<figure style=\"aspect-ratio:16\/9;width:100%;\" class=\"wp-block-post-featured-image\"><img width=\"2560\" height=\"1536\" src=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-scaled.jpeg\" class=\"attachment-post-thumbnail size-post-thumbnail not-transparent wp-post-image\" alt=\"\" style=\"--dominant-color: #8a8989;width:100%;height:100%;object-fit:cover;\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-scaled.jpeg 2560w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-300x180.jpeg 300w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-1024x614.jpeg 1024w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-768x461.jpeg 768w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-1536x921.jpeg 1536w, https:\/\/towardsdatascience.com\/wp-content\/uploads\/2023\/06\/1u4TushSCddFge6IErZx39w@2x-2048x1229.jpeg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" data-has-transparency=\"false\" data-dominant-color=\"8a8989\"\/><\/figure>\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Recreating classes discovered from Cole Nussbaumer Knaflic\u2019s e-book in Python utilizing Matplotlib <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5711 post type-post status-publish format-standard has-post-thumbnail hentry category-data-science category-programming tag-data-science tag-debugging tag-programming tag-python tag-software-development\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Use Python Logging like a Professional <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li class=\"wp-block-post post-5833 post type-post status-publish format-standard has-post-thumbnail hentry category-javascript category-programming category-technology tag-deep-dives tag-go tag-javascript tag-programming tag-technology\">\n<div class=\"wp-block-group alignwide is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-0b94b808 wp-block-group-is-layout-flex wp-block-null\">\n<div class=\"wp-block-group alignwide is-style-default is-vertical is-layout-flex wp-container-core-group-is-layout-4f9af663 wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--10);padding-right:0;padding-left:0\">\n<div class=\"has-link-color wp-elements-9b2da9e78c2e95c41dab8b5a7bd89187 wp-block-post-excerpt has-text-color has-text-secondary-color\">\n<p class=\"wp-block-post-excerpt__excerpt\">Tutorial on learn how to use WebSockets to construct real-time APIs in Go <\/p>\n<\/div>\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-17c695da wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-7489e3c2 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group has-text-secondary-color has-text-color has-link-color wp-elements-4287f74efd571ebaf333140d25a0dab7 is-nowrap is-layout-flex wp-container-core-group-is-layout-a442b01b wp-block-group-is-layout-flex\">\n<p><time datetime=\"2022-11-22T06:23:15-05:00\">November 22, 2022<\/time><\/p>\n<p>\n\t33 min learn<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<p><br \/>\n<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" height=\"1\" width=\"1\" style=\"display:none;\" alt=\"\" src=\"https:\/\/px.ads.linkedin.com\/collect\/?pid=7404572&fmt=gif\"\/><br \/>\n<br \/>\n<\/table>\n<p><\/strong><\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>dashboard to your clients, shoppers, or fellow employees is changing into an important a part of the talent set required by software program builders, information scientists, ML practitioners, and information engineers. Even if you happen to work totally on back-end processing, the information you\u2019re processing normally must be \u201csurfaced\u201d to customers in some unspecified time […]<\/p>\n","protected":false},"author":2,"featured_media":7317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[73,1147,5701,157,2092,443],"class_list":["post-7315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-machine-learning","tag-build","tag-css","tag-dashboard","tag-data","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/7315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7315"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/7315\/revisions"}],"predecessor-version":[{"id":7316,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/7315\/revisions\/7316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/7317"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-05-14 18:05:11 UTC -->
![\"\"](\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/09\/image-125.png\")