I have tornados table with columns damage,date,month . I used the following code to create a barchart .

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>D3 Visualization API Sample</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">       </script>
        script type="text/javascript" src="libs/underscore-1.1.6.js"></script>
        <script type="text/javascript" src="libs/backbone.js"></script>
        <script type="text/javascript" src="libs/d3.min.js"></script>
        <script type="text/javascript" src="backbone.cartodb.js"></script>
        <script type="text/javascript" src="d3.cartodb.js"></script>
        <link href='css/cartodb.d3.default.css' rel='stylesheet' type='text/css' />
        <style type="text/css">
        #cartodb_d3 {
        float: left; width: 800px;
       <script type="text/javascript">
        var CartoDB = Backbone.CartoDB({user: 'praveensimbu'});
        var tor = CartoDB.CartoDBCollection.extend({
        sql: function() {
        return "select month,damage as magnitude from tor group by month order by month     asc";
         var eq = new tor();
       var CartoD3 = Backbone.CartoD3(eq);
       $(document).ready(function() {
        var barchart = new CartoD3.BarChart({ el: $("#cartodb_d3"), variable:      'magnitude', label: 'month', title: "damage by tornados"});
       <body style="font-family: Arial;border: 0 none;">
       <div id="cartodb_d3"></div>

But When I run it, the chart is not displayed, instead I am getting the below as result.

enter image description here

Please let me know where I went wrong.

1 Answer 1


Everything is ok in your code except this statement:

"select month, damage as magnitude from tor group by month order by month asc"

At first glance, this SQL query seems ok, but it isn't.

Your browser already told you that the code have the following error:

{"error":["column \"tor.damage\" must appear in the GROUP BY clause or be used in an aggregate function"]}

I know that because I've tested the code with my browser.

By opening the debugging tools (Developer Tools) built into your browser (in my case, using "Ctrl + Shift + I", because I'm working with Chrome) you will see something similar to this:

enter image description here

The error indicates us two ways to follow.

Let's explore the first one, and put the damage column in the GROUP BY clause:

"select month, damage as magnitude from tor group by month, damage order by month asc"

enter image description here

Obviously, this is working, but, I wonder, is this what you are looking for?

Well, maybe it's better to explore the second way, and to use an aggregate function (avg, max, min, sum, etc.), which compute a single result from a set of input values:

"select month, sum(damage) as magnitude from tor group by month order by month asc"

I think this result must be closer to your expectations:

enter image description here

I leave you the pleasure to identify a function to meets your requirements.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.