Skip to Content
Menu
This question has been flagged


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
Discard

Hi, Did you get solution?

Related Posts Replies Views Activity
1
Apr 25
1250
2
Mar 25
1431
4
Nov 24
7112
1
Mar 24
2041
3
Sep 23
24856