I can´t render a Plotyjs chart in a HTML Component

Alejandro_Sanchez_Islas · December 19, 2024, 8:40pm

Goal: I´m triying add a chart in html component
Steps:
Load with a CDN the Plotyjs library
I add the next code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfico de Barras con Proporciones</title>
</head>
<body>
    <h3>Grafico</h3>
    <div id="chart"></div>

    <script>
        // Datos de las transacciones
        const data = [
            { "Comercio": "Innovasport", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Cinemex", "Precio": 50 },
            { "Comercio": "Krispy Kreme", "Precio": 205 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon Prime Video", "Precio": 97 },
            { "Comercio": "Librerías Ghandi", "Precio": 150 },
        ];

        // Agrupar y contar transacciones por comercio
        const groupedData = data.reduce((acc, curr) => {
            acc[curr.Comercio] = (acc[curr.Comercio] || 0) + 1;
            return acc;
        }, {});

        const totalRegistros = data.length;

        const comercios = Object.keys(groupedData);
        const proporciones = Object.values(groupedData).map(count => count / totalRegistros);

        // Configuración del gráfico
        const trace = {
            x: comercios,
            y: proporciones,
            type: 'bar',
            marker: {
                color: 'rgba(58,71,80,0.8)'
            },
            text: proporciones.map(p => (p * 100).toFixed(2) + '%'), // Mostrar porcentajes como etiquetas
            textposition: 'auto'
        };

        const layout = {
            title: 'Proporción de Transacciones por Comercio',
            xaxis: {
                title: 'Comercio'
            },
            yaxis: {
                title: 'Proporción',
                tickformat: ',.0%' // Formato de porcentaje
            }
        };

        // Renderizar el gráfico
        Plotly.newPlot('chart', [trace], layout);
    </script>
</body>
</html>

Details: The chart is not visible, just don´t shows

WidleStudioLLP · December 20, 2024, 5:23am

Hello @Alejandro_Sanchez_Islas

The issue appears to be that the Plotly.js library is not loading. To resolve this, include the Plotly.js CDN in your HTML document's <head> section.

Add the following line within the <head> tag:

<script src="https://cdn.plot.ly/plotly-2.26.2.min.js"></script>

See my Screenshot

Alejandro_Sanchez_Islas · December 20, 2024, 5:44pm

Hi, thanks for you comments.

I got this error:

WidleStudioLLP · December 23, 2024, 5:14am

Hello @Alejandro_Sanchez_Islas

I apologize, but I have a suggestion for you to update your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfico de Barras con Proporciones</title>
    <!-- Load Plotly.js CDN -->
    <script src="https://cdn.plot.ly/plotly-2.26.2.min.js"></script>
</head>
<body>
    <h3>Grafico</h3>
    <div id="chart"></div>

    <script>
        // Datos de las transacciones
        const data = [
            { "Comercio": "Innovasport", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Cinemex", "Precio": 50 },
            { "Comercio": "Krispy Kreme", "Precio": 205 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon Prime Video", "Precio": 97 },
            { "Comercio": "Librerías Ghandi", "Precio": 150 },
        ];

        // Agrupar y contar transacciones por comercio
        const groupedData = data.reduce((acc, curr) => {
            acc[curr.Comercio] = (acc[curr.Comercio] || 0) + 1;
            return acc;
        }, {});

        const totalRegistros = data.length;

        const comercios = Object.keys(groupedData);
        const proporciones = Object.values(groupedData).map(count => count / totalRegistros);

        
        const trace = {
            x: comercios,
            y: proporciones,
            type: 'bar',
            marker: {
                color: 'rgba(58,71,80,0.8)'
            },
            text: proporciones.map(p => (p * 100).toFixed(2) + '%'), // Mostrar porcentajes como etiquetas
            textposition: 'auto'
        };

        const layout = {
            title: 'Proporción de Transacciones por Comercio',
            xaxis: {
                title: 'Comercio'
            },
            yaxis: {
                title: 'Proporción',
                tickformat: ',.0%' // Formato de porcentaje
            }
        };

        // Renderizar el gráfico
        Plotly.newPlot('chart', [trace], layout);
    </script>
</body>
</html>

Please copy the following code and paste it into your component.

Alejandro_Sanchez_Islas · December 23, 2024, 6:43pm

Thanks for you reply.
I copy paste that code but nothing happend:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfico de Barras con Proporciones</title>
    <!-- Load Plotly.js CDN -->
    <script src="https://cdn.plot.ly/plotly-2.26.2.min.js"></script>
</head>
<body>
    <h3>Grafico</h3>
    <div id="chart"></div>

    <script>
        // Datos de las transacciones
        const data = [
            { "Comercio": "Innovasport", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Cinemex", "Precio": 50 },
            { "Comercio": "Krispy Kreme", "Precio": 205 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Amazon", "Precio": 100 },
            { "Comercio": "Starbucks", "Precio": 80 },
            { "Comercio": "Amazon Prime Video", "Precio": 97 },
            { "Comercio": "Librerías Ghandi", "Precio": 150 },
        ];

        // Agrupar y contar transacciones por comercio
        const groupedData = data.reduce((acc, curr) => {
            acc[curr.Comercio] = (acc[curr.Comercio] || 0) + 1;
            return acc;
        }, {});

        const totalRegistros = data.length;

        const comercios = Object.keys(groupedData);
        const proporciones = Object.values(groupedData).map(count => count / totalRegistros);

        
        const trace = {
            x: comercios,
            y: proporciones,
            type: 'bar',
            marker: {
                color: 'rgba(58,71,80,0.8)'
            },
            text: proporciones.map(p => (p * 100).toFixed(2) + '%'), // Mostrar porcentajes como etiquetas
            textposition: 'auto'
        };

        const layout = {
            title: 'Proporción de Transacciones por Comercio',
            xaxis: {
                title: 'Comercio'
            },
            yaxis: {
                title: 'Proporción',
                tickformat: ',.0%' // Formato de porcentaje
            }
        };

        // Renderizar el gráfico
        Plotly.newPlot('chart', [trace], layout);
    </script>
</body>
</html>

Tess · December 23, 2024, 8:55pm

Hi @Alejandro_Sanchez_Islas,

This code works well in a custom component! Scripting is not supported in the html component

Alejandro_Sanchez_Islas · December 26, 2024, 5:27pm

Ok, thanks