@@ -14,20 +14,20 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
1414 </div>
1515 <div class="images">
1616 <div class="circle-bg"></div>
17- <img src="/images /visualization/bar-chart.svg" class="visualization-hero-image" alt="Thingsboard dashboards and menus">
18- <img src="/images /visualization/cold_water_usage.webp" class="visualization-hero-image-2" alt="Cold water usage value-chart card">
19- <img src="/images /visualization/route_history.webp" class="visualization-hero-image-3" alt="Trip animation map">
20- <img src="/images /visualization/moisture_himidity.webp" class="visualization-hero-image-4" alt="Moisture and humidity line chart">
21- <img src="/images /visualization/energy_sources.webp" class="visualization-hero-image-5" alt="Energy source pie chart">
22- <img src="/images /visualization/slider.webp" class="visualization-hero-image-6" alt="Slider widget">
17+ <img src="https://img.thingsboard.io /visualization/bar-chart.svg" class="visualization-hero-image" alt="Thingsboard dashboards and menus">
18+ <img src="https://img.thingsboard.io /visualization/cold_water_usage.webp" class="visualization-hero-image-2" alt="Cold water usage value-chart card">
19+ <img src="https://img.thingsboard.io /visualization/route_history.webp" class="visualization-hero-image-3" alt="Trip animation map">
20+ <img src="https://img.thingsboard.io /visualization/moisture_himidity.webp" class="visualization-hero-image-4" alt="Moisture and humidity line chart">
21+ <img src="https://img.thingsboard.io /visualization/energy_sources.webp" class="visualization-hero-image-5" alt="Energy source pie chart">
22+ <img src="https://img.thingsboard.io /visualization/slider.webp" class="visualization-hero-image-6" alt="Slider widget">
2323 </div>
2424 </section>
2525 <section class="visualization-definition">
2626 <div class="title">
2727 <h2>What is data visualization in IoT?</h2>
2828 <p>IoT Data visualization is the process of turning raw device data into visual formats like charts, graphs, and gauges to help users quickly understand patterns and trends. In ThingsBoard, you can create real-time dashboards using a variety of widgets—charts, tables, SCADA symbols, and more—for monitoring and control. Dashboards support responsive layouts, navigation flows, and can be easily shared with customers.</p>
2929 </div>
30- <img data-src="/images/ visualization/visualization-scheme.svg" src="/images /visualization/visualization-scheme.svg" class="svg-animation" alt="Visualization scheme">
30+ <img data-src="https://img.thingsboard.io/ visualization/visualization-scheme.svg" src="https://img.thingsboard.io /visualization/visualization-scheme.svg" class="svg-animation" alt="Visualization scheme">
3131 </section>
3232 <section class="visualization-implementation">
3333 <h2>How data visualization is implemented in ThingsBoard</h2>
@@ -39,7 +39,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
3939 <div class="row">
4040 <div class="card">
4141 <div class="image-container">
42- <img class="svg-animation" data-src="/images/ visualization/cards.svg" src="/images /visualization/cards.svg" alt="Card widgets">
42+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/cards.svg" src="https://img.thingsboard.io /visualization/cards.svg" alt="Card widgets">
4343 </div>
4444 <div class="content">
4545 <h4>Cards</h4>
@@ -48,7 +48,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
4848 </div>
4949 <div class="card">
5050 <div class="image-container">
51- <img class="svg-animation" data-src="/images/ visualization/charts.svg" src="/images /visualization/charts.svg" alt="Charts widgets">
51+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/charts.svg" src="https://img.thingsboard.io /visualization/charts.svg" alt="Charts widgets">
5252 </div>
5353 <div class="content">
5454 <h4>Charts</h4>
@@ -59,7 +59,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
5959 <div class="row">
6060 <div class="card">
6161 <div class="image-container">
62- <img class="svg-animation" data-src="/images/ visualization/control.svg" src="/images /visualization/control.svg" alt="Control and status widgets">
62+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/control.svg" src="https://img.thingsboard.io /visualization/control.svg" alt="Control and status widgets">
6363 </div>
6464 <div class="content">
6565 <h4>Control & Status widgets</h4>
@@ -68,7 +68,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
6868 </div>
6969 <div class="card">
7070 <div class="image-container">
71- <img class="svg-animation" data-src="/images/ visualization/gauges.svg" src="/images /visualization/gauges.svg" alt="Gauges widgets">
71+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/gauges.svg" src="https://img.thingsboard.io /visualization/gauges.svg" alt="Gauges widgets">
7272 </div>
7373 <div class="content">
7474 <h4>Gauges</h4>
@@ -88,7 +88,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
8888 <div class="row">
8989 <div class="card">
9090 <div class="image-container">
91- <img class="svg-animation" data-src="/images/ visualization/SCADA-high-perf-section.svg" src="/images /visualization/SCADA-high-perf-section.svg" alt="SCADA high performance widgets">
91+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/SCADA-high-perf-section.svg" src="https://img.thingsboard.io /visualization/SCADA-high-perf-section.svg" alt="SCADA high performance widgets">
9292 </div>
9393 <div class="content">
9494 <h4>High-performance</h4>
@@ -97,7 +97,7 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
9797 </div>
9898 <div class="card">
9999 <div class="image-container">
100- <img class="svg-animation" data-src="/images/ visualization/SCADA-traditional-section.svg" src="/images /visualization/SCADA-traditional-section.svg" alt="SCADA traditional widgets">
100+ <img class="svg-animation" data-src="https://img.thingsboard.io/ visualization/SCADA-traditional-section.svg" src="https://img.thingsboard.io /visualization/SCADA-traditional-section.svg" alt="SCADA traditional widgets">
101101 </div>
102102 <div class="content">
103103 <h4>Traditional</h4>
@@ -117,9 +117,9 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
117117 <div class="row">
118118 <div class="card">
119119 <div class="image-container solution-template">
120- <img src="/images /visualization/placeholder.png" alt="placeholder">
121- <img class="al1" src="/images /visualization/assisted-living-1.webp" alt="Assisted living widgets">
122- <img class="al2" src="/images /visualization/assisted-living-2.webp" alt="Assisted living widgets">
120+ <img src="https://img.thingsboard.io /visualization/placeholder.png" alt="placeholder">
121+ <img class="al1" src="https://img.thingsboard.io /visualization/assisted-living-1.webp" alt="Assisted living widgets">
122+ <img class="al2" src="https://img.thingsboard.io /visualization/assisted-living-2.webp" alt="Assisted living widgets">
123123 </div>
124124 <div class="content">
125125 <h4>Health care</h4>
@@ -128,9 +128,9 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
128128 </div>
129129 <div class="card">
130130 <div class="image-container solution-template">
131- <img src="/images /visualization/placeholder.png" alt="placeholder">
132- <img class="d1" src="/images /visualization/energy_1.webp" alt="Energy SCADA widgets">
133- <img class="d2" src="/images /visualization/energy_2.webp" alt="Energy SCADA widgets">
131+ <img src="https://img.thingsboard.io /visualization/placeholder.png" alt="placeholder">
132+ <img class="d1" src="https://img.thingsboard.io /visualization/energy_1.webp" alt="Energy SCADA widgets">
133+ <img class="d2" src="https://img.thingsboard.io /visualization/energy_2.webp" alt="Energy SCADA widgets">
134134 </div>
135135 <div class="content">
136136 <h4>SCADA Energy management</h4>
@@ -150,11 +150,11 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
150150 <div class="row no-margin">
151151 <div class="card image-only">
152152 <div class="image-container layouts no-border">
153- <img src="/images /visualization/placeholder.png" alt="placeholder">
154- <img class="layout1 large" src="/images /visualization/layouts_macbook.webp" alt="Macbook layout">
155- <img class="layout2 large" src="/images /visualization/layouts_iphone.webp" alt="iPhone layout">
156- <img class="layout3 large" src="/images /visualization/layouts_ipad.webp" alt="iPad layout">
157- <img class="layout small" src="/images /visualization/layouts_image.webp" alt="Layouts">
153+ <img src="https://img.thingsboard.io /visualization/placeholder.png" alt="placeholder">
154+ <img class="layout1 large" src="https://img.thingsboard.io /visualization/layouts_macbook.webp" alt="Macbook layout">
155+ <img class="layout2 large" src="https://img.thingsboard.io /visualization/layouts_iphone.webp" alt="iPhone layout">
156+ <img class="layout3 large" src="https://img.thingsboard.io /visualization/layouts_ipad.webp" alt="iPad layout">
157+ <img class="layout small" src="https://img.thingsboard.io /visualization/layouts_image.webp" alt="Layouts">
158158 </div>
159159 </div>
160160 </div>
@@ -181,10 +181,10 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
181181 <div class="row no-margin">
182182 <div class="card image-only">
183183 <div class="image-container customers no-border">
184- <img src="/images /visualization/placeholder.png" alt="placeholder">
185- <img class="customerA" src="/images /visualization/customer_a.webp" alt="Customer A dashboard">
186- <img class="customerB" src="/images /visualization/customer_b.webp" alt="Customer B dashboard">
187- <img class="customerC" src="/images /visualization/customer_c.webp" alt="Customer C dashboard">
184+ <img src="https://img.thingsboard.io /visualization/placeholder.png" alt="placeholder">
185+ <img class="customerA" src="https://img.thingsboard.io /visualization/customer_a.webp" alt="Customer A dashboard">
186+ <img class="customerB" src="https://img.thingsboard.io /visualization/customer_b.webp" alt="Customer B dashboard">
187+ <img class="customerC" src="https://img.thingsboard.io /visualization/customer_c.webp" alt="Customer C dashboard">
188188 </div>
189189 </div>
190190 </div>
@@ -211,9 +211,9 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
211211 <div class="row no-margin">
212212 <div class="card image-only">
213213 <div class="image-container custom no-border">
214- <img class="left" src="/images /visualization/left_img.webp" alt="Person on image map widget">
215- <img class="arrow" src="/images /visualization/arrow.svg" alt="Arrow">
216- <img class="right" src="/images /visualization/guest_info.webp" alt="Person information widget">
214+ <img class="left" src="https://img.thingsboard.io /visualization/left_img.webp" alt="Person on image map widget">
215+ <img class="arrow" src="https://img.thingsboard.io /visualization/arrow.svg" alt="Arrow">
216+ <img class="right" src="https://img.thingsboard.io /visualization/guest_info.webp" alt="Person information widget">
217217 </div>
218218 </div>
219219 </div>
@@ -235,10 +235,10 @@ description: Explore powerful IoT data visualization with ThingsBoard. Build int
235235 </section>
236236 <section class="widgets">
237237 <div class="widgets-slide">
238- <img src="/images /visualization/widgets_part.webp" alt="Thingsboard widgets">
238+ <img src="https://img.thingsboard.io /visualization/widgets_part.webp" alt="Thingsboard widgets">
239239 </div>
240240 <div class="widgets-slide">
241- <img src="/images /visualization/widgets_part.webp" alt="Thingsboard widgets">
241+ <img src="https://img.thingsboard.io /visualization/widgets_part.webp" alt="Thingsboard widgets">
242242 </div>
243243 </section>
244244 <section class="visualize-with-tb">
0 commit comments