I just switch from jqplot to highcharts, because i couldn't find an answer for my problem with jqplot.
My problem:
I want to plot the following result from a json string. this string contains out of datapairs in the following format: yyyy00kw (year with 4digits, 00 for padding, weeknumber 2digits) and a value (could be formated to float).
because the x value of the pair could change to yyyymmdd (year month day) or yyyywwdd (year week day) it has to be a string.
My json string contains the following:
[
[
["20050043",12.800000190735],
["20050044",17.39999961853],
["20050045",10.10000038147],
["20050046",5.9000000953674],
["20050048",4.6999998092651],
["20050049",9.8999996185303],
["20050050",9.1999998092651],
["20050051",8.3999996185303],
["20050052",2.0999999046326],
["20060001",2.7000000476837],
["20060002",-1.1000000238419],
["20060004",2],
["20060005",4.9000000953674],
["20060006",6.8000001907349],
["20060007",6.0999999046326],
["20060009",4.3000001907349],
["20060010",3.4000000953674],
["20060011",8.1999998092651],
["20060012",7],
["20060017",11.60000038147],
["20060018",21.60000038147],
["20060019",24.799999237061],
["20060020",16.700000762939],
["20060021",0],
["20060022",0],
["20060024",0],
["20060025",18.10000038147],
["20060026",20.200000762939],
["20060052",2.9000000953674],
["20070001",0],
["20070019",0],
["20070020",0],
["20070024",0],
["20070025",0],
["20070026",0],
["20070027",0],
["20070028",0],
["20070029",0],
["20070030",0],
["20070031",0],
["20070032",0],
["20070033",0],
["20070034",0],
["20070035",0],
["20070036",0],
["20070037",0],
["20070038",0],
["20070039",0],
["20070040",0],
["20070041",0],
["20070042",0],
["20070043",0],
["20070044",0],
["20070045",0],
["20070046",0],
["20070047",0],
["20070048",0],
["20070049",0],
["20070050",0],
["20070051",0],
["20070052",0],
["20080001",0],
["20080002",0],
["20080003",0],
["20080004",0],
["20080005",0],
["20080006",0],
["20080007",0],
["20080008",0],
["20080009",0],
["20080010",0],
["20080012",0],
["20080013",0],
["20080017",0],
["20080018",0],
["20080019",0],
["20080020",0],
["20080021",0],
["20080022",0],
["20080023",0],
["20080024",0],
["20080025",0],
["20080026",0],
["20080027",0],
["20080028",0],
["20080029",0],
["20080030",0],
["20080031",0],
["20080034",0],
["20080035",0],
["20080036",0],
["20080037",0],
["20080038",0],
["20080039",0],
["20080040",0],
["20080041",0],
["20080042",0],
["20080043",0],
["20080044",0],
["20080045",0],
["20080046",0],
["20080047",0],
["20080048",0],
["20080049",0],
["20080050",0],
["20080051",0],
["20080052",0],
["20090001",0],
["20090002",0],
["20090003",0],
["20090004",0],
["20090005",0],
["20090006",0],
["20090024",0],
["20090025",0],
["20090026",0],
["20090028",0],
["20090029",0],
["20090030",0],
["20090031",0],
["20090032",0],
["20090033",0],
["20090034",0],
["20090035",0],
["20090036",0],
["20090037",0],
["20090038",0],
["20090039",0],
["20090040",0],
["20090041",0],
["20090042",0],
["20090043",0],
["20090044",0],
["20090045",0],
["20090046",0],
["20090047",0],
["20090048",0],
["20090049",0],
["20090050",0],
["20090051",0],
["20090052",0],
["20090053",0],
["20100001",0],
["20100002",0],
["20100003",0],
["20100004",0],
["20100005",0],
["20100006",0],
["20100007",0],
["20100008",0],
["20100009",0],
["20100010",0],
["20100011",0],
["20100012",0],
["20100013",0],
["20100014",0],
["20100015",0],
["20100016",0],
["20100017",0],
["20100018",0],
["20100019",0],
["20100020",0],
["20100021",0],
["20100022",0],
["20100023",0],
["20100024",0],
["20100025",0],
["20100026",0],
["20100027",0],
["20100028",0],
["20100029",0],
["20100030",0],
["20100031",0],
["20100032",0],
["20100033",0],
["20100034",0],
["20100035",0],
["20100036",0],
["20100037",0],
["20100038",0],
["20100039",0],
["20100040",0],
["20100041",0],
["20100042",0],
["20100043",0],
["20100044",0],
["20100045",0],
["20100046",0],
["20100047",0],
["20100048",0],
["20100049",0],
["20100050",0],
["20100051",0],
["20100052",0],
["20100053",0],
["20110001",0],
["20110002",0],
["20110003",0],
["20110004",0],
["20110005",0],
["20110006",0],
["20110007",0],
["20110008",0],
["20110009",0],
["20110010",0],
["20110014",0],
["20110015",0],
["20110016",0],
["20110017",0],
["20110018",0],
["20110019",0],
["20110020",0],
["20110021",0],
["20110022",0],
["20110023",0],
["20110024",0],
["20110025",0],
["20110026",0],
["20110027",0],
["20110028",0],
["20110029",0],
["20110030",0],
["20110031",0],
["20110032",0],
["20110033",0],
["20110034",0],
["20110035",0],
["20110036",0],
["20110039",0],
["20110043",0],
["20110044",0],
["20110045",0],
["20110046",0],
["20110047",0],
["20110048",0],
["20110049",0],
["20110052",0],
["20120001",0],
["20120002",0],
["20120003",0],
["20120004",0],
["20120005",0],
["20120006",0],
["20120007",0],
["20120009",0],
["20120010",0],
["20120013",0],
["20120014",0],
["20120015",0],
["20120016",0],
["20120017",0]
]
]
Here is my javascript code:
<script class="code" type="text/javascript">
var data = [];
var chart;
$(document).ready(function() {
//hier geht es los
$.getJSON("120925_sql_bauen.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'line'
},
title: {
text: 'Wetterdatenprojekt'
},
xAxis: {
//categories: []
},
yAxis: {
title: {
text: 'aktuelle Wetterwerte'
},
plotLines: [{
value: 0,
width: 1
}]
},
series: json
});
});
});
</script>
Unfortunately highcharts shows no plot.
I hope, that highcharts doesn't have the same problem with strings then jqplot :-(
The problem is that you try to use your reply directly. You need to "remove" one layer of arrays. That is data should be json[0]
I updated my example: http://jsfiddle.net/GgNmY/2/
Regarding previous note that values should be numeric is only true for Y-axis (at least in earlier versions of Highcharts).
Edit: Here is to extract the data point (the values) and the categories.
var data = [];
var cats = [];
json[0].forEach(function(point){
data.push(point[1]);
cats.push(point[0]);
});
Here is an running example: http://jsfiddle.net/GgNmY/3/
In Highchart, you can set your series : data object in the form of the JSON input.
In such a case, if the JSON input is in the form:
[
[1,12],
[2,5],
[3,18],
....
[10,22]
]
Then the following attribute can be added in the chart definition:
series:[{
data: json
}]
Here is the running JSFiddle example
I'm pulling some data from a database that I'm trying to render into a Highcharts stock chart. The data is pulled from the database with PHP and passed to the chart with a $.get(..php/line-data.php) call, and the data retrieved is supposed to be the data that is rendered on the chart.
The data is being returned in the following manner, and I have verified this by logging data in the console. It appears as such, with the first value being the UNIX-to-Javascript converted date/time (x-axis), and the second being the value (y-axis):
[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]
As an experiment, I tried just plugging this data straight into a basic demo Fiddle, and it seems to render fine.
FIDDLE HERE.
So what am I doing incorrectly? Everything seems to be set up correctly, but it's not rendering. This is what I see:
Here are the relevant portions of my code. Yes, I know that mysql_* is deprecated...I'll change it.
$.get('../php/line-data.php', function(data) {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'total_mentions',
margin: [20, 10, 10, 10],
spacingTop: 0,
spacingBottom: 1,
spacingLeft: 0,
spacingRight: 0
},
series : [{
name : 'Total Mentions',
data: data,
type:'line',
lineWidth:1,
shadow:false,
states: {
hover: {
lineWidth:1
}
},
id : 'dataseries',
tooltip : {
valueDecimals: 4,
borderColor:'#DA7925',
borderRadius: 0,
borderWidth: 1,
shadow: false
},
color:'#DA7925',
fillOpacity:0.2
}]
[more options...etc.]
No problems with this code. It's pulling the correct data and echoing how I expect it to.
<?php
$expAddress = "URL";
$expUser = "USERNAME";
$expPwd = "PASSWORD";
$database = "DB";
$db = mysql_connect($expAddress, $expUser, $expPwd);
mysql_select_db($database, $db);
$ok = mysql_query("
SELECT
DATE(created_at) AS create_date,
COUNT(id) AS total
FROM
tweets
WHERE
subject LIKE 'word1'
OR
subject LIKE 'word2'
GROUP BY
DATE(created_at)");
if (!$ok) {
echo "<li>Mysql Error: ".mysql_error()."</li>";
}
else {
while($row = mysql_fetch_assoc($ok)){
extract($row);
$date = strtotime($create_date);
$date *= 1000;
$data[] = "[$date, $total]";
}
$tmp = join($data,',');
echo "[".$tmp."]";
}
?>
Have you tried parsing your data (string) into a javascript object before setting it to the series[i].data?
series : [{
data: JSON.parse(data)
}]
What you are getting from php through $.get is basically string and NOT a javascript array of array of numbers, which is what you want. It may look like that, but it is as simple as "5"!=5, but parseInt("5")==5 same is the case with json objects, you need to parse the string into such an object before javascript or highcharts can interpret it correctly, highcharts could do it on your behalf, but it is not designed that way.
Try his fiddle to get an idea of the data types in picture
var data="[[1362639600000, 8],[1362726000000, 20],[1362985200000, 28],[1363071600000, 51],[1363158000000, 64],[1363244400000, 11],[1363330800000, 4],[1363503600000, 4],[1363590000000, 21],[1363676400000, 10],[1363762800000, 31],[1363849200000, 13],[1363935600000, 17],[1364194800000, 10],[1364454000000, 1],[1365058800000, 30],[1365145200000, 10],[1366009200000, 55],[1366182000000, 18],[1366268400000, 22],[1366354800000, 12]]"
console.log(typeof data); //string
var parsedData=JSON.parse(data);
console.log(typeof parsedData); //object
console.log(typeof parsedData[0]); //object [1362639600000, 8]
console.log(typeof parsedData[0][0]); //number 1362639600000
When you paste the console value directly in the fiddle, you are actually pasting it as a valid javascript array, try using your console value wrapped by " quotes " and see that the exact issue is reproduced!!
Demo # jsFiddle
An alternate approach could be using the $.getJSON() method instead. jQuery does the parsing for you before it calls your callback method
Your problem is in either the output from the PHP script or when you receive the data in your Javascript (quite obvious).
First, don't do JSON by hand use json_encode (http://php.net/manual/en/function.json-encode.php). It's easier and it will guarantee that strings will be escaped properly.
Secondly, inspect your data variable with a debugger. You could also post the exact content of the variable to the question.
But basically, as long as it is working in the fiddle and not in your program you have not yet reproduced the error in your code properly in the fiddle.
For instance, you could replace data in your callback with the data you have in your fiddle to see if the code runs.