Adding "chart_attr" to extras causes build of faulty js-code #123

CrusaderW · 2016-06-09T10:00:21Z

Hi,
I'm using the python-nvd3==0.14.2 library with django-nvd3==0.9.7.
The problem is that a line where I try to pass a xAxis.ticks-argument through to nvd3, but this causes a colon to be in the js-code, which is not supposed to be there (to my best knowledge).
I'm willing to fix this myself and make a pull-request, but I need in tracking down the part of the code which causes the error.

The Code of my view.py is:

from collections import OrderedDict
from django.shortcuts import render_to_response
import services
import helper
import logging

def revenue(request):
    """
    linewithfocuschart page
    """
    loader = services.DataLoader()
    rev = loader.revenue()

    xdata = rev['dates']
    xdata = [int(x.strftime("%s")) * 1000 for x in xdata]
    ydata = rev['revenue']
    ydata = [int(x) for x in ydata]

    tooltip_date = "%a %d %b"
    extra_serie1 = {"tooltip": {"y_start": "Es wurden ", "y_end": " Euro umgesetzt"},
                    "date_format": tooltip_date}

    chartdata = {
        'x': xdata, 'name1': 'Umsatz', 'y1': ydata, 'extra1': extra_serie1,
    }
    charttype = "lineWithFocusChart"
    chartcontainer = 'linewithfocuschart_container'  # container name
    data = {
        'charttype': charttype,
        'chartdata': chartdata,
        'chartcontainer': chartcontainer,
        'extra': {
            'x_is_date': True,
            'x_axis_format': '%a, %d %b',
            'y_axis_format': 'f',
            'tag_script_js': True,
            'jquery_on_ready': True,
            'chart_attr':{'xAxis':'.ticks(d3.time.monday.range, 1)'}
        }
    }
    return render_to_response('linewithfocuschart.html', data)

removing the line

'chart_attr':{'xAxis':'.ticks(d3.time.monday.range, 1)'}

fixes the issue and the chart is drawn correctly.

If the above line remains in the code this produces the following html/js-code:

<head>
    <link media="all" href="/static/nvd3/build/nv.d3.min.css" type="text/css" rel="stylesheet" />
<script src="/static/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/nvd3/build/nv.d3.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script>

    $(function(){

        data_linewithfocuschart_container=[{"values": [{"y": 77928, "x": 1463004000000}, {"y": 79349, "x": 1463090400000}, {"y": 40767, "x": 1463176800000}, {"y": 72946, "x": 1463263200000}, {"y": 98970, "x": 1463349600000}, {"y": 219339, "x": 1463436000000}, {"y": 155139, "x": 1463522400000}, {"y": 130175, "x": 1463608800000}, {"y": 99961, "x": 1463695200000}, {"y": 43407, "x": 1463781600000}, {"y": 67040, "x": 1463868000000}, {"y": 248326, "x": 1463954400000}, {"y": 163222, "x": 1464040800000}, {"y": 127496, "x": 1464127200000}, {"y": 89661, "x": 1464213600000}, {"y": 88589, "x": 1464300000000}, {"y": 44776, "x": 1464386400000}, {"y": 61183, "x": 1464472800000}, {"y": 214784, "x": 1464559200000}, {"y": 163953, "x": 1464645600000}, {"y": 122024, "x": 1464732000000}, {"y": 133576, "x": 1464818400000}, {"y": 97190, "x": 1464904800000}, {"y": 50559, "x": 1464991200000}, {"y": 70575, "x": 1465077600000}, {"y": 218886, "x": 1465164000000}, {"y": 143956, "x": 1465250400000}, {"y": 60638, "x": 1465336800000}], "key": "Umsatz", "yAxis": "1"}];

    nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_linewithfocuschart_container;
        chart.color(d3.scale.category20().range());
            chart.yAxis
                .tickFormat(d3.format(',f'));
            chart.y2Axis
                .tickFormat(d3.format(',f'));
            chart.xAxis
                .tickFormat(function(d) { return d3.time.format('%a, %d %b')(new Date(parseInt(d))) }
);
            chart.x2Axis
                .tickFormat(function(d) { return d3.time.format('%a, %d %b')(new Date(parseInt(d))) }
);
                chart.tooltipContent(function(key, y, e, graph) {
                    var x = d3.time.format("%a %d %b")(new Date(parseInt(graph.point.x)));
                    var y = String(graph.point.y);
                                        if(key == 'Umsatz'){
                        var y = 'Es wurden ' +  String(graph.point.y)  + ' Euro umgesetzt';
                    }

                    tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
                    return tooltip_str;
                });

      chart.showLegend(true);
:
                chart.xAxis.ticks(d3.time.monday.range, 1);  
        d3.select('#linewithfocuschart_container svg')
            .datum(datum)
            .transition().duration(500)
            .attr('height', 450)
            .call(chart);
    });

        });
   </script>
</head>
<body>
    <div id="linewithfocuschart_container"><svg style="width:100%;height:400px;"></svg></div>
</body>

Like I said, I guess the problem is the colon, which is in the code right before:

chart.xAxis.ticks(d3.time.monday.range, 1);

as this is exactly I've been trying to generate with my added line in Python, and the close proximity of the colon to my code indicates that it has to do with my line.
I'm not sure that python-nvd3 causes the problem, as django-nvd3 just passes through the argument in kwargs to load_chart which is python-nvd3 function.
But in Python-nvd3 I can't figure out how this argument is handled further, from line 135 in NVD3Chart.py on.

Thanks for your help.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding "chart_attr" to extras causes build of faulty js-code #123

Adding "chart_attr" to extras causes build of faulty js-code #123

CrusaderW commented Jun 9, 2016

Adding "chart_attr" to extras causes build of faulty js-code #123

Adding "chart_attr" to extras causes build of faulty js-code #123

Comments

CrusaderW commented Jun 9, 2016