charts/templates/chart.html.twig

{% extends 'base.html.twig' %}

{% block title %}
	Chart
{% endblock %}

{% block body %}
    <div id="graphDiv">
        <canvas id="graphCanvas"></canvas>
        <div id="graphLegend"></div>
        <div id="dataDiv"></div>
    </div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
<script>
    let canvas = document.getElementById("graphCanvas");
    let parent = document.getElementById("graphDiv");
    let legend = document.getElementById("graphLegend");
    let dataDiv = document.getElementById("dataDiv");
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');
    let data = [];
    let graphSettings = [];

    //Načtení dat
    /*function load_data() {
        $.ajax({
            url: "php/load_data.php",
            type: "post",
            dataType: "json",
            data: {code: code},
            success: function (result) {
                data = JSON.parse(result.data);
                graphSettings = JSON.parse(result.settings);

                if (data !== null) {

                    drawChart(graphSettings, data);
                } else {
                    parent.innerHTML = "graph not found.";
                }
            }
        })
    }

    load_data();*/

    //Click
    document.addEventListener('mousemove', (e) => {
        const pos = {
            x: e.clientX,
            y: e.clientY
        };
        let obj = checkHit(pos);

        //show point value
        if (obj !== null){
            let divHitBox = dataDiv;
            divHitBox.style.display = "block";

            if (pos.x + divHitBox.clientWidth <= parent.clientWidth - 2){
                divHitBox.style.left = pos.x + "px";
            } else {
                dataDiv.style.left = pos.x - divHitBox.clientWidth + "px";
            }

            if (pos.y + divHitBox.clientHeight <= parent.clientHeight - 2){
                dataDiv.style.top = pos.y + "px";
            } else {
                dataDiv.style.top = pos.y - divHitBox.clientHeight + "px";
            }
            dataDiv.style.display = "block";
            dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>";
        }
        else {
            dataDiv.style.display = "none";
        }
    });

    //Resize
    $(window).on('resize', function(){
        drawChart(graphSettings, data);
    });

</script>
{% endblock %}