GMM Cda

by Tenobaal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.0.1/highcharts.js"></script>
<div id="container"></div>

<script>
data = [
  {
    "mean": 0.3655,
    "std_dev": 0.0039,
    "h": 2
  },
  {
    "mean": 0.3754,
    "std_dev": 0.0024,
    "h": 11
  },
  {
    "mean": 0.3835,
    "std_dev": 0.0019,
    "h": 24
  },
  {
    "mean": 0.3908,
    "std_dev": 0.0023,
    "h": 18
  },
  {
    "mean": 0.401,
    "std_dev": 0.0014,
    "h": 33
  },
  {
    "mean": 0.4105,
    "std_dev": 0.0026,
    "h": 11
  }
]
</script>

JavaScript

function createCombinedChart(data, containerId) {
    var points_mean = [];
    var unit = "aP";
    var minX = Infinity;
    var maxX = -Infinity;

    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var mean = Math.round(item.mean * 100, 1);
        points_mean.push([mean, item.h]);
        minX = Math.min(minX, mean);
        maxX = Math.max(maxX, mean);
    }
    
    minX = Math.max(10, minX);
    maxX = Math.min(80, maxX);

    var options = {
        chart: {
            renderTo: containerId,
            type: 'scatter',
            backgroundColor: null,
            style: {
                fontFamily: 'Fira Sans'
            }
        },
        title: {
            style: {
                fontSize: '24px',
                color: 'white'
            }
        },
        legend: {
            enabled: false
        },
        xAxis: {
            title: {
                text: 'CdA'
            },
            min: minX,
            max: maxX,
            crosshair: true
        },
        yAxis: {
            title: {
                text: 'Häufigkeit'
            },
            opposite: false
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    symbol: 'circle'
                }
            },
            column: {
                color: "#45B384",
                borderWidth: 0,
                pointPadding: 0.2,
                groupPadding: 0,
                                dataLabels: {
                    enabled: true,
                    format: 'CdA = {point.x:.1f} ' + unit + '<br>Häufigkeit = {point.y}%'
                }
            },
        },
        series: [
            {
                name: 'Häufigkeit',
                type: 'column',
                data: points_mean,
                tooltip: {
                    pointFormat: 'CdA = {point.x:.1f} ' + unit + '<br>Häufigkeit = {point.y}%'
                },
               ...