Use Chart.js and IDX Broker API data to create custom market report visualizations such as:

• Property counts by city
• Property counts by county
• Average price by property type
• Saved Link result counts
• MLS summary statistics

This example demonstrates how market-style charts can be built using IDX Broker API data structures and JavaScript.

Overview

This example uses:

• JavaScript
• Chart.js
• Mocked IDX Broker API responses

to generate sample market report charts.

The included example does not make live API calls. Instead, the API responses are statically mocked for demonstration purposes.

Example Use Cases

This type of reporting can be used for:

• Market report pages
• Neighborhood pages
• Community dashboards
• Saved Link statistics
• City market summaries
• County market breakdowns
• Real estate analytics tools

Important Notes

Developer Note: This example is intended for developers familiar with JavaScript, JSON, APIs, and frontend charting libraries.

Before using this in production:

• Implement real API requests
• Add caching
• Secure API keys server-side
• Limit unnecessary API requests
• Validate and sanitize incoming data

IDX Broker API Endpoints Used

The example references the following IDX Broker API endpoints:

The example also references:

• Saved Link counts
• City counts
• County counts

Part 1: Organizing Market Data with JavaScript

The first section demonstrates how IDX Broker API responses can be organized into report-ready data structures.

Note: The included data is mocked and hardcoded for display purposes only.

Example JavaScript Data Processing

/*
* Mock API call system with static data used.
* This does not make live API calls.
*/

let apiCalls = [
    "/mls/papprovedmls",
    "/mls/propertytypes/",
    "/mls/prices/"
];

let reportData = {};

let incomingRequest = {
    "savedLinkIDs":["18436"],
    "cities":["Portland", "Eugene"],
    "counties":["Multnomah"]
};

The example then:

• organizes MLS data
• calculates averages
• groups counts
• builds chart-ready objects

Example Calculations

Calculate Average Prices

function average(count, sum){
    return sum / count;
}

Match Property Type Names

function propTypeNames(findPropType, mlsPropTypes){
    let name = mlsPropTypes.map((propType)=>{
        if(findPropType == propType.mlsPtID){
            return propType.mlsPropertyType;
        }
    });

    return name.filter(item => item !== undefined);
}

Generated Report Data

The script builds a reportData object containing:

• property type averages
• city counts
• county counts
• total MLS values
• Saved Link result counts

Example:

reportData["savedlinkresults"] = savedLinksCount;
reportData["mlsSum"] = pricesData.priceSum;

Part 2: Displaying Charts with Chart.js

The second section demonstrates how to render charts using Chart.js.

The example includes:

• Bar charts
• Doughnut charts
• Horizontal bar charts

Include Chart.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

Example HTML Layout

<canvas id="bar-chart" class="chart"></canvas>

<canvas id="doughnut-chart" class="chart"></canvas>

<canvas id="bar-chart-horizontal" class="chart"></canvas>

Example Bar Chart

new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
        labels: ["Portland", "Eugene"],
        datasets: [{
            label: "Residential Available Properties By City",
            data: [3142, 565]
        }]
    }
});

This chart compares:

• residential property counts
• across multiple cities

Example Doughnut Chart

new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
        labels: [
            "Residential",
            "Lots And Land",
            "MultiFamily",
            "Commercial"
        ]
    }
});

This chart visualizes:

• property distribution by property type

Example Horizontal Bar Chart

new Chart(document.getElementById("bar-chart-horizontal"), {
    type: 'horizontalBar'
});

This chart compares:

• average property price
• by property type

Example Dashboard Summary

document.querySelector('#total').innerHTML =
    'Total Properties active in the MLS: ' + data.mlsSum;

Important Production Considerations

The Example Uses Mocked Data

The included code:

• does not make real API requests
• uses hardcoded sample responses

A production implementation should:

• make live API calls
• cache responses
• validate API output
• handle failures gracefully

API Key Security

Never expose IDX Broker API keys directly in frontend JavaScript.

Recommended approaches:

• server-side proxy requests
• cached JSON endpoints
• backend API wrappers

Performance Recommendations

Market reporting pages can generate many API requests.

Consider:

• caching responses
• scheduled data refreshes
• static JSON generation
• rate limiting

Responsive Design Notes

The example includes simple chart sizing:

.chart {
    width:60% !important;
    height:90% !important;
}

You may want to improve responsiveness for:

• mobile devices
• tablets
• smaller screens

Common Use Cases

Developers commonly use this approach for:

• Market snapshot pages
• City comparison pages
• Community landing pages
• IDX analytics dashboards
• SEO neighborhood pages
• Investor reporting tools
• Brokerage market reports

Best Practices

Cache API Responses

Avoid making repeated live API requests on every page load.

Keep Polygon and Saved Link Queries Efficient

Large query strings can:

• slow down responses
• increase processing time

Use Responsive Chart Layouts

Charts should resize appropriately for:

• desktop
• tablet
• mobile

Validate Incoming Data

Always validate:

• API responses
• numeric calculations
• user input

before rendering charts.

Additional Resources

• Chart.js Documentation
• IDX Broker API Documentation
• MDN JavaScript Documentation