BaseLineOptionsChartView: Need an option `callback` for y-axes ticks to line chart #50

gauravndabhade · 2020-04-11T08:12:42Z

I am trying to configure line chart options, for formatting y-axes tick values.

class LineChartJSONView(BaseLineOptionsChartView):
    
    ...
    ## I have implemented `get_labels` & `get_data` functions
    ...

    def get_options(self):
        return {
            "responsive": True,
            "scales": {
                "xAxes": [{
                    "scaleLabel": {
                        "display": True,
                        "labelString": "Daily"
                    }
                }],
                "yAxes": [{
                    "scaleLabel": {
                        "display": True,
                        "labelString": 'Count'
                    },
                    "ticks": {
                        "beginAtZero": True,

                         ## Need to pass function from `dict`
                        "callback": function (value) { if (value % 1 === 0) { return value; } }
                    }
                }],
            },
        }

line_chart_json = LineChartJSONView.as_view()

I have called line_chart_json in template.

...
<html>
    <canvas id="myChart" width="500" height="400"></canvas>
    ...
<script type="text/javascript">
    $.get('{% url "line_chart_json" %}', function (response) {
        var ctx = $("#myChart").get(0).getContext("2d");
        new Chart(ctx, {
            type: 'line',
            data: response.data,
            options: response.options
        });
    });

</script>
</html>

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

Natim · 2020-05-06T13:24:21Z

I don't think we should support writting JavaScript in a Python string and then evaluate it in JS.

I guess one should define the javascript callback in javascript and then add it like that:

    $.get('{% url "line_chart_json" %}', function (response) {
        var ctx = $("#myChart").get(0).getContext("2d");
        var options = response.options;
        options.scales.yAxes[0].ticks.callback = function (value) { if (value % 1 === 0) { return value; } };
        new Chart(ctx, {
            type: 'line',
            data: response.data,
            options: options
        });
    });

Natim closed this as completed May 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BaseLineOptionsChartView: Need an option `callback` for y-axes ticks to line chart #50

BaseLineOptionsChartView: Need an option `callback` for y-axes ticks to line chart #50

gauravndabhade commented Apr 11, 2020 •

edited

Loading

Natim commented May 6, 2020 •

edited

Loading

BaseLineOptionsChartView: Need an option callback for y-axes ticks to line chart #50

BaseLineOptionsChartView: Need an option callback for y-axes ticks to line chart #50

Comments

gauravndabhade commented Apr 11, 2020 • edited Loading

Natim commented May 6, 2020 • edited Loading

BaseLineOptionsChartView: Need an option `callback` for y-axes ticks to line chart #50

BaseLineOptionsChartView: Need an option `callback` for y-axes ticks to line chart #50

gauravndabhade commented Apr 11, 2020 •

edited

Loading

Natim commented May 6, 2020 •

edited

Loading