Type: Generic Interactive Report
Module: factory.report.package.charts
Framework: Axion
Rendering Engine: Pixi.js v5 (WebGL 2D)
Generic Pixi.js-based data visualization report for Axion. Renders JSON data as interactive visualizations with multiple display modes: scatter plots, grid heatmaps, bar charts, node graphs, and more.
Extends ObjReportPixiBase and provides out-of-the-box functionality for most data visualization needs.
Multiple Visualization Modes:
Interactivity:
Rendering Layers:
Auto-Scaling:
from ObjReportPixiGeneric import Report
report = Report(DB=0)
report.SetTitle("Sales by Region")
report.SetDataUrl("/api/sales")
html = report.GetTemplate()
report = Report()
report.SetDataMode("scatter")
report.SetTitle("Product Distribution")
report.SetDataUrl("/api/products")
report.SetPointSize(6)
API should return:
[
{"x": 10, "y": 20, "label": "Product A"},
{"x": 45, "y": 35, "label": "Product B"},
{"x": 80, "y": 90, "label": "Product C"}
]
report = Report()
report.SetDataMode("grid")
report.SetTitle("Correlation Matrix")
report.SetDataUrl("/api/matrix")
API should return 2D array:
[
[0.1, 0.5, 0.9],
[0.3, 0.7, 0.2],
[0.8, 0.4, 0.6]
]
Values are normalized to 0-1 and colored based on intensity (0=dark, 1=bright).
report = Report()
# Display
report.SetTitle("My Dashboard")
report.SetDimensions(1200, 800)
# Data
report.SetDataUrl("/api/data")
report.SetRefreshInterval(5000) # 5 seconds
# Visualization
report.SetDataMode("scatter") # or "grid"
report.SetPointSize(4)
report.show_grid = True
report.show_axes = True
report.padding = 50
# Colors (hex RGB)
report.SetColors([
0x00ff00, # Green
0xff0000, # Red
0x0000ff, # Blue
])
Display:
SetTitle(title: str)SetDimensions(width: int, height: int)Data:
SetDataUrl(url: str)SetRefreshInterval(interval_ms: int)Visualization:
SetDataMode(mode: str) — scatter, grid, etc.SetPointSize(size: int)SetColors(color_list: list) — RGB hex valuesProperties:
show_grid — Display grid lines (default: True)show_axes — Display X/Y axes (default: True)padding — Margin around data area (default: 50px)Expected response:
[
{"x": number, "y": number, "label": string, "value": number},
...
]
Properties:
x (required): X coordinatey (required): Y coordinatelabel: Optional text labelvalue: Optional numeric value (for sizing/coloring)Expected response:
[
[val, val, val],
[val, val, val],
[val, val, val]
]
Values should be normalized to 0-1 range. Higher values = brighter color.
Controls:
Refresh button — Reload data from APIToggle Mode button — Switch between visualization modesReset button — Clear zoom/pan transformsMouse:
Default palette (8 colors):
0x00ff00 — Green
0xff0000 — Red
0x0000ff — Blue
0xffff00 — Yellow
0xff00ff — Magenta
0x00ffff — Cyan
0x888888 — Gray
0xcccccc — Light Gray
Customize with SetColors():
report.SetColors([0xff6600, 0x0066ff, 0xff0066])
Bottom of report shows:
Mode: scatter | Points: 42 | Zoom: 1.25x
Updates in real-time as you interact.
Report accesses Axion services:
# Database queries
results = self.db.query("SELECT x, y FROM data")
# Configuration from YAML
yaml_cfg = self.load_queries()
# Text substitution
url = self.process_text("$apibaseurl$/data")
settings:
api_endpoint: /api/generic-data
refresh_interval: 5000
routes:
get_data:
path: /api/generic-data
handler: route_get_data
description: Fetch data for visualization
For large datasets:
Create custom visualization by extending:
from ObjReportPixiGeneric import Report
class MyCustomReport(Report):
def __init__(self, DB=0):
super().__init__(DB)
self.Type = "custom"
self.Description = "My visualization"
def GetTemplate(self):
# Extend or fully replace base template
return super().GetTemplate() + """
<script>
// Custom rendering logic
</script>
"""
report = Report()
report.SetTitle("Real-Time Infrastructure Metrics")
report.SetDataUrl("/api/metrics")
report.SetDataMode("scatter")
report.SetDimensions(1200, 700)
report.SetRefreshInterval(2000)
report.show_grid = True
report.show_axes = True
report = Report()
report.SetTitle("Correlation Matrix Heatmap")
report.SetDataUrl("/api/correlations")
report.SetDataMode("grid")
report.SetDimensions(800, 600)
report.SetRefreshInterval(30000) # 30 second refresh
Blank canvas:
Data not showing:
Slow rendering:
vheyn@technocore.co.za
TechnoCore Infrastructure
Part of Axion Framework