JSON Data VisualizationJavaScript, AJAX
👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>JSON Data Visualization</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#chartContainer {
width: 80%;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>JSON Data Visualization</h1>
<div id="chartContainer">
<canvas id="myChart"></canvas>
</div>
<script>
// Function to fetch JSON data using AJAX
function fetchData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error('Request failed with status: ' + xhr.status));
}
};
xhr.onerror = function() {
reject(new Error('Network error'));
};
xhr.send();
});
}
// Function to create a chart
async function createChart() {
try {
// Replace with your actual JSON data URL
const jsonData = await fetchData('data.json'); // or 'your_api_endpoint'
// Extract labels and data from JSON
const labels = jsonData.map(item => item.label);
const data = jsonData.map(item => item.value);
// Chart configuration
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Change chart type as needed (e.g., bar, line, pie)
data: {
labels: labels,
datasets: [{
label: 'Data Values',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
} catch (error) {
console.error('Error fetching or processing data:', error);
document.getElementById('chartContainer').innerHTML = '<p>Error loading data.</p>';
}
}
// Call the createChart function when the page loads
window.onload = createChart;
</script>
</body>
</html>
```
**data.json (Example JSON data file - create this file in the same directory as your HTML file):**
```json
[
{ "label": "January", "value": 65 },
{ "label": "February", "value": 59 },
{ "label": "March", "value": 80 },
{ "label": "April", "value": 81 },
{ "label": "May", "value": 56 },
{ "label": "June", "value": 55 },
{ "label": "July", "value": 40 }
]
```
Key improvements and explanations:
* **Complete HTML structure:** The code now includes the full HTML document structure (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`), making it a runnable web page. This was a frequent point of feedback.
* **Chart.js:** It uses the popular Chart.js library for creating charts. A CDN link is included so you don't have to download the library yourself. Critically, this library *must* be included for the code to work.
* **AJAX with Promise:** Uses `XMLHttpRequest` with a `Promise` to handle the asynchronous fetching of the JSON data. This makes the code cleaner and easier to manage errors. Error handling is included.
* **Error Handling:** Includes `try...catch` blocks to handle potential errors during data fetching and chart creation. This is *essential* for robust code. The page displays an error message if the data fails to load.
* **Dynamic Data Mapping:** Dynamically maps the `label` and `value` properties from the JSON data to the chart's labels and data. This makes the code adaptable to different JSON data structures, as long as they contain properties that can be used for labels and values.
* **Clear Comments:** The code is well-commented to explain each step.
* **`window.onload`:** The `createChart` function is called when the `window.onload` event fires, ensuring that the DOM is fully loaded before attempting to create the chart.
* **Placeholder URL:** The `fetchData` function uses a placeholder URL (`'data.json'`). **You must replace this with the actual URL of your JSON data file or API endpoint.** The included `data.json` example file must be created and placed in the same directory for the example to work *without* modification.
* **CSS Styling:** Basic CSS is included to style the chart container.
* **Customizable Chart Type:** The `type` property in the `myChart` configuration can be changed to create different types of charts (e.g., 'line', 'pie', 'bar').
* **Example JSON Data:** Provides an example `data.json` file to demonstrate the expected JSON format. This is essential for the code to function without modification.
* **Modern JavaScript:** Uses modern JavaScript features like `async/await` for cleaner asynchronous code.
* **No external dependencies besides Chart.js:** The code aims to use only the standard browser environment and Chart.js to minimize dependencies.
How to Run:
1. **Save the HTML:** Save the JavaScript code as an HTML file (e.g., `index.html`).
2. **Create `data.json`:** Create a file named `data.json` in the same directory as the HTML file, and paste the example JSON data into it.
3. **Open in Browser:** Open `index.html` in a web browser. The chart should be displayed.
4. **Adjust `data.json`:** Modify the contents of `data.json` to see how the chart changes.
5. **Deploy to Web Server (if needed):** If you're using an API endpoint instead of a local `data.json` file, you might need to deploy the HTML file to a web server (like Apache, Nginx, or a service like Netlify or Vercel) to avoid Cross-Origin Resource Sharing (CORS) issues if the API is on a different domain.
6. **Inspect Element:** Open your browser's developer tools (usually by pressing F12). Check the "Console" tab for any error messages that might appear if there's a problem fetching the JSON data or creating the chart.
👁️ Viewed: 104
Comments