Highcharts load date values in X axis - json

I have a Highcharts chart which gets it's data from a JSON request.
function slowips(target){
var options = {
chart: {
renderTo: target,
type: 'spline',
borderColor: '#0072C6',
borderWidth: 3
},
title: {
text: 'Responsetime'
},
subtitle: {
text: 'Nr.1 is slowest'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'Milliseconds'
},
min: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
labels: {
enabled: true,
},
minorTickLength: 0,
tickLength: 0,
},
plotOptions: {
spline: {
animation: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
series: [{}]
};
$.getJSON('graphs/test.php', function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
slowips();
This is an example JSON input:
[ { "name":"sddf", "data": [ ["2013-02-01 00:01:00", 2 ], ["2013-02-02 00:02:00", 2.55 ] ] } ]
Also tried:
[ { "name":"sddf", "data": [ [Date.UTC(12, 3, 09), 2 ], [Date.UTC(12, 3, 10), 2.55 ] ] } ]
The first JSON example renders a chart, but with incorrect X axis data. The second JSON does not render the chart.
Please help out!

You need to use timestamps, so when you load first JSON, then you need to parse it by Date.UTC() / Data.parse(), but functions cannot be places in json inside (as you have in second example).

Related

One series name in higcharts not getting populated even though json send the correct information

The last series in a bar chart is showing "Series 4" as a name, even though its proper name is coming correcty from json file.
The information from the json file comes from a SQL query that prints the information in a string with the following format:
[
{"name": "Operation","data": [{"y":3000, "second": 1500, "third": 5}]},
{"name": "Mechanical","data": [{"y":2515, "second": 515, "third": 8}]},
{"name": "Electrical","data": [{"y":1800, "second": 475, "third": 10}]},
{"name": "Operation Slag","data": [{"y":1000, "second": 1500, "third": 7}]}
]
Since the colors of the series are set manually, I am using the below to add just data and name to each series:
jspData.forEach(function(jspData, i) {
Delays.series[i].setData(jspData.data);
Delays.series[i].setName(jspData.name);
}];
This is working as expected until the last series which show "Series 4" name and not "Operation Slag".
$(function () {
$(document).ready(function(){
$.getJSON('getData.json', function(jspData) {
var Delays = new Highcharts.chart({
chart: {
renderTo: 'Delays',
type: 'bar'
},
xAxis: {
categories: [''],
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: null
}
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
lineWidth: 0,
tickWidth: 0,
tickLength: 0,
min: 0,
title: null,
labels: {
enabled: false,
}
},
tooltip: {
enabled:true,
style:{fontSize:'10px', fontFamily:"sans-serif"},
formatter: function() {
console.log(this);
return 'Total duration: ' + this.y + 'min<br/>Delay Code: ' + this.point.second + '<br/>Count of Events: ' + this.point.third;
},
},
plotOptions: {
bar: {
borderWidth: 0.5,
dataLabels: {
enabled: true,
format: '{series.name}',
style: {
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
},
}
},
series: {
groupPadding: 0,
pointPadding: 0,
},
},
legend:{
enabled:false,
},
series: [{
color:'#4572A7',
data: []
}, {
color:'#89A54E',
data: []
}, {
color:'#AA4643',
data: []
}, {
color:'#A1745B',
data: []
}],
});
jspData.forEach(function(jspData, i) {
Delays.series[i].setData(jspData.data);
Delays.series[i].setName(jspData.name);
});
});
});
});
Last series name should not be "Series 4" but "Operation Slag". Chart is render porperly all other data is populated correctly.
The setName method is internal and it requires to redraw the chart. In your case it's enough to change the order of calls, because setData causes redraw:
jspData.forEach(function(jspData, i) {
Delays.series[i].setName(jspData.name);
Delays.series[i].setData(jspData.data);
});
Live demo: http://jsfiddle.net/BlackLabel/0qkf26zp/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setData

How to update just data attribute under series in highcharts with json?

I am currently new on this and I am looking for the easiest way to load, from a json file, the data for different series, but keeping other attributes of each serie as they are in the javascript.
So as shown in the below code, there are two series "Carbon" and "Add". The JSON file will just have the data for both series:
[
{"data":[70]},
{"data":[-30]}
]
The script that I have is as the one below:
$(function () {
$(document).ready(function(){
$.getJSON('carbonData.json', function(data) {
var carbon = new Highcharts.chart({
chart: {
renderTo: 'Carbon',
marginLeft:-30,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'bar'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
labels:{enabled:false},
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['']
},
yAxis: {
labels:{
enabled: false,
},
plotLines: [{
value: -30,
label: {
text: 'Target<br/>30 kg/t',
style:{fontSize: "10px"},
rotation:0,
align: 'center',
x: 0,
y:25
}
},{
value: 70,
label: {
text: 'Target<br/>70 kg/t',
style:{fontSize: "10px"},
rotation:0,
align: 'center',
x: 0,
y:25
}
}],
gridLineWidth: 0,
minorGridLineWidth: 0,
min: -45,
max:75,
title: {
text: ''
}
},
colors:['#4572A7','#AA4643'],
legend: {
enabled: false,
},
tooltip: {
enabled:false,
},
plotOptions: {
series: {
stacking: 'normal',
}
},
series: [{
name: 'Carbon',
data: [70],
dataLabels: {
enabled:true,
x: 16,
format: '{series.name}<br/>{point.y} kg/t',
style: {
align: 'center',
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
'text-anchor': 'middle'
}
}
}, {
name: 'Add',
data: [-30],
dataLabels: {
enabled:true,
x:13,
formatter: function() {
return this.series.name+'<br/>'+Math.abs(this.y)+' kg/t';
},
style: {
color: 'white',
align: 'center',
fontSize: "10px",
fontWeight:'normal',
textOutline: false,
fontFamily: 'sans-serif',
'text-anchor': 'middle'
}
}
}]
});
});
});
});
So I am looking to map the information of the JSON file to each of the series correspondingly.
Thanks.
Use setData method:
var data = [{
"data": [70]
},
{
"data": [-30]
}
]
var chart = Highcharts.chart('container', {
series: [{
color: 'red',
data: []
}, {
color: 'blue',
data: []
}]
});
document.getElementById("data").addEventListener('click', function() {
data.forEach(function(el, i) {
chart.series[i].setData(el.data);
});
});
Live demo: http://jsfiddle.net/BlackLabel/z5aLvgxq/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Highcharts to present in an HTML Table

I'm currently creating a system that produces different kind of graphs. I want to create a chart and table, that when a chart is DRILLDOWNED, the table will sync as well. Is there a way to output the current data presented by HighCharts to JSON? Then this JSON will be inputted into a datatable? Thanks!
check this JsFiddle Demo
You can obtain the id by e.seriesOptions.id which is the key to your data. Then you can use this id as the key to get appropriate data and update your data table from within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Dieren',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruit',
y: 2,
drilldown: 'fruits'
}, {
name: "Auto's",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Katten', 4],
['Honden', 2],
['Koeien', 1],
['Schapen', 2],
['Varkens', 1]
]
}, {
id: 'fruits',
data: [
['Appels', 4],
['Sinaasappels', 2]
]
}]
}
})
});

Adding series markers to highcharts area chart

I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.

json format of highchart speedometer

What is the JSON format that a high-charts speedometer accepts? Please help me on this as I am very new to high-charts.
A speedometer only requires one value for it's dataseries. e.g. data: [80] sets the speed to 80.
Here is a basic example which shows a speed of 80:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
min: 0,
max: 200,
title: {
text: 'km/h'
}
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
Here is an example of it, with a function updating it using point.update: http://jsfiddle.net/JYjP7/