I don't understand whats wrong with the way im passing django list to json

[G Z]

so I'm trying to display some vm performance data on javascript charts. It needs the information as a list, I have tried passing a json list from django and a django list like below in the javascript i ahve the one they tell me to use and the one im trying the one they tell me to use works obviously and i kept it there as reference to see how it needs to be input. How do I get the variables between django and javascript in an acceptable way?

         for stat in vm_stats:

             cpu_values.append(stat[4])

          cpu_json = simplejson.dumps(cpu_values)

          

          context = Context({'user.is_superuser':user.is_superuser, 

                            'customers':customers,

                            'vms': vms,

                            'vm_stats': vm_stats,

                            'customer_id': customer_id,

                            'cpu_json':cpu_json,

   

                            

                             })

<script src="{% static 'js/chart.js' %}"></script>

<script>

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var lineChartData = {

labels : ["January","February","March","April","May","June","July"],

datasets : [

{

label: "My First dataset",

fillColor : "rgba(220,220,220,0.2)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(220,220,220,1)",

data : [{{cpu_json}}]

},

{

label: "My Second dataset",

fillColor : "rgba(151,187,205,0.2)",

strokeColor : "rgba(151,187,205,1)",

pointColor : "rgba(151,187,205,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(151,187,205,1)",

data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

}

]

}

window.onload = function(){

var ctx = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(ctx).Line(lineChartData, {

responsive: true

});

}

</script>

[Tom Evans]

It doesn't seem like you have done much to debug this yet.

When you look at the generated javascript, does your "data" property
look the same type as the examples, or does it look different. Hint,
in your "My Second dataset", "data" is an array of values - is it an
array of values in "My First dataset".

Cheers

Tom

[G Z]

Tom, I have done alot actually,

I have put the data into a json array, a list, a tupple, a dictionary. I have tried the following:

my data has been passed in every possible way I can think of. What I need to know how to do is convert a python list I pass with django to a javascript list because I believe that will correct the problem. Yes you are correct if I look at the second one [1,2,3,45,5] is how the data is ordered ie it is a list, however my data passes exactly the same.

<script>

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var lineChartData = {

labels : ["1000","2000","3000","4000","5000","6000","7000", "8000", "9000", "10000", "11000", "12000", "13000", "14000", "15000",],

datasets : [

{

label: "CPU Usage in MHZ",

fillColor : "rgba(220,220,220,0.2)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(220,220,220,1)",

                                        data : [{{Json_data}}]

                                        data : {{json_data}}

                                        data : {{tupple_array}}

                                        data : {{ list }}

                                        data : [ {{tupple_data }} ]

                                        data : [ {{ list }} ]

                                        

} 

]

[G Z]

fixed it i was passing strings and not integers

<script src="{% static 'js/chart.js' %}"></script>

<script>

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var lineChartData = {

labels : ["1000","2000","3000","4000","5000","6000","7000", "8000", "9000", "10000", "11000", "12000", "13000", "14000", "15000",],

datasets : [

{

label: "CPU Usage in MHZ",

fillColor : "rgba(220,220,220,0.2)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(220,220,220,1)",

data : {{cpu_values}}

[G Z]

["2014-07-28 14:24:11", "2014-07-28 14:24:11"]

[G Z]

the values will show how, but i ran into another problem while trying to input the labels, labels need to be strings so I input them as an array such as the following: ["2014-07-28 14:24:11", "2014-07-28 14:24:11"] I saved it as a simple json in django and pass it to the webbrowser and then conver the json to a javascript value and pass that as the labels. Normally labels is ['sdfsdf','sdfsfs'] which is exactly how I pass mine Ive passed with "" and '' it doesn't matter. I'm trying to use the datetimes as the graph labels.

<script src="{% static 'js/chart.js' %}"></script>

<script> 

var dates = JSON.parse("{{ date_values }}");

var lineChartData = {

labels : [dates],

[G Z]

solved

date_values= json.dumps(list(date_values), cls=DjangoJSONEncoder)

<script>

var date_values = {{ date_values|safe }};

var lineChartData = {

labels : date_values,

datasets : [

{

label: "CPU Usage in MHZ",

fillColor : "rgba(220,220,220,0.2)",

strokeColor : "rgba(220,220,220,1)",

pointColor : "rgba(220,220,220,1)",

pointStrokeColor : "#fff",

pointHighlightFill : "#fff",

pointHighlightStroke : "rgba(220,220,220,1)",

data : {{cpu_values}}

}

]

}

window.onload = function(){

var ctx = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(ctx).Line(lineChartData, {

responsive: true

});

}

</script>