Integrazione Grafico a Barre

Passo 1: Includi lo Script

Aggiungi la seguente riga nella sezione head o prima del tag body di chiusura:

<script src="https://ravenbits.it/build/ravenbits-charts.js" type="module"></script>

Passo 2: Aggiungi il Componente Grafico a Barre

Posiziona il seguente codice HTML dove desideri visualizzare il grafico a barre:

<div class="ravenbits-charts">
    <ravenbits-charts :options='{
        "chart": "bar",
        "data": {
            "categories": ["Q1", "Q2", "Q3", "Q4"],
            "series": [{
                    "name": "Ricavi",
                    "values": [120, 150, 180, 210],
                    "color": "blue"
                },
                {
                    "name": "Costi",
                    "values": [80, 100, 110, 130],
                    "color": "green"
                }
            ],
            "options": {
                "stacked": false,
                "horizontal": true,
                "showValues": true
            }
        }
    }'></ravenbits-charts>
</div>

Formato Dati per Grafico a Barre

I tuoi dati JSON dovrebbero avere la seguente struttura:

{
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
        {
            "name": "Ricavi",
            "values": [120, 150, 180, 210],
            "color": "blue"
        },
        {
            "name": "Costi",
            "values": [80, 100, 110, 130],
            "color": "green"
        }
    ],
    "options": {
        "stacked": false,
        "horizontal": true,
        "showValues": true
    }
}

Opzioni Fonte Dati

Puoi fornire dati per il grafico a barre in tre modi diversi:

Opzione A: JSON Inline

"data": {
                "categories": ["Q1", "Q2", "Q3", "Q4"],
                "series": [{
                        "name": "Ricavi",
                        "values": [120, 150, 180, 210],
                        "color": "blue"
                    },
                    {
                        "name": "Costi",
                        "values": [80, 100, 110, 130],
                        "color": "green"
                    }
                ]
            }

Opzione B: File JSON Esterno

"data": "https://ravenbits.it/bar.json"

Il formato del file JSON deve essere conforme alla struttura richiesta del grafico a barre.

Opzione C: Endpoint API

"data": "https://ravenbits.it/api/barChartSampleJson"

L'endpoint API deve restituire dati in formato JSON conformi alla struttura richiesta del grafico a barre.

Casi d'Uso del Grafico a Barre

• Analisi delle vendite - confronto dei risultati di vendita tra diversi periodi
• Confronto di metriche - giustapposizione di diversi indicatori aziendali
• Analisi demografica - confronto di dati demografici
• Classifiche - presentazione di classifiche, ad es. prodotti più venduti
• Analisi del budget - confronto di costi pianificati ed effettivi