Forums

Passing Python variable (i.e. json data object) through javascript

Hi,

I'm using FusionCharts in my Python Django project and I need to dynamically feed charts with data. That's why I need to render json data objects to the FusionCharts written in javascript, which are included in the HTML template but somehow it does not work. It seems that my problem is json independent so I have the same problem passing a string or a number variable.

I found the following instructions on StackOverflow: http://stackoverflow.com/questions/1445989/passing-python-data-to-javascript-via-django

So to call the variable one has to declare a new variable in javascript:

data_from_django = {{ my_data }};

or 

var data_from_django = {{ my_data }};

My javascript looks like:

<script type="text/javascript">

FusionCharts.ready(function(){

  var revenueChart = new FusionCharts({
      "type": "column2d",
      "renderAt": "bar_chart_container",
      "width": "100%",
      "height": "250",
      "dataFormat": "json",
      "dataSource":  {
        "chart": {
          "xAxisName": "Month",
          "yAxisName": "Expenses (€)",
          ....

       },
       "data": [
          {"label": "Jan", "value": "420000"},
          {"label": "Feb", "value": "810000"}, 
           ....]
      }

  });
revenueChart.render();
})
</script>

The charts work fine until I declare a new variable to pass the Python variable

<script type="text/javascript">

FusionCharts.ready(function(){
  var test = {{ json_data }};
  var revenueChart = new FusionCharts({
      "type": "column2d",
      "renderAt": "bar_chart_container",   
  ..
  ..
  ..

Strange is that it also fails when I try to pass a normal string variable like for example 

   var test = {{ username }};

I'm not an expert in javascript but what do I miss here?

deleted-user-421739 | 13 posts | Nov. 5, 2014, 8:30 a.m. | permalink

Look at the generated Javascript. My guess is that you need to include those string variables in quotes:

var test = "{{ json_data }}";

and

var test = "{{ username }}";

You'll probably also need to be careful about quotes in your data, but your framework may do the escapeing for you.

Staff glenn | 10043 posts | PythonAnywhere staff | Nov. 5, 2014, 10:37 a.m. | permalink

Thanks for that, it works. Sry for this late answer.

Now I'm trying to only pass the 

"data": [
      {"label": "Jan", "value": "420000"},
      {"label": "Feb", "value": "810000"}, 
       ....]

part of the json data source used by Fusioncharts

So I did the following in my view.py

block001_data = []

jan_data = {}
jan_data["label"] = "Jan"
jan_data["value"] = "420000"
block001_data.append(jan_data)

feb_data = {}
feb_data["label"] = "Feb"
feb_data["value"] = "810000"
block001_data.append(feb_data)

....

 block001_json = json.dumps(block001_data)

and I unclude block001_json in the view context to pass it to the Fusioncharts javascript in my HTML file:

<script type="text/javascript">

FusionCharts.ready(function(){

var block001_json = "{{ block001_json }}";


var revenueChart = new FusionCharts({
    "type": "column2d",
    "renderAt": "bar_chart_container",
    "width": "100%",
    "height": "250",
    "dataFormat": "json",
    "dataSource":  {
      "chart": {
        "xAxisName": "Month",
        "yAxisName": "Expenses (€)",
        "theme": "fint",
        "bgColor": "#FFFFFF",
        "bgAlpha": "0",

     },
     "data": block001_json
    }

});
revenueChart.render();
})
</script>

It doesn't show anything. Is that the correct way to do it anyway?

deleted-user-421739 | 13 posts | Nov. 10, 2014, 3:51 p.m. | permalink

Do you get an error in your Javascript console in your browser?

Staff glenn | 10043 posts | PythonAnywhere staff | Nov. 10, 2014, 4:14 p.m. | permalink

The javascript console only shows:

GET http://www.dashboard.lu/static/js/jquery.min.map   404 (NOT FOUND)
GET http://www.dashboard.lu/static/css/bootstrap.css.map    404 (NOT FOUND)

By the way the graph frame of Fusion Charts says:

No data to display

It's strange that the data needed looks like

[
         {"label": "Jan", "value": "541000"},
         {"label": "Feb", "value": "810000"},
         ....
         {"label": "Nov", "value": "450000"},
         {"label": "Dec", "value": "670000"}
 ]

which is exactly what I see when I pass the data in HTML outside of Javascripot

deleted-user-421739 | 13 posts | Nov. 11, 2014, 1:29 p.m. | permalink

I think the problem is actually those quotes. For a string, you need them:

var test = "{{ username }}";

...but for the JSON data (because it's essentially JavaScript code that you want to execute) you don't need them:

var block001_json = {{ block001_json }};

If removing them doesn't work, perhaps you could give us a URL to look at where we can see the problem? That would make it easier to debug.

Staff giles | 12669 posts | PythonAnywhere staff | Nov. 11, 2014, 1:51 p.m. | permalink