WD Data from JSON 02 | #ynaDgVd5 | AnyChart Playground

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScriptAutocompletecopy

​x
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AnyChart Example</title>
    <script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.10.0/css/anychart.min.css">
    <style>
        #container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
​
<div id="container"></div>
​
<script>
    // Definovanie dát pre prvú a druhú sadu
    var data = [
        { articlenumber: "006953042-0000", name: "názov_A1", value: 30 },
        { articlenumber: "294851070-0000", name: "názov_A2", value: 34 },
        { articlenumber: "004121589-0000", name: "názov_A3", value: 14 },
        { articlenumber: "294395733-0000", name: "názov_A4", value: 20 },
        { articlenumber: "006988172-0000", name: "názov_A5", value: 6 },
        { articlenumber: "294471685-0000", name: "názov_A6", value: 3 },
        { articlenumber: "294851070-0000", name: "názov_B2", value: 25 },
        { articlenumber: "006953042-0000", name: "názov_B1", value: 34 },
        { articlenumber: "294395733-0000", name: "názov_B4", value: 21 },
        { articlenumber: "004121589-0000", name: "názov_B3", value: 14 },
        { articlenumber: "250268787-0000", name: "názov_B8", value: 6 },
        { articlenumber: "294471685-0000", name: "názov_B6", value: 3 }
    ];
​
    // Vytvorenie zoskupených dát podľa artiklového čísla
    let combinedData = {};
​
    data.forEach(item => {
        if (!combinedData[item.articlenumber]) {
            combinedData[item.articlenumber] = {
                nameA: null,
                valueA: 0,
                nameB: null,
                valueB: 0
            };
        }
        
        if (item.name.startsWith("názov_A")) {
            combinedData[item.articlenumber].nameA = item.name;
            combinedData[item.articlenumber].valueA = item.value;
        } else {
            combinedData[item.articlenumber].nameB = item.name;
            combinedData[item.articlenumber].valueB = item.value;
        }
    });
​
    // Prevod zoskupených dát na pole
    let chartData = Object.keys(combinedData).map(key => ({
        articlenumber: key,
        nameA: combinedData[key].nameA,
        valueA: combinedData[key].valueA,
        nameB: combinedData[key].nameB,
        valueB: combinedData[key].valueB,
        x_label: combinedData[key].nameA || combinedData[key].nameB // Alias pre číslo článku
    }));
​
    // Vytvorenie grafu
    anychart.onDocumentReady(function () {
        var chart = anychart.bar(); // horizontálny barový graf
​
        // Pridanie prvej série
        chart.bar(chartData.map(function(item) {
            return {
                x: item.x_label, // Zobrazenie aliasu
                value: item.valueA // Hodnota z prvej sady
            };
        })).name("Prvá sada");
​
        // Pridanie druhej série
        chart.bar(chartData.map(function(item) {
            return {
                x: item.x_label, // Zobrazenie aliasu
                value: item.valueB // Hodnota z druhej sady
            };
        })).name("Druhá sada").fill("#FFAA00"); // Zmeníme farbu pre odlíšenie druhej sady
​
        // Tooltipy
        chart.tooltip().format(function() {
            return 'Článkové číslo: ' + this.getData('x') + '\nHodnota: ' + this.getData('value');
        });
​
        // Nastavte tituly
        chart.title("Príklad grafu AnyChart: Porovnanie hodnot");
        chart.xAxis().title("Článkové čísla");
        chart.yAxis().title("Hodnoty");
​
        // Zobrazenie grafu
        chart.container("container").draw();
    });
</script>
​
</body>
</html>

Sample meta

AnyChart Documentation