charts/templates/chart.html.twig

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

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

{% block stylesheets %}
	{{ parent() }}
	<link href="{{ asset('styles/style.css') }}" rel="stylesheet"/>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript" src={{ asset('/scripts/charts/chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/point_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/area_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/bar_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/line_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/pie_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/stacked_chart.js') }}></script>
{% endblock %}

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

<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() {
        fetch("/api/charts/" + {{ code }}, {
            method: 'GET',
            headers: {
                'Content-Type': 'json'
            }
        })
        .then(response => response.json())
        .then(data => {
            let metadata = data.metadata;
            metadata.custom_x_values = ""
            let table = data.table

            if (data !== null) {
                drawChart(metadata, table)
            }
            else
                parent.innerHTML = "graph not found."
        })
    }

    load_data()

    function addListener(newChart) {
        //Click
        document.addEventListener('mousemove', (e) => {
            const pos = {
                x: e.clientX,
                y: e.clientY
            }
            let obj = newChart.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);
    });*/

    function drawChart(graphSettings, data) {
        //objects = []
        let newChart = new Chart(canvas, data, graphSettings)
        newChart.updateLegend(graphSettings.displayLegend, data)
        newChart.resizeCanvas(parent, legend.offsetHeight)

        //Choose the correct graph
        switch (graphSettings.type) {
            case "point":
                newChart = new PointChart(canvas, data, graphSettings)
                break
            case "line":
                newChart = new LineChart(canvas, data, graphSettings)
                break
            case "pie":
                newChart = new PieChart(canvas, data, graphSettings)
                break
            case "bar":
                newChart = new BarChart(canvas, data, graphSettings)
                break
            case "area":
                newChart = new AreaChart(canvas, data, graphSettings)
                break
            case "stacked":
                newChart = new StackedChart(canvas, data, graphSettings)
                break
        }

        newChart.draw()

        if (graphSettings.displayTitle)
            newChart.drawTitle(canvas, graphSettings)

        addListener(newChart)
    }

</script>
{% endblock %}