Siirry sisältöön
Menu
Sinun on rekisteröidyttävä, jotta voit olla vuorovaikutuksessa yhteisön kanssa.
Tämä kysymys on merkitty
5361 Näkymät


I am trying to embed a D3 chart in qweb report. I managed to get data into the script but i can not use d3 object inside script. d3.v3.min.js is imported in assets but d3 object doesn't work in script.

Asset part :


<template id="report_style_assets" inherit_id="report.internal_layout">
    <xpath expr="." position="inside">
        <script charset="utf-8" type="text/javascript" src="http://my_server_adress:8069/my_module/static/src/js/libs/d3.v3.min.js"/>
    </xpath>
</template>

inside report :


<template id="my_module.hotel_daily_report">
            <t t-call="report.html_container">
                <t t-call="report.internal_layout">
                    <div class="page">

                        <div id="chart_div"></div>

                        <script charset="utf-8" type="text/javascript" src="http://my_server_adress:8069/my_module/static/src/js/libs/d3.v3.min.js"/>

                        <script t-attf-data="{{hotelData['graph_data']}}" type="text/javascript">

                            var chartId = "chart_div";
                            var check = true;

                            var start_date = new Date();
                            var end_date = new Date();
                            var min_value = 5.0;
                            var max_value = 9.0;
                            var graph_score_type = 'overall_score';
                            var graph_line_color = 'indigo';
                            var data = [];
                            var counter = 0;

                            var hotelDataStr = document.getElementsByTagName('script')[0].getAttribute("data").replace(/'/g, '"');

                            var result = JSON.parse(hotelDataStr);
                            var keyCounter = 0;

                            for (var key in result) {
                                try {
                                    data.push({
                                        time: new Date(result[key]['review_date']),
                                        value: parseFloat(result[key][graph_score_type])
                                    });

                                    if (check) {
                                        check = false;
                                        start_date = new Date(result[key]['review_date']);
                                    }
                                } catch (err) { }
                            }
                            var graph_width = 650;
                            var graph_height = 160;
                            var graph_margin = {
                                top: 20,
                                right: 20,
                                bottom: 40,
                                left: 40
                            };

                            end_date = new Date(result[key]['review_date']);


                            var svg = d3.select("#chart_div").append("svg")
                                    .attr("width", graph_width + graph_margin.left + graph_margin.right)
                                    .attr("height", graph_height + graph_margin.top + graph_margin.bottom)
                                    .append("g")
                                    .attr("transform", "translate(" + graph_margin.left + "," + graph_margin.top + ")");


                            document.getElementById("chart_div").innerHTML = "test passed";
                </script>
            </div>
        </t>
    </t>
</template>

Everything works until d3 part in script. I saw that there is a paid module for graphs in odoo reports, so it is possible but how to use d3 in script?

Avatar
Hylkää

Hi, Did you get solution?

Aiheeseen liittyviä artikkeleita Vastaukset Näkymät Toimenpide
1
huhtik. 25
1267
2
maalisk. 25
1454
4
marrask. 24
7131
1
maalisk. 24
2062
3
syysk. 23
24887