4 Replies - 633 Views - Last Post: 29 July 2014 - 01:18 PM

#1 zukeru  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 160
  • Joined: 25-December 09

Javscript array to Chartsjs Questions

Posted 29 July 2014 - 08:55 AM

So I am passing two arrays, one with values to graph and its integers, and another with dates and times which are strings. I'm using Chartjs charts to do this. However I'm passing the datetime as strings as it wants, but it won't display. However I'm passing the values the same way as integers and it will display. I know this is just a javascript ism.

so currently I have
date_values

["2014-07-28 14:24:11", "2014-07-28 14:24:11"]
technically the date_values is a json list, but ive tried a normal list as well.


cpu_values
[112, 112]

	<script src="{% static 'js/chart.js' %}"></script>
	<script>
		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>


this is the example they show

var data = {
    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: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            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: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


I'm not really sure why mine isn't working it has the same format as the list the example is using.

Is This A Good Question/Topic? 0
  • +

Replies To: Javscript array to Chartsjs Questions

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 592
  • Joined: 15-March 14

Re: Javscript array to Chartsjs Questions

Posted 29 July 2014 - 11:59 AM

I am not familiar with chart.js but going by the example you provided I would say your problem is the you are passing the wrong type.

Their example shows.
data: [28, 48, 40, 19, 86, 27, 90]

This is an array of values.

Your dataset has
cpu_values = [112, 112]
...
data:{{cpu_values}}

Which is meaningless in Javascript and should throw a Syntax Error.

It should be
data:cpu_values


The same goes for labes. Remove the double curlies.
Was This Post Helpful? 0
  • +
  • -

#3 zukeru  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 160
  • Joined: 25-December 09

Re: Javscript array to Chartsjs Questions

Posted 29 July 2014 - 01:04 PM

{{date_values}} - that is how django passes the data to the page in python, thus in html to call that variable it is
 {{date_values}}


what you showed isn't what im doing the data is {{cpu_values}} and yes that data is
[1,2,3,4]

but if you look at their labels which is what im setting the date value to because that will show interval between the polls.
labels: ["January", "February", "March", "April", "May", "June", "July"],
<- is how they have it.

my python passed
list is: ["2014-07-28 14:24:11", "2014-07-28 14:24:11"]
which is the same format as thier labels list. I can pass it as json and parse it into java script but it still doesn't work maybe my code for that is wrong.








View PostBlindman67, on 29 July 2014 - 12:59 PM, said:

I am not familiar with chart.js but going by the example you provided I would say your problem is the you are passing the wrong type.

Their example shows.
data: [28, 48, 40, 19, 86, 27, 90]

This is an array of values.

Your dataset has
cpu_values = [112, 112]
...
data:{{cpu_values}}

Which is meaningless in Javascript and should throw a Syntax Error.

It should be
data:cpu_values


The same goes for labes. Remove the double curlies.


im getting this from console


Uncaught SyntaxError: Unexpected token &

This post has been edited by zukeru: 29 July 2014 - 01:02 PM

Was This Post Helpful? 0
  • +
  • -

#4 zukeru  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 160
  • Joined: 25-December 09

Re: Javscript array to Chartsjs Questions

Posted 29 July 2014 - 01:11 PM

solved

<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>

This post has been edited by laytonsdad: 29 July 2014 - 06:13 PM
Reason for edit:: Added code tags

Was This Post Helpful? 0
  • +
  • -

#5 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 592
  • Joined: 15-March 14

Re: Javscript array to Chartsjs Questions

Posted 29 July 2014 - 01:18 PM

Its hard to help as you have not actually said what is not working. As far as the code goes, I can not see any problems there. Try using Dev Tools to debug the code. Dev tools can be found with context menu (right click) under Inspect element (Chrome, Firefox,IE11). Then Tab to the console or source.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1