HTML Chart Integrations
Create interactive charts with Canvas and JavaScript
📊 What are Chart Integrations?
Chart integrations combine HTML Canvas with JavaScript libraries to create interactive data visualizations. You can build bar charts, line graphs, pie charts, and more using simple JavaScript code.
<!-- Basic chart setup -->
<canvas id="myChart" width="400" height="200"></canvas>
<script>
// JavaScript code to draw charts
</script>
Chart Types
Bar Charts
Compare values across categories
drawBarChart(data, canvas);Line Charts
Show trends over time
drawLineChart(data, canvas);Pie Charts
Display parts of a whole
drawPieChart(data, canvas);Area Charts
Show volume and trends
drawAreaChart(data, canvas);🔹 Simple Bar Chart
Create a basic bar chart using Canvas and JavaScript:
<canvas id="barChart" width="400" height="250"></canvas>
<script>
function drawBarChart() {
const canvas = document.getElementById('barChart');
const ctx = canvas.getContext('2d');
// Sample data
const data = [
{ label: 'Jan', value: 65 },
{ label: 'Feb', value: 45 },
{ label: 'Mar', value: 80 },
{ label: 'Apr', value: 55 }
];
// Chart settings
const barWidth = 60;
const barSpacing = 20;
const maxValue = Math.max(...data.map(d => d.value));
// Draw bars
data.forEach((item, index) => {
const x = 50 + index * (barWidth + barSpacing);
const barHeight = (item.value / maxValue) * 150;
const y = 200 - barHeight;
// Draw bar
ctx.fillStyle = '#4CAF50';
ctx.fillRect(x, y, barWidth, barHeight);
// Draw label
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText(item.label, x + barWidth/2, 220);
ctx.fillText(item.value, x + barWidth/2, y - 10);
});
}
drawBarChart();
</script>Output:
🔹 Simple Line Chart
Create a line chart to show trends:
<canvas id="lineChart" width="400" height="250"></canvas>
<script>
function drawLineChart() {
const canvas = document.getElementById('lineChart');
const ctx = canvas.getContext('2d');
// Sample data points
const data = [
{ x: 50, y: 180 },
{ x: 120, y: 120 },
{ x: 190, y: 160 },
{ x: 260, y: 80 },
{ x: 330, y: 100 }
];
// Draw line
ctx.beginPath();
ctx.moveTo(data[0].x, data[0].y);
for (let i = 1; i < data.length; i++) {
ctx.lineTo(data[i].x, data[i].y);
}
ctx.strokeStyle = '#2196F3';
ctx.lineWidth = 3;
ctx.stroke();
// Draw points
data.forEach(point => {
ctx.beginPath();
ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
ctx.fillStyle = '#FF5722';
ctx.fill();
});
}
drawLineChart();
</script>Output:
🔹 Simple Pie Chart
Create a pie chart to show proportions:
<canvas id="pieChart" width="300" height="300"></canvas>
<script>
function drawPieChart() {
const canvas = document.getElementById('pieChart');
const ctx = canvas.getContext('2d');
// Sample data
const data = [
{ label: 'Red', value: 30, color: '#FF6B6B' },
{ label: 'Blue', value: 25, color: '#4ECDC4' },
{ label: 'Green', value: 20, color: '#45B7D1' },
{ label: 'Yellow', value: 25, color: '#FFA07A' }
];
const total = data.reduce((sum, item) => sum + item.value, 0);
const centerX = 150;
const centerY = 150;
const radius = 80;
let currentAngle = 0;
data.forEach(item => {
const sliceAngle = (item.value / total) * 2 * Math.PI;
// Draw slice
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
ctx.closePath();
ctx.fillStyle = item.color;
ctx.fill();
currentAngle += sliceAngle;
});
}
drawPieChart();
</script>Output:
🔹 Popular Chart Libraries
For more advanced charts, consider using these libraries:
🔸 Chart.js (Recommended for beginners)
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
</script>🔸 D3.js (Advanced)
<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="chart"></div>
<script>
// D3.js code for complex visualizations
const svg = d3.select("#chart").append("svg");
// More D3 code here...
</script>🔸 Google Charts (Easy integration)
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="myPieChart"></div>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Google Charts code here...
</script>🔹 Interactive Chart Example
Add interactivity to your charts:
<canvas id="interactiveChart" width="400" height="200"></canvas>
<button onclick="updateChart()">Update Data</button>
<script>
let chartData = [30, 50, 80, 40];
function drawInteractiveChart() {
const canvas = document.getElementById('interactiveChart');
const ctx = canvas.getContext('2d');
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw bars with current data
chartData.forEach((value, index) => {
const x = 50 + index * 80;
const barHeight = value * 2;
const y = 180 - barHeight;
ctx.fillStyle = `hsl(${index * 60}, 70%, 50%)`;
ctx.fillRect(x, y, 60, barHeight);
ctx.fillStyle = '#333';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText(value, x + 30, y - 10);
});
}
function updateChart() {
// Generate random data
chartData = chartData.map(() => Math.floor(Math.random() * 90) + 10);
drawInteractiveChart();
}
drawInteractiveChart();
</script>