[web2py] 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}}
        
    });

-- 
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
--- 
You received this message because you are subscribed to the Google Groups 
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to web2py+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/web2py/ef717b94-96ca-48c7-8829-147706f242een%40googlegroups.com.