All Chart Types

Comprehensive demonstration of all 10 supported chart types

1. Pie Chart

Best for: Showing proportions and percentages of a whole
Source Code 
<bx:chart
    format="png"
    show3d="false"
    title="Memory Usage Distribution"
    backgroundcolor="##ffffff"
    chartheight="300"
    chartwidth="600"
    showlegend="true"
    bordercolor="##2c3e50"
    borderwidth="3">
    <bx:chartseries type="pie" serieslabel="Memory Usage">
        <bx:chartdata item="Free Memory" value="512" />
        <bx:chartdata item="Used Memory" value="256" />
        <bx:chartdata item="Reserved Memory" value="128" />
        <bx:chartdata item="Cache Memory" value="64" />
    </bx:chartseries>
</bx:chart>

2. Bar Chart

Best for: Comparing values across categories
Source Code 
<bx:chart
    format="png"
    show3d="false"
    backgroundcolor="##ffffff"
    chartwidth="600"
    chartheight="300"
    showlegend="true"
    title="Performance Metrics"
    xaxistitle="Metrics"
    yaxistitle="Count"
    showxgridlines="true"
    showygridlines="true"
    bordercolor="##28a745"
    borderwidth="2"
    borderradius="8">
    <bx:chartseries type="bar" serieslabel="Performance Data">
        <bx:chartdata item="Hits" value="150" />
        <bx:chartdata item="Misses" value="25" />
        <bx:chartdata item="Garbage Collections" value="10" />
        <bx:chartdata item="Evictions" value="5" />
    </bx:chartseries>
</bx:chart>

3. Line Chart

Best for: Showing trends over time or continuous data
Source Code 
<bx:chart
    format="png"
    title="Temperature Trend"
    chartwidth="600"
    chartheight="300"
    xaxistitle="Time"
    yaxistitle="Temperature (°C)"
    showxgridlines="true"
    showygridlines="true">
    <bx:chartseries type="line" colorlist="FF6384" serieslabel="Daily Temperature">
        <bx:chartdata item="6 AM" value="15" />
        <bx:chartdata item="9 AM" value="18" />
        <bx:chartdata item="12 PM" value="24" />
        <bx:chartdata item="3 PM" value="26" />
        <bx:chartdata item="6 PM" value="22" />
        <bx:chartdata item="9 PM" value="18" />
    </bx:chartseries>
</bx:chart>

4. Doughnut Chart

Best for: Similar to pie charts but with a hole in the center for additional info
Source Code 
<bx:chart
    format="png"
    title="Browser Market Share"
    chartwidth="600"
    chartheight="300"
    showlegend="true">
    <bx:chartseries type="doughnut" colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF" serieslabel="Market Share">
        <bx:chartdata item="Chrome" value="65" />
        <bx:chartdata item="Firefox" value="18" />
        <bx:chartdata item="Safari" value="12" />
        <bx:chartdata item="Edge" value="4" />
        <bx:chartdata item="Others" value="1" />
    </bx:chartseries>
</bx:chart>

5. Radar Chart

Best for: Comparing multiple variables across different categories
Source Code 
<bx:chart
    format="png"
    title="Skills Assessment"
    chartwidth="600"
    chartheight="400"
    showlegend="true">
    <bx:chartseries type="radar" colorlist="36A2EB" serieslabel="Developer Skills">
        <bx:chartdata item="JavaScript" value="90" />
        <bx:chartdata item="Python" value="75" />
        <bx:chartdata item="Java" value="85" />
        <bx:chartdata item="SQL" value="80" />
        <bx:chartdata item="BoxLang" value="95" />
        <bx:chartdata item="DevOps" value="70" />
    </bx:chartseries>
</bx:chart>

6. Polar Area Chart

Best for: Showing cyclical data with both category and magnitude
Source Code 
<bx:chart
    format="png"
    title="Product Ratings"
    chartwidth="600"
    chartheight="400"
    showlegend="true">
    <bx:chartseries type="polarArea" colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF" serieslabel="Ratings">
        <bx:chartdata item="Quality" value="95" />
        <bx:chartdata item="Price" value="75" />
        <bx:chartdata item="Support" value="85" />
        <bx:chartdata item="Documentation" value="90" />
        <bx:chartdata item="Community" value="80" />
    </bx:chartseries>
</bx:chart>

7. Area Chart

Best for: Showing cumulative values over time with filled area beneath the line
Source Code 
<bx:chart
    format="png"
    title="Website Traffic Over Time"
    chartwidth="600"
    chartheight="300"
    xaxistitle="Time Period"
    yaxistitle="Visitors"
    showxgridlines="true"
    showygridlines="true">
    <bx:chartseries type="area" colorlist="36A2EB" serieslabel="Daily Visitors">
        <bx:chartdata item="Monday" value="1200" />
        <bx:chartdata item="Tuesday" value="1350" />
        <bx:chartdata item="Wednesday" value="1100" />
        <bx:chartdata item="Thursday" value="1450" />
        <bx:chartdata item="Friday" value="1800" />
        <bx:chartdata item="Saturday" value="2100" />
        <bx:chartdata item="Sunday" value="1900" />
    </bx:chartseries>
</bx:chart>

8. Horizontal Bar Chart

Best for: Comparing values with long category labels or ranked data
Source Code 
<bx:chart
    format="png"
    title="Department Budgets"
    chartwidth="600"
    chartheight="300"
    xaxistitle="Budget (thousands)"
    yaxistitle="Departments"
    showxgridlines="false"
    showygridlines="true">
    <bx:chartseries type="horizontalbar" colorlist="FF6384,36A2EB,FFCE56,4BC0C0" serieslabel="Budget Allocation">
        <bx:chartdata item="IT" value="850" />
        <bx:chartdata item="Marketing" value="620" />
        <bx:chartdata item="Sales" value="950" />
        <bx:chartdata item="HR" value="340" />
    </bx:chartseries>
</bx:chart>

9. Scatter Chart

Best for: Showing relationships and correlations between two variables
Source Code 
<bx:chart
    format="png"
    title="Performance vs Experience"
    chartwidth="600"
    chartheight="350"
    xaxistitle="Years of Experience"
    yaxistitle="Performance Score"
    showxgridlines="true"
    showygridlines="true">
    <bx:chartseries type="scatter" colorlist="FF6384" serieslabel="Employee Data">
        <bx:chartdata item="1" value="65" />
        <bx:chartdata item="2" value="72" />
        <bx:chartdata item="3" value="78" />
        <bx:chartdata item="5" value="85" />
        <bx:chartdata item="7" value="88" />
        <bx:chartdata item="10" value="92" />
        <bx:chartdata item="12" value="95" />
    </bx:chartseries>
</bx:chart>

10. Bubble Chart

Best for: Showing three dimensions of data (x, y, and size/radius)
Source Code 
<bx:chart
    format="png"
    title="Product Performance Analysis"
    chartwidth="600"
    chartheight="350"
    xaxistitle="Market Share (%)"
    yaxistitle="Revenue (millions)"
    showxgridlines="true"
	showLegend="false"
    showygridlines="true">
    <bx:chartseries type="bubble" colorlist="9966FF,36A2EB,FF6384,FFCE56" serieslabel="Products">
        <bx:chartdata item="Product A" x="20" y="85" r="15" />
        <bx:chartdata item="Product B" x="35" y="120" r="20" />
        <bx:chartdata item="Product C" x="15" y="65" r="10" />
        <bx:chartdata item="Product D" x="25" y="95" r="12" />
    </bx:chartseries>
</bx:chart>
Back to Test Suite