CODEWITHSUNDEEP
jquerypythonhighchartsflask
RamPrasadBismil
RamPrasadBismil

Reputation: 589

Highcharts is not displaying in the div at all, resulting in a blank page - Using python flask and jinja template?

Here is my index.html file. I have included the scripts in the correct order. I try to load the div with the dummy graph. I have tried including the scripts in base.html but nothing works. I had the scripts locally, I tried loading it from the CDN. Is CSRF_Enabled= False in flask an issue? I have tried document.ready() event ... THe same code works fine in js fiddle .. I mean the graph part.

<!-- extend from base layout -->
{% extends "base.html" %}

<!--- PAGE BLOCK 1 HAS QUERY AND CHART DIV -->
{% block page_content1 %}

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<!--- JAVASCRIPT PART -->
<script type="text/javascript">


    $(document).on('load','#helloScript',function(){

    $('#container').highcharts({

        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

</script>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script id="helloScript" src="http://code.highcharts.com/stock/modules/exporting.js"></script>


{%  endblock %}

base.html - Just in case

<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/half_div.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">

<!--
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/rickshaw.min.css') }}">

<script src='{{ url_for('static', filename='js/d3.min.js') }}'></script>
<script src='{{ url_for('static', filename='js/d3.layout.js') }}'></script>
<script src='{{ url_for('static', filename='js/rickshaw.min.js') }}'></script>
-->
<script src='{{ url_for('static', filename='js/jquery.min.js') }}'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


{% extends "bootstrap/base.html" %}
{% block title %}My Dashboard{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">My Dashboard</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}

<div class="container" id="main_container" style="border:1px solid black;">
    {% block page_content1 %}
    {% endblock %}

</div>

<div class="container" id="graph_container" style="border:1px solid black;">
    {% block page_content2 %}
    {% endblock %}
</div>
{% endblock %}

Upvotes: 0

Views: 686

Answers (2)

dirn
dirn

Reputation: 20779

You aren't including a lot of your JavaScript. All of these tags exist outside of any block. 

<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/half_div.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">

<!--
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/rickshaw.min.css') }}">

<script src='{{ url_for('static', filename='js/d3.min.js') }}'></script>
<script src='{{ url_for('static', filename='js/d3.layout.js') }}'></script>
<script src='{{ url_for('static', filename='js/rickshaw.min.js') }}'></script>
-->
<script src='{{ url_for('static', filename='js/jquery.min.js') }}'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

They need to go inside a block that's overridden from the parent template, bootstrap.html. Ideally you'll place the stylesheets in <head> and the JavaScript in <body>.

<!-- base.html -->
{% block styles %}
    {{ super() }}

    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/half_div.css') }}">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/rickshaw.min.css') }}">

    <!-- this can stay here or go elsewhere (e.g., block metas) -->
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">
{% endblock %}

{% block scripts %}
    {{ super() }}

    <script src='{{ url_for('static', filename='js/d3.min.js') }}'></script>
    <script src='{{ url_for('static', filename='js/d3.layout.js') }}'></script>
    <script src='{{ url_for('static', filename='js/rickshaw.min.js') }}'></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
{% endblock %}

If you use JavaScript on your page that relies on other libraries (e.g., jQuery), you'll want to make sure the library is loaded before your script. The easiest (and probably best) way to do this is include your script inside the scripts block.

<!-- some_other_template.html -->
{% block scripts %}
    {{ super() }}

    <script type="text/javascript">
        $(document).on('load','#helloScript',function(){

        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
    </script>
{% endblock %}

Upvotes: 1

RamPrasadBismil
RamPrasadBismil

Reputation: 589

Making the following changes to base.html works i.e. 1. I included jquery.min.js manually before extending bootstrap/base.html so that the jquery gets loaded for sure. [ VIMP ] 2. Overridden the scripts and the styles block of bootstrap/base.html to include the scripts/stylesheets I want.

<script src='{{ url_for('static', filename='js/jquery.min.js') }}'></script>

{% extends "bootstrap/base.html" %}

{% block styles %}
{{super()}}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/half_div.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">
{% endblock %}


<!--
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/rickshaw.min.css') }}">
<script src='{{ url_for('static', filename='js/jquery.min.js') }}'></script>
<script src='{{ url_for('static', filename='js/d3.min.js') }}'></script>
<script src='{{ url_for('static', filename='js/d3.layout.js') }}'></script>
<script src='{{ url_for('static', filename='js/rickshaw.min.js') }}'></script>
-->

{% block scripts %}
{{super()}}
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script id="helloScript" src="http://code.highcharts.com/highcharts.js"></script>
{% endblock %}

Upvotes: 0

Related Questions