JavaScript Plotly

Creating interactive charts and visualizations with Plotly.js

📊 What is Plotly.js?

Plotly.js is a powerful JavaScript library for creating interactive charts and data visualizations. It supports many chart types including line charts, bar charts, scatter plots, and 3D visualizations. 


<!-- Include Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<!-- Chart container -->
<div id="myChart" style="width:100%;height:400px;"></div>

<script>
// Simple line chart
const data = [{
    x: [1, 2, 3, 4, 5],
    y: [2, 4, 3, 5, 6],
    type: 'scatter'
}];

Plotly.newPlot('myChart', data);
</script>

Output:

Plotly Chart Types

📈

Line Charts

Show trends over time 

type: 'scatter', mode: 'lines'
📊

Bar Charts

Compare categories of data 

type: 'bar'
🥧

Pie Charts

Show parts of a whole 

type: 'pie'
🎯

Scatter Plots

Show relationships between variables 

type: 'scatter', mode: 'markers'

🔹 Creating a Bar Chart

Bar charts are perfect for comparing different categories: 

const data = [{
    x: ['Apples', 'Bananas', 'Oranges', 'Grapes'],
    y: [20, 14, 23, 25],
    type: 'bar',
    marker: {
        color: ['red', 'yellow', 'orange', 'purple']
    }
}];

const layout = {
    title: 'Fruit Sales',
    xaxis: { title: 'Fruits' },
    yaxis: { title: 'Quantity Sold' }
};

Plotly.newPlot('barChart', data, layout);

Output:

🔹 Interactive Pie Chart

Pie charts show proportions and percentages: 

const data = [{
    values: [35, 25, 20, 20],
    labels: ['JavaScript', 'Python', 'Java', 'C++'],
    type: 'pie',
    textinfo: 'label+percent',
    textposition: 'outside',
    marker: {
        colors: ['#ff9999', '#66b3ff', '#99ff99', '#ffcc99']
    }
}];

const layout = {
    title: 'Programming Languages Popularity'
};

Plotly.newPlot('pieChart', data, layout);

Output:

🔹 Multiple Data Series

Display multiple datasets on the same chart: 

const trace1 = {
    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    y: [20, 14, 23, 25, 22],
    type: 'scatter',
    mode: 'lines+markers',
    name: 'Sales 2023',
    line: { color: 'blue' }
};

const trace2 = {
    x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    y: [16, 18, 17, 19, 27],
    type: 'scatter',
    mode: 'lines+markers',
    name: 'Sales 2024',
    line: { color: 'red' }
};

const layout = {
    title: 'Sales Comparison',
    xaxis: { title: 'Month' },
    yaxis: { title: 'Sales (thousands)' }
};

Plotly.newPlot('multiChart', [trace1, trace2], layout);

Output:

🔹 Plotly Boilerplate Template

A complete starter template for Plotly projects: 

<!DOCTYPE html>
<html>
<head>
    <title>Plotly Dashboard</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        .chart-container {
            width: 100%;
            height: 400px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>My Data Dashboard</h1>
    
    <div id="chart1" class="chart-container"></div>
    <div id="chart2" class="chart-container"></div>
    
    <script>
        // Sample data
        const salesData = {
            x: ['Q1', 'Q2', 'Q3', 'Q4'],
            y: [100, 120, 140, 160],
            type: 'bar',
            name: 'Sales'
        };
        
        const revenueData = {
            x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            y: [10, 15, 13, 17, 20, 25],
            type: 'scatter',
            mode: 'lines+markers',
            name: 'Revenue'
        };
        
        // Create charts
        Plotly.newPlot('chart1', [salesData], {
            title: 'Quarterly Sales'
        });
        
        Plotly.newPlot('chart2', [revenueData], {
            title: 'Monthly Revenue'
        });
        
        // Add interactivity
        document.getElementById('chart1').on('plotly_click', function(data) {
            console.log('Chart clicked:', data);
        });
    </script>
</body>
</html>

🧠 Test Your Knowledge

Which function is used to create a new Plotly chart?