Charts
Geographic Data
View Source
World map visualization with data points and regional statistics.
Geographic Data Visualization
Global sales performance by region - Q4 2025
North America
$4.2M+15.3%Europe
$3.1M+8.7%Asia Pacific
$2.8M+22.4%Latin America
$1.2M+12.1%Middle East
$0.8M+18.9%Revenue by Region
Distribution of global sales
Top Countries by Revenue
Top 8 performing markets
Product Mix by Region
Category distribution per region
Year-over-Year Growth
Regional growth comparison
Explore More Demos
Oorian Core
Task Manager
Interactive task manager demonstrating pure Oorian features: forms, tables, e...
Oorian Core
Browser APIs
Access browser features from Java: Geolocation, Clipboard, Storage, Notificat...
Maps
Weather Forecast
Real-time weather app with current conditions, 10-day forecast, hourly temper...
GeographicDataDemo.java
✕
/***********************************************************************************
* Copyright (c) 2025 Corvus Engineering
* All Rights Reserved
***********************************************************************************/
package com.oorian.website.demos;
import com.oorian.css.*;
import com.oorian.echarts.BarChart;
import com.oorian.echarts.PieChart;
import com.oorian.echarts.options.*;
import com.oorian.echarts.options.Legend;
import com.oorian.echarts.options.Title;
import com.oorian.html.elements.*;
/****************************************************************************************************************
* Geographic Data demo component.
* Showcases regional data visualization with multiple ECharts charts.
****************************************************************************************************************/
public class GeographicDataDemo extends Div
{
public GeographicDataDemo()
{
createDashboard();
}
private void createDashboard()
{
// Main container
setPadding("40px");
setBackgroundColor("#f8fafc");
Div container = new Div();
container.setMaxWidth("1400px");
container.setMargin("0 auto");
// Dashboard header
container.addElement(createDashboardHeader());
// Region summary cards
container.addElement(createRegionSummaryRow());
// Main charts area
container.addElement(createMainChartsArea());
// Bottom comparison row
container.addElement(createComparisonRow());
addElement(container);
}
private Div createDashboardHeader()
{
Div header = new Div();
header.setMarginBottom("32px");
H2 title = new H2();
title.setText("Geographic Data Visualization");
title.setColor("#1f2937");
title.setFontSize("28px");
title.setFontWeight("700");
title.setMarginTop("0");
title.setMarginBottom("8px");
header.addElement(title);
P subtitle = new P();
subtitle.setText("Global sales performance by region - Q4 2025");
subtitle.setColor("#6b7280");
subtitle.setFontSize("15px");
subtitle.setMargin("0");
header.addElement(subtitle);
return header;
}
private Div createRegionSummaryRow()
{
Div row = new Div();
row.setDisplay(Display.GRID);
row.addStyleAttribute("grid-template-columns", "repeat(auto-fit, minmax(220px, 1fr))");
row.addStyleAttribute("gap", "16px");
row.setMarginBottom("32px");
row.addElement(createRegionCard("North America", "$4.2M", "+15.3%", "#3b82f6"));
row.addElement(createRegionCard("Europe", "$3.1M", "+8.7%", "#10b981"));
row.addElement(createRegionCard("Asia Pacific", "$2.8M", "+22.4%", "#f59e0b"));
row.addElement(createRegionCard("Latin America", "$1.2M", "+12.1%", "#8b5cf6"));
row.addElement(createRegionCard("Middle East", "$0.8M", "+18.9%", "#ef4444"));
return row;
}
private Div createRegionCard(String region, String revenue, String growth, String color)
{
Div card = new Div();
card.setBackgroundColor("#ffffff");
card.setBorderRadius("12px");
card.setPadding("20px");
card.addStyleAttribute("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)");
card.setBorderTop("4px solid " + color);
P regionEl = new P();
regionEl.setText(region);
regionEl.setColor("#6b7280");
regionEl.setFontSize("13px");
regionEl.setFontWeight("500");
regionEl.setMarginTop("0");
regionEl.setMarginBottom("8px");
card.addElement(regionEl);
Span revenueEl = new Span();
revenueEl.setText(revenue);
revenueEl.setColor("#1f2937");
revenueEl.setFontSize("24px");
revenueEl.setFontWeight("700");
revenueEl.setDisplay(Display.BLOCK);
revenueEl.setMarginBottom("4px");
card.addElement(revenueEl);
Span growthEl = new Span();
growthEl.setText(growth);
growthEl.setColor("#10b981");
growthEl.setFontSize("13px");
growthEl.setFontWeight("600");
card.addElement(growthEl);
return card;
}
private Div createMainChartsArea()
{
Div area = new Div();
area.setDisplay(Display.GRID);
area.addStyleAttribute("grid-template-columns", "1fr 1fr");
area.addStyleAttribute("gap", "24px");
area.setMarginBottom("24px");
// Regional distribution pie chart
area.addElement(createDistributionCard());
// Top countries bar chart
area.addElement(createTopCountriesCard());
return area;
}
private Div createDistributionCard()
{
Div card = createChartCard("Revenue by Region", "Distribution of global sales");
PieChart chart = new PieChart();
chart.setWidth("100%");
chart.setHeight("350px");
// Title
Title title = new Title();
chart.setTitle(title);
// Legend
Legend legend = new Legend();
legend.setBottom("0");
legend.setLeft("center");
chart.setLegend(legend);
// Tooltip
Tooltip tooltip = new Tooltip();
tooltip.setTrigger("item");
chart.setTooltip(tooltip);
// Pie series
PieSeries series = chart.createPieSeries("Revenue");
series.setRadius("50%", "70%");
series.addData("North America", 4200);
series.addData("Europe", 3100);
series.addData("Asia Pacific", 2800);
series.addData("Latin America", 1200);
series.addData("Middle East", 800);
card.addElement(chart);
return card;
}
private Div createTopCountriesCard()
{
Div card = createChartCard("Top Countries by Revenue", "Top 8 performing markets");
BarChart chart = new BarChart();
chart.setWidth("100%");
chart.setHeight("350px");
// Title
Title title = new Title();
chart.setTitle(title);
// Tooltip
Tooltip tooltip = new Tooltip();
tooltip.setTrigger("axis");
chart.setTooltip(tooltip);
// Y-Axis (categories)
Axis yAxis = new Axis();
yAxis.setType("category");
yAxis.addData("Brazil");
yAxis.addData("Australia");
yAxis.addData("India");
yAxis.addData("France");
yAxis.addData("Japan");
yAxis.addData("Germany");
yAxis.addData("UK");
yAxis.addData("USA");
chart.addYAxis(yAxis);
// X-Axis (values)
Axis xAxis = new Axis();
xAxis.setType("value");
chart.addXAxis(xAxis);
// Grid for padding
Grid grid = new Grid();
grid.setLeft("100");
grid.setRight("40");
chart.setGrid(grid);
// Bar series
BarSeries series = chart.createBarSeries("Revenue ($M)");
series.addData(0.45);
series.addData(0.52);
series.addData(0.68);
series.addData(0.72);
series.addData(0.85);
series.addData(1.1);
series.addData(1.4);
series.addData(2.8);
// Style the bars
ItemStyle itemStyle = new ItemStyle();
itemStyle.setColor("#3b82f6");
series.setItemStyle(itemStyle);
card.addElement(chart);
return card;
}
private Div createComparisonRow()
{
Div row = new Div();
row.setDisplay(Display.GRID);
row.addStyleAttribute("grid-template-columns", "1fr 1fr");
row.addStyleAttribute("gap", "24px");
// Product mix by region
row.addElement(createProductMixCard());
// Growth comparison
row.addElement(createGrowthComparisonCard());
return row;
}
private Div createProductMixCard()
{
Div card = createChartCard("Product Mix by Region", "Category distribution per region");
BarChart chart = new BarChart();
chart.setWidth("100%");
chart.setHeight("300px");
// Tooltip
Tooltip tooltip = new Tooltip();
tooltip.setTrigger("axis");
chart.setTooltip(tooltip);
// Legend
Legend legend = new Legend();
legend.setTop("0");
chart.setLegend(legend);
// X-Axis
Axis xAxis = new Axis();
xAxis.setType("category");
xAxis.addData("N. America");
xAxis.addData("Europe");
xAxis.addData("Asia Pacific");
xAxis.addData("LATAM");
chart.addXAxis(xAxis);
// Y-Axis
Axis yAxis = new Axis();
yAxis.setType("value");
chart.addYAxis(yAxis);
// Grid
Grid grid = new Grid();
grid.setTop("50");
grid.setBottom("30");
chart.setGrid(grid);
// Electronics series
BarSeries electronics = chart.createBarSeries("Electronics");
electronics.addData(45);
electronics.addData(38);
electronics.addData(52);
electronics.addData(28);
electronics.setStack("total");
ItemStyle elecStyle = new ItemStyle();
elecStyle.setColor("#3b82f6");
electronics.setItemStyle(elecStyle);
// Software series
BarSeries software = chart.createBarSeries("Software");
software.addData(32);
software.addData(42);
software.addData(28);
software.addData(35);
software.setStack("total");
ItemStyle softStyle = new ItemStyle();
softStyle.setColor("#10b981");
software.setItemStyle(softStyle);
// Services series
BarSeries services = chart.createBarSeries("Services");
services.addData(23);
services.addData(20);
services.addData(20);
services.addData(37);
services.setStack("total");
ItemStyle servStyle = new ItemStyle();
servStyle.setColor("#f59e0b");
services.setItemStyle(servStyle);
card.addElement(chart);
return card;
}
private Div createGrowthComparisonCard()
{
Div card = createChartCard("Year-over-Year Growth", "Regional growth comparison");
BarChart chart = new BarChart();
chart.setWidth("100%");
chart.setHeight("300px");
// Tooltip
Tooltip tooltip = new Tooltip();
tooltip.setTrigger("axis");
chart.setTooltip(tooltip);
// Legend
Legend legend = new Legend();
legend.setTop("0");
chart.setLegend(legend);
// X-Axis
Axis xAxis = new Axis();
xAxis.setType("category");
xAxis.addData("N. America");
xAxis.addData("Europe");
xAxis.addData("Asia Pacific");
xAxis.addData("LATAM");
xAxis.addData("Middle East");
chart.addXAxis(xAxis);
// Y-Axis
Axis yAxis = new Axis();
yAxis.setType("value");
yAxis.setName("Growth %");
chart.addYAxis(yAxis);
// Grid
Grid grid = new Grid();
grid.setTop("50");
grid.setBottom("30");
chart.setGrid(grid);
// 2024 series
BarSeries y2024 = chart.createBarSeries("2024");
y2024.addData(12.5);
y2024.addData(8.2);
y2024.addData(18.1);
y2024.addData(10.5);
y2024.addData(14.2);
ItemStyle style2024 = new ItemStyle();
style2024.setColor("#94a3b8");
y2024.setItemStyle(style2024);
// 2025 series
BarSeries y2025 = chart.createBarSeries("2025");
y2025.addData(15.3);
y2025.addData(8.7);
y2025.addData(22.4);
y2025.addData(12.1);
y2025.addData(18.9);
ItemStyle style2025 = new ItemStyle();
style2025.setColor("#3b82f6");
y2025.setItemStyle(style2025);
card.addElement(chart);
return card;
}
private Div createChartCard(String title, String subtitle)
{
Div card = new Div();
card.setBackgroundColor("#ffffff");
card.setBorderRadius("12px");
card.setPadding("24px");
card.addStyleAttribute("box-shadow", "0 1px 3px rgba(0, 0, 0, 0.1)");
H4 titleEl = new H4();
titleEl.setText(title);
titleEl.setColor("#1f2937");
titleEl.setFontSize("16px");
titleEl.setFontWeight("600");
titleEl.setMarginTop("0");
titleEl.setMarginBottom("4px");
card.addElement(titleEl);
P subtitleEl = new P();
subtitleEl.setText(subtitle);
subtitleEl.setColor("#9ca3af");
subtitleEl.setFontSize("13px");
subtitleEl.setMarginTop("0");
subtitleEl.setMarginBottom("16px");
card.addElement(subtitleEl);
return card;
}
}