We Keep Coding

highcharts doesn't read data, works with fake data

I'm trying to make visualization of the voltage, Array has 1k elements but I'm testing it on first 10 for now, the thing is that It doesn't display anything, what's more interesting when I use fake date which is commented out now, It shows chart properly. I thought that perhaps there is some problem with array so tried to use Array.from but it also brought no effect, here is my code:
.then(function(res) {
var averageVoltage = []
var inputVoltage = []
var date = []
for (var i = 0; i < 10; i++) {
if (res[i].average_volatage !== undefined) {
averageVoltage.push(res[i].average_volatage)
date.push(res[i].timestamp)
}
}
console.log(averageVoltage)
console.log(date)
Highcharts.chart('battery_chart', {
chart: {
type: 'line'
},
title: {
text: id
},
yAxis: {
title: {
text: 'Measurement'
},
},
xAxis: {
categories: date
},
series: [{
name: 'Average Voltage',
data: averageVoltage
// data: [12283, 12283, 12281, 12280, 12282, 12283, 12281, 12282, 12281, 12280]
},
]
});
and that's how array is shown in console.log:

Your array should show up as [12283, 12281, 12280, etc.] in console as well, instead it shows up as [Number, Number, ...]. Try changing this line:
averageVoltage.push(res[i].average_volatage)
to:
averageVoltage.push(parseInt(res[i].average_volatage))
Additionally, instead of using dates as categories, it could be easier to use the highchart datetime axis. This would let you manipulate how you want the date displayed, have several series with different timestamps in one graph, and many other things. To get this to work, you could do this:
.then(function(res) {
var averageVoltage = []
var inputVoltage = []
for (var i = 0; i < 10; i++) {
if (res[i].average_volatage !== undefined) {
averageVoltage.push({x: new Date(res[i].timestamp).getTime(), y: parseInt(res[i].average_volatage)})
}
}
console.log(averageVoltage)
Highcharts.chart('battery_chart', {
chart: {
type: 'line'
},
title: {
text: id
},
yAxis: {
title: {
text: 'Measurement'
},
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Average Voltage',
data: averageVoltage
},
]
});

Highcharts error "cannot read property of undefined"

I'm creating a chart using Highcharts (and getting the data from a JSON file). However, I'm getting TypeError: Cannot read property 'map' of undefined.
I have the following code:
myData.get(function (data) {
$scope.loadData = data;
});
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.actual];
})
}, {
name: 'Range',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.min, d.max];
}),
type: 'arearange'
}]
});
I've also created a Plunker.
Any tips on what I'm doing wrong here?

So I changed your Plunkr to a working example: http://plnkr.co/edit/Q4z6NdVtp3TRMKgmH5tc?p=preview
First of all, in your data.json you have timestamps added as strings. Highchart does not accept that.
I changed the factory to get JSON data via $http
.factory('myData', function($http) {
return {
getData : function () {
var data = [];
data = $http.get('data.json');
return data;
}
}
})
In the callback of getData I build the chart:
myData.getData().then(function(response) {
$scope.loadData = response.data;
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: [$scope.loadData.timestamp, $scope.loadData.actual]
},
{
name: 'Range',
data: [$scope.loadData.timestamp, $scope.loadData.min, $scope.loadData.max],
type: 'arearange'
}]
});
});

this is asynchronous call :
myData.get(function (data) {
console.log("myData.Get");
$scope.loadData = data;
});
So $('#container').highcharts({... will run before the data is set $scope.loadData = data;
you have to move the code inside the callback of myData
myData.get(function (data) {
$scope.loadData = data;
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.actual];
})
}, {
name: 'Range',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.min, d.max];
}),
type: 'arearange'
}]
});
});

Highcharts column drilldown

From my php file, my array prints something this:
Array
(
[2011] => Array
(
[name] => 2011
[total] => 963
[drilldown] => true
)
[2012] => Array
(
[name] => 2012
[total] => 1997
[drilldown] => true
)
[2013] => Array
(
[name] => 2013
[total] => 1188
[drilldown] => true
)
)
And this is the json_encode:
{"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}}
from this working link: highcharts/drilldown
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
I want to change this part with my json.

I have made a JSFIDDLE demo.
What you need to do is assign the json encoded string of PHP array to a javascript variable like this:
var my_data = <?php echo json_encode($php_array); ?>
on this the variable my_data will have values like:
var my_data = {
"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}
};
now this object needs to be structured into the format so that highcharts can use it as data source for plotting the values for the graph. It can be done like this:
var data_array = [];
$.each(my_data, function(key, value){
var total_value = value.total;
delete value.total;//remove the attribute total
value.y = total_value;//add a new attribute "y" for plotting values on y-axis
data_array.push(value);
});
after this data_array will have structure like:
data_array = [
{"name":2011,"y":963,"drilldown":"true"},//note we have removed attribute "total" with "y"
{"name":2012,"y":1997,"drilldown":"true"},
{"name":2013,"y":1188,"drilldown":"true"}
];
and now this data_array can be passed as data source to the chart while initialization like this:
// Create the chart
$('#container').highcharts({
....
.....
series: [{
name: 'Things',
colorByPoint: true,
data:data_array//put the data_array here
....
..
and you are done !
Here is the complete code:
$(function () {
var data_array = [];
//assign the json encoded string of PHP array here like:
//var my_data = <?php echo json_encode($php_array); ?>
var my_data = {
"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}
};
$.each(my_data, function(key, value){
//console.log("key = "+key);
//console.log("value=");
//console.log(value);
var total_value = value.total;
delete value.total;//remove the attribute total
value.y = total_value;//add a new attribute "y" for plotting values on y-axis
data_array.push(value);
});
//console.log("data_array = ");
//console.log(data_array);
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data:data_array
}],
drilldown: {
series: []
}
})
});

Failed to load graph (chartjs) from ajax returned JSON

I am using chartjs library for chart generation in html. My HTML, jQuery and PHP are OK, the problem is, when I try to push JSON generated with PHP with ajax call and call the function for graph generation - i have an error (invalid character in JSON). So my code looks like this:
PHP:
$queryPortals = "SELECT description,count(*) AS count FROM portals WHERE ".$portals." AND id<900 GROUP BY description";
$resultPortals = mysqli_query($conn,$queryPortals);
while ($ar = mysqli_fetch_array($resultPortals)) {
$rows[] = "{category: '".$ar['description']."', value: ".$ar['count']."}";
}
echo json_encode($rows,JSON_NUMERIC_CHECK);
This code returns this JSON:
[
"{category: 'Blog', value: 1}",
"{category: 'Portal', value: 1}"
]
My ajax call looks like this:
$.ajax({
type: 'GET',
dataType: 'json',
url: 'class/portalAnalysisGetGraphs.php',
data: 'portals='+portals,
success: function(html){
drawPie(html);
}
});
My drawPie function looks like this:
function drawPie(html)
{
$("#chartContainer").dxPieChart({
dataSource: html,
series: {
argumentField: 'category',
valueField: 'value',
label: {
visible: true,
connector: {
visible: true
}
}
},
tooltip: {
enabled: true,
percentPrecision: 2,
customizeText: function (value) {
return value.percentText;
}
},
title: {
text: 'Portal types'
},
legend: {
horizontalAlignment: 'center',
verticalAlignment: 'bottom'
}
});
};
There is an error in parsing JSON. I've tried to build JSON in PHP withous double quotes, I tried javascript functzion JSON_parse(html) - no luck.
When I put data directly to drawPie function, then it's ok. Direct data input example:
var html= [
{category: 'Blog', value: 1},
{category: 'Portals', value: 1}
];
Please help...

Highcharts with JSON to customize multiple series

I would like to add multiple series in my graph from a json file with 4 columns (date, open incident, closed incident and in progress incident).
I can show my graph with the number of incident open (http://jsfiddle.net/269us/) but I can't find the 3rd and 4th columns of JSON file.
Here is the structure of my JSON file:
[[1325462400000,3,12,14]
[1325548800000,7,14,8]
[1325635200000,10,11,24]
[1325721600000,21,13,16]
[1325808000000,13,15,9]
[1325894400000,2,15,4]
[1326067200000,10,13,15]]
I want to reach as a result of this type in order to customize each series (open, closed, in progress)
var date = []
open = []
close = []
inprogress = []
datalength = data.length;
for (i = 0; i <dataLength; i + +) {
date.push ([
data [i] [0]
]);
open.push ([
data [i] [1],
]);
close.push ([
data [i] [2],
]);
inprogress.push ([
data [i] [3],
]);
}
series: [{
type: 'spline',
name: 'open',
data: open,
dataGrouping {
units: groupingUnits
}
} {
type: 'column',
name: 'close',
data: close,
dataGrouping {
units: groupingUnits
}
.............
.............
}]

I think you are trying to create 3 data arrays to use in 3 series (open, close and in-progress). Try something like this:
for (i = 0; i <dataLength; i + +) {
var date = data[i][0];
open.push ([
date,
data[i][1]
]);
close.push ([
data,data[i][2] //data instead of dat.
]);
inprogress.push ([
date,data[i][3]
]);
}
You sould now be able to use these 3 arrays as the data in your series:
series: [{
type: 'spline',
name: 'open',
data: open,
dataGrouping {
units: groupingUnits
}
},
{
type: 'column',
name: 'close',
data: close,
dataGrouping {
units: groupingUnits
}
},
{
type: 'line',
name: 'inprogress',
data: inprogess,
dataGrouping {
units: groupingUnits
}
}