PyCharting - Multi-Chart Synchronization Demo
Synchronized cursor and zoom/pan across multiple chart instances
Features:
- Real-time synchronization of chart interactions.
- Toggleable sync options for cursor, zoom, and pan.
- Dynamic data generation for interactive exploration.
- Responsive design for various screen sizes.
```
--------------------------------
### Define Overlays and Subplots for Charting
Source: https://github.com/alihaskar/pycharting/blob/master/README.md
Demonstrates how to define 'overlays' and 'subplots' for the plot function. Overlays are rendered on the main price chart, while subplots appear in separate panels below.
```python
overlays = {
"SMA_50": sma(close, 50), # rendered on top of price
"EMA_200": ema(close, 200),
}
subplots = {
"RSI_like": rsi_like_series, # rendered in its own panel below price
"Stoch_like": stoch_series,
}
plot(
index,
open_,
high,
low,
close,
overlays=overlays,
subplots=subplots,
)
```
--------------------------------
### Load and Render Dataset in PyChart
Source: https://github.com/alihaskar/pycharting/blob/master/src/pycharting/web/static/demo.html
Loads a specified number of OHLC candles into the PyChart. It handles chart initialization if it doesn't exist and updates the chart with new data. Performance metrics are recorded and displayed.
```javascript
function loadDataset(numCandles, label) {
setStatus(`Generating ${label}...`, 'loading');
setTimeout(() => {
const startTime = performance.now();
// Generate data
currentData = generateOHLCData(numCandles);
// Create or update chart
const container = document.getElementById('chartContainer');
if (!chart) {
chart = new PyChart(container, {
title: `OHLC Chart - ${label}`,
height: 500
});
}
chart.setData(currentData);
const renderTime = Math.round(performance.now() - startTime);
setStatus(`Loaded ${numCandles} candles successfully`, 'info');
updateInfo(numCandles, renderTime);
// Initialize measurement button after first chart load
setupMeasurementButton();
}, 10);
}
```
--------------------------------
### Generate Sample OHLC Data (JavaScript)
Source: https://github.com/alihaskar/pycharting/blob/master/src/pycharting/web/static/multi-chart-demo.html
Generates sample Open, High, Low, Close (OHLC) data for financial charting. This function creates an array of data points suitable for displaying candlestick charts. It takes an optional number of data points as input.
```javascript
function generateOHLCData(n = 100) {
const index = [];
const open = [];
const high = [];
const low = [];
const close = [];
const volume = [];
let currentPrice = 100;
for (let i = 0; i < n; i++) {
index.push(i);
const change = (Math.random() - 0.5) * 2;
currentPrice += change;
const o = currentPrice + (Math.random() - 0.5) * 0.5;
const c = currentPrice + (Math.random() - 0.5) * 0.5;
const h = Math.max(o, c) + Math.abs(Math.random());
const l = Math.min(o, c) - Math.abs(Math.random());
open.push(o);
high.push(h);
low.push(l);
close.push(c);
volume.push(Math.random() * 1000000 + 500000);
}
return { index, open, high, low, close, volume };
}
```
--------------------------------
### Initialize and Register Measurement Button
Source: https://github.com/alihaskar/pycharting/blob/master/src/pycharting/web/static/demo.html
Sets up the measurement tool button for the chart. It ensures the button is only initialized once and registers it with the chart instance. The button's click event toggles the measurement tool's enabled state.
```javascript
let chart = null;
let currentData = null;
let measurementButtonInitialized = false;
// Setup measurement tool button
function setupMeasurementButton() {
if (measurementButtonInitialized) return;
const measureBtn = document.getElementById('measureBtn');
if (!measureBtn || !chart) {
return;
}
chart.registerMeasurementButton(measureBtn);
measureBtn.addEventListener('click', (e) => {
e.preventDefault();
console.log('Measurement button clicked');
if (chart.measurementEnabled) {
chart.disableMeasurementTool();
} else {
chart.enableMeasurementTool();
}
});
measurementButtonInitialized = true;
console.log('Measurement button initialized');
}
```