Query-Based Charts

Streamline your charting workflow with direct query integration

1. Bar Chart with Query (Default Columns)

Query columns: item and value (defaults, no mapping needed)

Source Code

<bx:chart
    title="Product Sales Revenue"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Products"
    yaxistitle="Revenue ($)"
    showygridlines="true"
    backgroundcolor="####f8f9fa">
    <bx:chartseries
        type="bar"
        query="####salesQuery####"
        colorlist="36A2EB"
        serieslabel="Sales Revenue">
    </bx:chartseries>
</bx:chart>

2. Horizontal Bar Chart with Query (Custom Columns)

Query columns: department and budget (custom mapping with itemColumn/valueColumn)

Source Code

<bx:chart
    title="Department Budgets ($1000s)"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Budget"
    yaxistitle="Department"
    showxgridlines="true">
    <bx:chartseries
        type="horizontalbar"
        query="####departmentQuery####"
        itemColumn="department"
        valueColumn="budget"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Budget Allocation">
    </bx:chartseries>
</bx:chart>

3. Line Chart with Query Data

Best for: Visualizing trends over time with query data

Source Code

<bx:chart
    title="Monthly Revenue Trend"
    chartwidth="800"
    chartheight="400"
    xaxistitle="Month"
    yaxistitle="Revenue ($)"
    showygridlines="true">
    <bx:chartseries
        type="line"
        query="####monthlyQuery####"
        itemColumn="month"
        valueColumn="revenue"
        colorlist="9966FF"
        serieslabel="Revenue">
    </bx:chartseries>
</bx:chart>

4. Pie Chart with Query Data

Best for: Showing proportions from query results

Source Code

<bx:chart
    title="Sales by Region"
    chartwidth="600"
    chartheight="600"
    showlegend="true">
    <bx:chartseries
        type="pie"
        query="####regionalQuery####"
        itemColumn="region"
        valueColumn="sales"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0,9966FF"
        serieslabel="Regional Sales">
    </bx:chartseries>
</bx:chart>

5. Doughnut Chart with Query Data

Best for: Performance metrics and KPI visualization

Source Code

<bx:chart
    title="Website Performance Metrics"
    chartwidth="600"
    chartheight="600"
    showlegend="true"
    backgroundcolor="####ffffff">
    <bx:chartseries
        type="doughnut"
        query="####metricsQuery####"
        itemColumn="metric"
        valueColumn="count"
        colorlist="FF6384,36A2EB,FFCE56,4BC0C0"
        serieslabel="Metrics">
    </bx:chartseries>
</bx:chart>

6. Area Chart with Query Data

Best for: Revenue trends with filled area emphasis

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"
        query="####monthlyQuery####"
        itemColumn="month"
        valueColumn="revenue"
        colorlist="6f42c1"
        serieslabel="Revenue Growth">
    </bx:chartseries>
</bx:chart>

Query-Based Charts Documentation

Benefits

No manual <bx:chartdata> components needed
Cleaner, more maintainable code
Perfect for database-driven charts
Reduced boilerplate code
Dynamic data from queries

Query Requirements

Query must contain at least one record
itemColumn must exist (default: "item")
valueColumn must exist (default: "value")

Usage Examples

With default column names:

<bx:chartseries
    type="pie"
    query="####myQuery####">
</bx:chartseries>

With custom column names:

<bx:chartseries
    type="bar"
    query="####myQuery####"
    itemColumn="category"
    valueColumn="amount">
</bx:chartseries>

Tip: If your query columns are named item and value, you don't need to specify itemColumn or valueColumn attributes!