score:15
solved:
i found an answer that finally worked! frustrating that it took me several days because it wasn't well documented by highcharts (and/or maybe my understanding of jquert and javascript is still at a novice level).
the answer is do not send the x/y data as a preformed array in your json object, but instead simply send the numbers that make up the date (x value) and the value (y value) as a list of comma separated values in a json object, and then do the parsing and pushing on the client end.
for example: i originally was trying to get my php to send something like
[{"name":"name 1","data":["[date.utc(2011,11,08), 4 ]","[date.utc(2011,11,09), 4 ]","[date.utc(2011,11,10), 4 ]","[date.utc(2011,11,11), 4 ]","[date.utc(2011,11,14), 3 ]"]}
but what i really needed to do was send something like
[{"name":"name 1","data":["2011,11,08, 4","2011,11,09,4"....`
the first step is to make sure you have the "series" option set to an empty array series: []
(i mention this because i've seen other answers where this was done differently).
then in your getjson function, you need to create a new object for each object you're pulling in, which also includes an empty "data" array (see "var series" below).
then nest a few $.each
loops to parse and push the data into their necessary arrays, and populate the "name" of each object:
$.getjson('http://exmaple.com/getdata.php?id=' + id, function(data) {
$.each(data, function(key,value) {
var series = { data: []};
$.each(value, function(key,val) {
if (key == 'name') {
series.name = val;
}
else
{
$.each(val, function(key,val) {
var d = val.split(",");
var x = date.utc(d[0],d[1],d[2]);
series.data.push([x,d[3]]);
});
}
});
options.series.push(series);
});
after the above code, you need to instantiate the chart:
var chart = new highcharts.chart(options);
and that should be it!
hopefully somebody else finds this answer useful and doesn't need to beat themselves over the head for days trying to figure it out. :-)
score:0
checked in php5.5
you can simply add this into the json with the data series
$date = '31-12-2015 00:00:00';
$datetimeutc = (strtotime($date) * 1000);
$data[] = [$datetimeutc, (float) $value];
score:0
i came across the problem of sending timestamps produced by mktime() because highcharts expects utc time while php timestamp is not utc. the data could be shown on a wrong day in the chart, so you also have to consider the time zone.
function _converttoutc($timestamp) {
return (int)$timestamp + (int)date('z', $timestamp);
}
code example would be:
$serie = array(
'name' => 'title',
'data' => array(
// multiply timestamp by 1000 to get milliseconds
array(_converttoutc(mktime(0,0,0,1,1,2016)) * 1000, 15),
array(_converttoutc(mktime(0,0,0,2,1,2016)) * 1000, 18),
array(_converttoutc(mktime(0,0,0,3,1,2016)) * 1000, 13),
),
);
echo json_encode($serie);
score:2
just checked with some sample code for highcharts, series
needs to be an array of json objects each containing {"name":"item1","data":"[date.utc(2011,11,08), 4 ],"}
etc.
the main problem is your output from page2, is not an array.
you'll need to fix your $.each first, you need to push value
, not data
:
$.each(data, function(key,value) {
options.series.push(value);
});
this will properly set each item in series to the full json object.
then to fix the output:
$output = [];
while ($item = mysql_fetch_assoc($result)) {
$name = $item['item1'];
$date = str_replace("-",",",$item['item2']);
$pos = $item['item3'];
//i don't think there's supposed to be a comma after this square bracket
$arr = array("name"=>$name,"data"=>"[date.utc(".$date."), ".$pos." ]");
array_push($output, json_encode($arr));
}
echo "[";
foreach($output as $val){
echo $val;
if($val != end($output)) echo ",";
}
echo "]";
and that should do it.
score:3
since javascript utc method will return with an integer, it's just better if you just pass the unix timestamp as an integer when you're generating the json on the serverside instead trying to pass a function (utc.date) in the json - that makes the entire json invalid!
so
instead of this
while ($item = mysql_fetch_assoc($result)) {
$name = $item['item1'];
$date = str_replace("-",",",$item['item2']);
$pos = $item['item3'];
$arr = array("name"=>$name,"data"=>"[date.utc(".$date."), ".$pos." ],");
echo json_encode($arr);
}
do this:
while ($item = mysql_fetch_assoc($result)) {
$name = $item['item1'];
$unix_date = date("y-m-d", strtotime($item['item2']));
$pos = $item['item3'];
$arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],");
echo json_encode($arr);
}
please note we're multiplying the php unix timestamp by 1000 to make it js compatible.
reference: http://www.w3schools.com/jsref/jsref_utc.asp
Source: stackoverflow.com
Related Query
- Highcharts data series issue with ajax/json and PHP
- Highcharts with JSON data and multiple series
- Highcharts with ajax and json data what am i doing wrong?
- JSON Data Map Issue with HighCharts + Ajax
- Highcharts - Global configuration with common code and unique data & Headings
- Highcharts Column-chart with php and Ajax
- Highcharts show the same yAxis start and end value with multiple data series
- How to construct HighCharts data series to match returned Json via ajax call
- Have an issue with JavaScript, AJAX code displaying data
- Issue with Dates - trying to plot MongoDB data in Highcharts via PHP
- Extract data series from a JSON array for a Highcharts chart with 2 y-axis
- Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover
- Issue with json data mapping with Highcharts
- Highcharts series visibility with csv data source
- Loading json data to highcharts with multiple series
- javascript associative array, looping, and / or scope issue with Highcharts JSON call
- How to have multiple highcharts with different series data in vuejs without repeating code
- Dynamic column based highcharts feeding data with jquery and php
- Highcharts cloud issue with data source when duplicating chart
- how to make chart real time with 2 line and get data from php with highcharts
- HighCharts Data with JavaScript PHP JSON
- Issue with json to Highstocks series data, only navigator shows data at some zoom levels only
- Passing data from PHP array to Highcharts chart with JSON
- highchart bar using json with series and xAxis data
- Highcharts pie/bar combo. How to load json and how are the data series expressed
- Use JSON with HighCharts and AJAX
- Highcharts displays series names but missing data points from json source
- Load highcharts data with laravel and ajax
- Highcharts - Get and plot data with MySQLi + JSON (step by step)
- Highcharts and JSON data from PHP
More Query from same tag
- Highcharts - Specific color zones for HighCharts navigator
- how to get value from other script? (in html)
- Logarithmic axis not showing appropriate ticks for small numbers
- datatable inside Highcharts-Pie chart
- How to add inline legends to line / area mixed chart in highchart
- Highcharts not rendering in internet explorer
- Data Conversion from SQL, C# with Linq to JSON for Highcharts Line chart
- Display series.data.name after drilldown dynamically
- Highcharts: how to stop the function setTimeout when I open new component angular?
- Difference between setExtremes and afterSetExtremes in HighStock
- Highcharts: How to change colors of all areas except hovered one on MouseOver event in area plot
- Highstock - How can i display the open, high, low, close in the line or area charts tooltip
- missing value in highcharts line graph results in no line, just points
- How to place a chart not from the beginning of the X axis
- HighChart dynamic drill down
- Highcharts not picking up on date - dates being interpreted as strings
- Highchart JSON pie chart display Slice undefined
- Why is HighCharts only writing to one of my dynamic div's?
- Adding an empty series changes axis minimum value
- Add data dynamicly with highcharts using reactjs
- Highcharts - Columns Showing Negative When Data is Zero
- How to generate discontinuous timeline in highcharts?
- Bar chart in High chart for indication of value with two colors in each bar where one color is always kept fixed
- Drilldown in grouped column chart with categories
- Highcharts Pie Chart turning off data label
- How to make Column type series Secondary yAxis values dynamic and not always start with 0?
- Highcharts - hover event handling for tooltip throws exception
- How to move point's label and SVGs by moving a point graphic in highcharts gantt?
- Highcharts - show decimal places only if needed
- Highchart's highstock tickPositions on multiple y axis