Array-Based Charts

Using array data sources with charts - a flexible alternative to chartData components and queries

1. Bar Chart with Array of Structs

Data Format: Array of structs [{item:"Product A", value:100}]
Source Code 
<bx:chart
    title="Product Sales Revenue"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Products"
    yaxistitle="Revenue ($)"
    showygridlines="true"
    backgroundcolor="##f8f9fa">
    <bx:chartseries
        type="bar"
        data="##[
            {item:'Product A', value:15000},
            {item:'Product B', value:23000},
            {item:'Product C', value:18000},
            {item:'Product D', value:12000},
            {item:'Product E', value:27000}
        ]##"
        colorlist="36A2EB"
        serieslabel="Sales Revenue">
    </bx:chartseries>
</bx:chart>

2. Horizontal Bar Chart with Array of Arrays

Data Format: Array of arrays (positional) [["Department", 1000]]
Source Code 
<bx:chart
    title="Department Budgets ($1000s)"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Budget"
    yaxistitle="Department"
    showxgridlines="true">
    <bx:chartseries
        type="horizontalbar"
        data="##[
            ['Engineering', 850],
            ['Marketing', 620],
            ['Sales', 950],
            ['HR', 340],
            ['Operations', 720]
        ]##"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Budget Allocation">
    </bx:chartseries>
</bx:chart>

3. Line Chart with Array Data

Best for: Monthly revenue trend using array of structs
Source Code 
<bx:chart
    title="Monthly Revenue Trend"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Month"
    yaxistitle="Revenue ($)"
    showygridlines="true"
    markersize="6"
    bordercolor="##9966FF">
    <bx:chartseries
        type="line"
        data="##[
            {item:'January', value:120000},
            {item:'February', value:135000},
            {item:'March', value:148000},
            {item:'April', value:162000},
            {item:'May', value:178000},
            {item:'June', value:195000}
        ]##"
        colorlist="9966FF"
        serieslabel="Revenue">
    </bx:chartseries>
</bx:chart>

4. Pie Chart with Array Data

Best for: Regional sales distribution using array of arrays
Source Code 
<bx:chart
    title="Sales by Region"
    chartwidth="600"
    chartheight="600"
    showlegend="true">
    <bx:chartseries
        type="pie"
        data="##[
            ['North America', 450],
            ['Europe', 380],
            ['Asia Pacific', 520],
            ['Latin America', 210],
            ['Middle East', 180]
        ]##"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Regional Sales">
    </bx:chartseries>
</bx:chart>

5. Doughnut Chart with Array Data

Best for: Performance metrics visualization using array of structs
Source Code 
<bx:chart
    title="Website Performance Metrics"
    chartwidth="600"
    chartheight="600"
    showlegend="true"
    backgroundcolor="##ffffff">
    <bx:chartseries
        type="doughnut"
        data="##[
            {item:'Page Views', value:15420},
            {item:'Unique Visitors', value:8750},
            {item:'New Users', value:3240},
            {item:'Returning Users', value:5510}
        ]##"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0"
        serieslabel="Metrics">
    </bx:chartseries>
</bx:chart>

6. Area Chart with Array Data

Best for: Revenue trend with filled area using array of arrays
Source Code 
<bx:chart
    title="Revenue Growth Over Time"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Month"
    yaxistitle="Revenue ($)"
    showygridlines="true"
    showxgridlines="false">
    <bx:chartseries
        type="area"
        data="##[
            ['January', 120000],
            ['February', 135000],
            ['March', 148000],
            ['April', 162000],
            ['May', 178000],
            ['June', 195000]
        ]##"
        colorlist="6f42c1"
        serieslabel="Revenue Growth">
    </bx:chartseries>
</bx:chart>

7. Bubble Chart with Array of Structs

Data Format: Portfolio analysis using array of structs with x, y, r coordinates
Source Code 
<bx:chart
    title="Product Portfolio Analysis"
    chartwidth="800"
    chartheight="500"
    xaxistitle="Market Share (%)"
    yaxistitle="Revenue ($M)"
    showxgridlines="true"
    showygridlines="true">
    <bx:chartseries
        type="bubble"
        data="##[
            {item:'Product A', x:20, y:30, r:15},
            {item:'Product B', x:40, y:10, r:10},
            {item:'Product C', x:30, y:20, r:25},
            {item:'Product D', x:15, y:35, r:8},
            {item:'Product E', x:50, y:45, r:20}
        ]##"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Product Performance">
    </bx:chartseries>
</bx:chart>

8. Bubble Chart with Array of Arrays (Positional)

Data Format: Investment analysis using positional array format [["Name", x, y, r]]
Source Code 
<bx:chart
    title="Investment Portfolio Analysis"
    chartwidth="800"
    chartheight="500"
    xaxistitle="Risk Score"
    yaxistitle="Expected Return (%)"
    showxgridlines="true"
    showygridlines="true">
    <bx:chartseries
        type="bubble"
        data="##[
            ['Stock A', 25, 12, 18],
            ['Stock B', 45, 8, 12],
            ['Bond C', 10, 6, 8],
            ['Stock D', 35, 15, 22],
            ['ETF E', 20, 10, 15]
        ]##"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Investment Options">
    </bx:chartseries>
</bx:chart>

9. Scatter Plot with Array Data

Best for: Performance correlation using array of structs
Source Code 
<bx:chart
    title="Response Time vs Throughput"
    chartwidth="800"
    chartheight="500"
    xaxistitle="Response Time (ms)"
    yaxistitle="Requests/sec"
    showxgridlines="true"
    showygridlines="true"
    markersize="8">
    <bx:chartseries
        type="scatter"
        data="##[
            {item:'Server 1', value:120},
            {item:'Server 2', value:85},
            {item:'Server 3', value:200},
            {item:'Server 4', value:150},
            {item:'Server 5', value:95},
            {item:'Server 6', value:175}
        ]##"
        colorlist="20c997"
        serieslabel="Server Performance">
    </bx:chartseries>
</bx:chart>

10. Radar Chart with Array Data

Best for: Skills assessment using array of arrays
Source Code 
<bx:chart
    title="Developer Skills Assessment"
    chartwidth="600"
    chartheight="600"
    showlegend="true">
    <bx:chartseries
        type="radar"
        data="##[
            ['JavaScript', 85],
            ['BoxLang', 95],
            ['Database', 75],
            ['DevOps', 70],
            ['Security', 80],
            ['Testing', 90]
        ]##"
        colorlist="6610f2"
        serieslabel="Current Skills">
    </bx:chartseries>
</bx:chart>

Using Arrays with Charts

Benefits of Array-Based Charts
  • Flexible data format - choose structs or arrays based on your needs
  • Eliminates need for manual <bx:chartdata> components
  • Perfect for programmatically generated data
  • Works great with JSON data sources
  • Reduces boilerplate code
Supported Formats
1. Array of Structs (Named Keys)

Use this format when you want readable, self-documenting code:

<bx:chartseries type="bar"
    data="##[
        {item:'Product A', value:100},
        {item:'Product B', value:200}
    ]##">
</bx:chartseries>
2. Array of Arrays (Positional)

Use this format for compact, efficient data representation:

<bx:chartseries type="pie"
    data="##[
        ['Product A', 100],
        ['Product B', 200]
    ]##">
</bx:chartseries>
3. Bubble Charts with Structs

For bubble charts, use x, y, r instead of value:

<bx:chartseries type="bubble"
    data="##[
        {item:'Point A', x:10, y:20, r:5},
        {item:'Point B', x:15, y:25, r:8}
    ]##">
</bx:chartseries>
4. Bubble Charts with Arrays

Positional format for bubble charts: [item, x, y, r]

<bx:chartseries type="bubble"
    data="##[
        ['Point A', 10, 20, 5],
        ['Point B', 15, 25, 8]
    ]##">
</bx:chartseries>
Data Requirements
  • Array must not be empty
  • All elements must be the same format (all structs or all arrays)
  • For standard charts: structs need item and value keys, arrays need 2 elements
  • For bubble charts: structs need item, x, y, r keys, arrays need 4 elements
When to Use Each Format
Format Best For Example Use Case
<bx:chartdata> Static, template-defined data Hardcoded examples, demos
query attribute Database-driven charts Reports from database queries
data array (structs) JSON data, API responses External data sources, REST APIs
data array (arrays) CSV data, compact storage File imports, memory-efficient data
Dynamic Data Example
<bx:script>
    // Build data array dynamically
    chartData = [];
    for ( i = 1; i <= 5; i++ ) {
        arrayAppend( chartData, {
            item: "Item " & i,
            value: randRange( 100, 500 )
        } );
    }
</bx:script>

<bx:chart title="Dynamic Data">
    <bx:chartseries type="bar" data="##chartData##">
    </bx:chartseries>
</bx:chart>