json Data from the server not displaying!

[mostwanted]

I have data that is in json format from the database, i want to draw a graph with data but i'm not sure how to display it in my view in graph format using the plotly library. My view code display nothing!

CONTROLLER

def dashboard():
    call_clicks = db().select(db.dashboard.call_clicks)
    social_clicks = db().select(db.dashboard.social_clicks)
    profile_views = db().select(db.dashboard.profile_views)
    data = {
        'call_clicks': [c.call_clicks for c in call_clicks],
        'social_clicks': [s.social_clicks for s in social_clicks],
        'profile_views': [p.profile_views for p in profile_views]
    }
    data_json = json.dumps(data)
    return dict(data_json=data_json)

VIEW

This code displays nothing

{{extend 'layout.html'}}

<div class="container">
    Data
    <canvas id="dashboard-chart" ></canvas>
</div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script>
$(document).ready(function() {
    // retrieve data from the server
    $.getJSON('/default/dashboard', function(data_json) {
       
        // Make sure that data is an object with the expected keys
        {{if data_json:}}
            // Get the data values
            var call_clicks = data_json['call_clicks'];
            var social_clicks = data_json['social_clicks'];
            var profile_views = data_json['profile_views'];
           
            // Create a new chart
            var trace = {
                x: ['Call Clicks', 'Social Clicks', 'Profile Views'],
                y: [call_clicks, social_clicks, profile_views],
                type: 'bar',
                marker: {
                    color: 'rgba(255, 99, 132, 0.6)',
                    line: {
                        color: 'rgba(255, 99, 132, 1.0)',
                        width: 1
                    }
                }
            };

            var layout = {
                title: 'Data on the rate of interaction',
                xaxis: {
                    title: 'Interaction Type',
                    tickfont: {
                        size: 14,
                        color: 'rgb(107, 107, 107)'
                    }
                },
                yaxis: {
                    title: 'Interaction Count',
                    titlefont: {
                        size: 16,
                        color: 'rgb(107, 107, 107)'
                    },
                    tickfont: {
                        size: 14,
                        color: 'rgb(107, 107, 107)'
                    }
                },
                showlegend: false
            };

            Plotly.newPlot('dashboard-chart', [trace], layout);
        {{else:}}
            console.log('Error: Invalid data received from server.');
        {{pass}}
       
    });

[Leonel Câmara]

The problem is that you are creating the string you want to return and then putting it in a dictionary. You could just have returned the string. That said it's better to use response.json which does a few other things for you.

Try this

def dashboard():
    call_clicks = db().select(db.dashboard.call_clicks)
    social_clicks = db().select(db.dashboard.social_clicks)
    profile_views = db().select(db.dashboard.profile_views)
    data = {
        'call_clicks': [c.call_clicks for c in call_clicks],
        'social_clicks': [s.social_clicks for s in social_clicks],
        'profile_views': [p.profile_views for p in profile_views]
    }

    return response.json(data)