<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>MindFusion Charts & Gauges - Interactive Gallery</title>

<link href="common/samples.css" rel="stylesheet" />

<script type="text/javascript" src="common/samples.js"></script>

<style type="text/css">

#content {

background-color: #f5f7fb;

padding: 40px;

}

.portal-container {

max-width: 1000px;

margin: 0 auto;

}

.portal-header {

margin-bottom: 40px;

}

.portal-header h2 {

font-size: 28px;

font-weight: 700;

color: #263238;

margin: 0 0 10px 0;

letter-spacing: -0.5px;

}

.portal-header p {

font-size: 15px;

color: #546e7a;

margin: 0;

}

.category-section {

background: #ffffff;

border-radius: 16px;

padding: 32px;

box-shadow: 0 8px 32px rgba(0,0,0,0.03);

border: 1px solid #eeeeee;

margin-bottom: 40px;

}

.category-section h3 {

font-size: 18px;

font-weight: 700;

color: #37474f;

margin: 0 0 24px 0;

padding-bottom: 12px;

border-bottom: 2px solid #eceff1;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.samples-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 28px;

}

.sample-card {

display: flex;

flex-direction: column;

text-decoration: none;

color: inherit;

border-radius: 12px;

background: #fafbfd;

border: 1px solid #f0f2f5;

overflow: hidden;

transition: all 0.2s ease-in-out;

}

.sample-card:hover {

background: #ffffff;

border-color: #26a69a;

box-shadow: 0 6px 24px rgba(38,166,154,0.08);

transform: translateY(-3px);

}

.card-img {

height: 150px;

width: 100%;

object-fit: cover;

border-bottom: 1px solid #f0f2f5;

transition: opacity 0.2s;

background-color: #f5f7fb;

}

.sample-card:hover .card-img {

opacity: 0.95;

}

.card-body {

padding: 20px;

display: flex;

flex-direction: column;

flex-grow: 1;

}

.sample-card h4 {

font-size: 15px;

font-weight: 600;

color: #26a69a;

margin: 0 0 6px 0;

transition: color 0.2s;

}

.sample-card:hover h4 {

color: #3f51b5;

}

.sample-card p {

font-size: 12px;

color: #78909c;

margin: 0;

line-height: 18px;

}

</style>

</head>

<body>

<input type="hidden" id="collapsed" />

<div id="header">

<div style="float: left; margin-left: 20px; line-height: 50px; font-weight: 700; color: #263238; letter-spacing: -0.5px; font-size: 16px;">

MindFusion JavaScript Charting Framework - Showcase

</div>

<div style="float: right; margin-right: 5px;">

<button id="expandButton" onclick="onExpandCollapse()">

&rsaquo;

</button>

</div>

</div>

<div id="info">

<div id="infoTab" style="padding: 20px;">

<h1>

Welcome!

</h1>

<p style="color: #546e7a; line-height: 22px;">

Explore our newly redesigned, high-fidelity data visualization suite.

Select any of the fully interactive, responsive samples from the directory card on the left to see the library in action.

</p>

</div>

</div>

<div id="content">

<div class="portal-container">

<div class="portal-header">

<h2>Interactive Gallery</h2>

<p>Seamlessly integrated charts and gauges built on a high-performance modular ES6 framework.</p>

</div>

<div class="category-section">

<h3>Analytical Charts</h3>

<div class="samples-grid">

<a class="sample-card" href="Dashboard.html">

<img class="card-img" src="Resources/dashboard.png" alt="AI Infrastructure Dashboard" />

<div class="card-body">

<h4>AI Infrastructure Dashboard</h4>

<p>Integrated control panel combining multiple plots and live oval status gauges.</p>

</div>

</a>

<a class="sample-card" href="CustomData.html">

<img class="card-img" src="Resources/custom-data-chart.png" alt="Office Operational Efficiency" />

<div class="card-body">

<h4>Office Operational Efficiency</h4>

<p>Bespoke multidimensional bubble chart bound dynamically to custom business objects.</p>

</div>

</a>

<a class="sample-card" href="CandlestickChart.html">

<img class="card-img" src="Resources/candlestick-chart.png" alt="Stock Trend Candlestick" />

<div class="card-body">

<h4>Stock Trend Candlestick</h4>

<p>Continuous candlestick stock tracking featuring an evergreen algorithmic data feed.</p>

</div>

</a>

<a class="sample-card" href="AreaChart.html">

<img class="card-img" src="Resources/area-chart.png" alt="Curved & Stepped Area Chart" />

<div class="card-body">

<h4>Curved & Stepped Area Chart</h4>

<p>Area visualization showcasing smooth spline curves, stepped boundaries, and opacity sliders.</p>

</div>

</a>

<a class="sample-card" href="LineChart.html">

<img class="card-img" src="Resources/polyline-chart.png" alt="Interactive Trend Line" />

<div class="card-body">

<h4>Interactive Trend Line</h4>

<p>Comprehensive line analysis supporting curved, stepped, and polyline data series.</p>

</div>

</a>

<a class="sample-card" href="LineChartTooltips.html">

<img class="card-img" src="Resources/custom_series.png" alt="Annual Productivity Trends" />

<div class="card-body">

<h4>Annual Productivity Trends</h4>

<p>Line chart with high-contrast, dark-themed hover tooltips for detailed coordinate tracking.</p>

</div>

</a>

<a class="sample-card" href="PieChart.html">

<img class="card-img" src="Resources/pie-chart.png" alt="Market Share Distribution" />

<div class="card-body">

<h4>Market Share Distribution</h4>

<p>Dynamic pie and doughnut chart with real-time interactive slice detachment.</p>

</div>

</a>

<a class="sample-card" href="NestedPieChart.html">

<img class="card-img" src="Resources/nested_pie.png" alt="Nested Performance Breakdown" />

<div class="card-body">

<h4>Nested Performance Breakdown</h4>

<p>Multi-layered sales analysis nesting annual totals with granular departmental metrics.</p>

</div>

</a>

<a class="sample-card" href="RadarChart.html">

<img class="card-img" src="Resources/radar-chart-pie.png" alt="Multi-Dimensional Radar" />

<div class="card-body">

<h4>Multi-Dimensional Radar</h4>

<p>Quantitative variable analysis with adjustable spiderweb grid and area opacity settings.</p>

</div>

</a>

<a class="sample-card" href="FunnelChart.html">

<img class="card-img" src="Resources/funnel-chart.png" alt="Sales Conversion Funnel" />

<div class="card-body">

<h4>Sales Conversion Funnel</h4>

<p>Process stage funnel visualization tracking prospects through to complete payments.</p>

</div>

</a>

<a class="sample-card" href="MultipleAxes.html">

<img class="card-img" src="Resources/multiple-axes.png" alt="Multi-Axis Weather Station" />

<div class="card-body">

<h4>Multi-Axis Weather Station</h4>

<p>Complex plot mapping temperature and pressure data series onto independent axis scales.</p>

</div>

</a>

<a class="sample-card" href="MultiplePlots.html">

<img class="card-img" src="Resources/multiple-plots.png" alt="Multi-Plot Consolidated Revenue" />

<div class="card-body">

<h4>Multi-Plot Consolidated Revenue</h4>

<p>Synchronizes step-area, bar, and scatter plots along a single unified vertical axis.</p>

</div>

</a>

<a class="sample-card" href="CrossHairChart.html">

<img class="card-img" src="Resources/cross_hair_chart.png" alt="Crosshair Area Tracker" />

<div class="card-body">

<h4>Crosshair Area Tracker</h4>

<p>Tracks hovering crosshair coordinates dynamically across multiple translucent area series.</p>

</div>

</a>

<a class="sample-card" href="CombinationChart.html">

<img class="card-img" src="Resources/combi_chart.png" alt="Combined Production Analytics" />

<div class="card-body">

<h4>Combined Production Analytics</h4>

<p>Links stacked bar datasets with a line trend renderer on a unified canvas.</p>

</div>

</a>

<a class="sample-card" href="GroupLabels.html">

<img class="card-img" src="Resources/group-labels.png" alt="Infrastructure Component Analysis" />

<div class="card-body">

<h4>Infrastructure Component Analysis</h4>

<p>Multi-level axis grouping utilizing custom labels drawn by the AnnotationRenderer.</p>

</div>

</a>

<a class="sample-card" href="StackedBarChart.html">

<img class="card-img" src="Resources/stacked_bar_chart.png" alt="Work/Life Balance Survey" />

<div class="card-body">

<h4>Work/Life Balance Survey</h4>

<p>Horizontal stacked bar chart displaying custom bar tooltips and segmented survey percentages.</p>

</div>

</a>

<a class="sample-card" href="FullBarChart.html">

<img class="card-img" src="Resources/full_bar_chart.png" alt="Career Priorities Bar Chart" />

<div class="card-body">

<h4>Career Priorities Bar Chart</h4>

<p>Stacked bar chart detailing career importance values mapped to custom series labels.</p>

</div>

</a>

<a class="sample-card" href="BarChart.html">

<img class="card-img" src="Resources/bar-chart.png" alt="Corporate Revenue Analysis" />

<div class="card-body">

<h4>Corporate Revenue Analysis</h4>

<p>Fully dynamic comparative bar chart with real-time scaling and orientation toggles.</p>

</div>

</a>

<a class="sample-card" href="BarChart3D.html">

<img class="card-img" src="Resources/cylinder-chart-3d.png" alt="Agricultural Produce (3D)" />

<div class="card-body">

<h4>Agricultural Produce (3D)</h4>

<p>3D bar and cylinder analysis with real-time rotation, zoom, and perspective panning.</p>

</div>

</a>

<a class="sample-card" href="DateTimeSeries.html">

<img class="card-img" src="Resources/dateTime-series.png" alt="Long-Term Growth Area Chart" />

<div class="card-body">

<h4>Long-Term Growth Area Chart</h4>

<p>Area chart mapping a dynamic multi-year date-time series with robust temporal scaling.</p>

</div>

</a>

<a class="sample-card" href="CssStyling.html">

<img class="card-img" src="Resources/css_styling.png" alt="CSS Custom Properties Theme" />

<div class="card-body">

<h4>CSS Custom Properties Theme</h4>

<p>Stunning Midnight Cyberpunk theme driven entirely via external CSS stylesheet variables.</p>

</div>

</a>

<a class="sample-card" href="Interactivity.html">

<img class="card-img" src="Resources/pie-chart.png" alt="User Interactivity Controls" />

<div class="card-body">

<h4>User Interactivity Controls</h4>

<p>Demonstrates interactive panning, drag-to-zoom (with CTRL), and legend relocation.</p>

</div>

</a>

<a class="sample-card" href="ListBinding.html">

<img class="card-img" src="Resources/radar-chart-spider.png" alt="TypeScript List Data Binding" />

<div class="card-body">

<h4>TypeScript List Data Binding</h4>

<p>Binds the chart dynamically to a custom TypeScript collection set as the DataSource.</p>

</div>

</a>

<a class="sample-card" href="BubbleChart.html">

<img class="card-img" src="Resources/bubble-chart.png" alt="Demographic Market Analysis" />

<div class="card-body">

<h4>Demographic Market Analysis</h4>

<p>Interactive bubble chart visualizing multi-dimensional growth rates, population scales, and regional distributions.</p>

</div>

</a>

<a class="sample-card" href="DateTimeSeriesTooltips.html">

<img class="card-img" src="Resources/dateTime-series-tooltips.png" alt="Annual Financial Performance" />

<div class="card-body">

<h4>Annual Financial Performance</h4>

<p>Area chart mapping a DateTime axis with custom, high-contrast interactive hover tooltips.</p>

</div>

</a>

<a class="sample-card" href="FunctionSeries.html">

<img class="card-img" src="Resources/function_series.png" alt="Mathematical Function Plotting" />

<div class="card-body">

<h4>Mathematical Function Plotting</h4>

<p>Plots custom equations and mathematical wave functions directly onto an interactive chart grid.</p>

</div>

</a>

<a class="sample-card" href="SynchronizedScroll.html">

<img class="card-img" src="Resources/synchronized-scroll.png" alt="Synchronized Axis Panning" />

<div class="card-body">

<h4>Synchronized Axis Panning</h4>

<p>Synchronizes panning and scroll coordinates across multiple distinct plot canvases using shared axes.</p>

</div>

</a>

<a class="sample-card" href="Tutorial1.html">

<img class="card-img" src="Resources/tutorial1.png" alt="Dashboard Series Renderers" />

<div class="card-body">

<h4>Dashboard Series Renderers</h4>

<p>Demonstrates dashboard layout orchestration hosting multiple series rendering styles on a single view.</p>

</div>

</a>

</div>

</div>

<div class="category-section">

<h3>Precision Instruments & Gauges</h3>

<div class="samples-grid">

<a class="sample-card" href="Equalizer.html">

<img class="card-img" src="Resources/equalizer.png" alt="Studio Equalizer Rack" />

<div class="card-body">

<h4>Studio Equalizer Rack</h4>

<p>Sleek vertical fader channels with neon slots and rotary gain knobs on a studio dashboard.</p>

</div>

</a>

<a class="sample-card" href="CarGauges.html">

<img class="card-img" src="Resources/car-gauges.png" alt="Cyberpunk Cockpit Dashboard" />

<div class="card-body">

<h4>Cyberpunk Cockpit Dashboard</h4>

<p>High-tech dark cockpit dashboard integrating Speedometer, Tachometer, Battery, and Oil dials.</p>

</div>

</a>

<a class="sample-card" href="Clock.html">

<img class="card-img" src="Resources/clock-gauge.png" alt="Minimal Precision Clock" />

<div class="card-body">

<h4>Minimal Precision Clock</h4>

<p>Minimalist, high-fidelity analog watchface timepiece tracking smooth real-time movements.</p>

</div>

</a>

<a class="sample-card" href="ValueGauge.html">

<img class="card-img" src="Resources/value_gauge1.png" alt="Precision Value Indicator" />

<div class="card-body">

<h4>Precision Value Indicator</h4>

<p>Custom-drawn linear indicators and scales mimicking a professional precision instrument.</p>

</div>

</a>

<a class="sample-card" href="Compass.html">

<img class="card-img" src="Resources/compass-gauge.png" alt="Analog Radial Compass" />

<div class="card-body">

<h4>Analog Radial Compass</h4>

<p>Detailed navigational compass rendered completely custom using the OvalScale API.</p>

</div>

</a>

<a class="sample-card" href="Functions.html">

<img class="card-img" src="Resources/functions-gauge.png" alt="Mathematical Gauge Functions" />

<div class="card-body">

<h4>Mathematical Gauge Functions</h4>

<p>Linear scale distribution using complex logarithmic and custom mathematical functions.</p>

</div>

</a>

<a class="sample-card" href="Thermometer.html">

<img class="card-img" src="Resources/thermometer-gauge.png" alt="Minimalist Thermometer Dial" />

<div class="card-body">

<h4>Minimalist Thermometer Dial</h4>

<p>Modern vertical thermometer gauge utilizing a highly customized LinearScale.</p>

</div>

</a>

</div>

</div>

</div>

</div>

<div id="info">

<div id="infoTab" style="padding: 20px;">

<h1>

Welcome!

</h1>

<p style="color: #546e7a; line-height: 22px;">

Explore our newly redesigned, high-fidelity data visualization suite.

Select any of the fully interactive, responsive samples from the directory card on the left to see the library in action.

</p>

</div>

</div>

<div id="footer">

<span id="copyright"></span>

</div>

</body>

</html>