How to update just data attribute under series in highcharts with json? - 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

Related

populating x-axis(Category) Highcharts ajax

I need assistance on how to dynamically bind my x-axis. I have written a webservice, that will fetch the data from the stored procedure.
I am stuck on displaying just the first column from the SP as for the x-axis.
$.ajax({
type: "POST",
url: "/path/path.asmx/xpath",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function(data) {
alert("X_axis function is being hit")
// Parse JSON data:
var jsonCategories = eval('(' + data + ')');
alert(jsonCategories);
// Pass parsed data to the chart:
$('#Div3').xAxis[0].setCategories(jsonCategories);
}
})
// };
$('#Div3').highcharts({
chart: {
type: 'areaspline',
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
}
},
title: {
text: 'Average Disc Space consumption',
style: { fontSize: 10, color: '#E0E0E3' }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#EEE'
},
legend: {
enabled: true
},
xAxis: {
categories: [],
labels: {
style: {
color: '#E0E0E3'
}
},
plotBands: [{
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Disc (GB)',
style: { fontSize: 10, color: '#E0E0E3' }
},
labels: {
style: {
color: '#E0E0E3'
}
}
},
tooltip: {
shared: true,
valueSuffix: ' GB'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'DB size',
data: [20, 10, 65, 3, 55, 62, 58]
}, {
name: 'Data size',
data: [19, 34, 47, 31, 3, 54, 41]
},
{
name: 'Log size',
data: [11, 34, 49, 38, 38, 80, 10]
},
{
name: 'Backup size',
data: [1, 32, 47, 3, 39, 59, 4]
}
]
});

Transparent plot area of heatmap using highcharts

how to make a heatmap's plot area as transparent.
i would like to remove all the white blocks in the chart and make it transparent, so that background colors are visible.
refer this fiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
backgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.23, 'rgb(240, 59, 9)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
},
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor:'#FFFFFF'
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,0],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});
Here is the fiddle solution
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40,
plotBackgroundColor: {
linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
stops: [
[0.03, 'rgb(247, 88, 45)'],
[0.5, 'rgb(255, 224, 80)'],
[0.67, 'rgb(54, 64, 207)'],
[0.99, 'rgb(13, 163, 35)'],
[1, 'rgb(217, 186, 50']
]
}
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
},
yAxis: {
categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
title: null
},
colorAxis: {
min: 0,
minColor: 'transparent',
maxColor:'transparent'
//maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0,0,0],[0,1],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
dataLabels: {
enabled: true,
color: 'black',
style: {
textShadow: 'none'
}
}
}]
});
});

Highcharts load date values in X axis

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

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.

highcharts correct json input

UPDTAED:Now with the below code, the json is parsing correctly ,
But the columns are not displayed on the initial load, if i put the cursor over i can see the tooltip displaying the series name and value. However, if i re-size the browser window the columns appear. i tried adding chart.redraw(); after the updatedChart(); but it dosent help my div is as below
<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div>
Any ideas please? Also, i cannot re-produce this problem on jsfiddle and have tested this on safari,chrome and firefox (all showing this strange behavior)
var chart;
options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series:
[]
};
$(document).ready(function() {
chart= new Highcharts.Chart(options)
console.log("calling update chart");
updateChart();
});
function updateChart() {
$.ajax({
type: "GET",
url: "test.json",
async: false,
dataType: "json",
success: function(data){
console.log(data);
var i=0;
$.each(data,function(index,item){
console.log(data.Chart1[index]);
console.log("i value is "+i);
chart.addSeries(data.Chart1[index]);
i++;
});
}
});
}
}
my json input file is below
[
{
name: 'name1',
y: [32.6,16.6,1.5]
}, {
name: 'name2',
y: [6.7,0.2,0.6]
}, {
name: 'name3',
y: [1,3.7,0.7]
}, {
name: 'name4',
y: [20.3,8.8,9.5]
},{
name: 'name5',
y: [21.5,10,7.2]
}, {
name: 'name6',
y: [1.4,1.8,3.7]
}, {
name: 'name7',
y: [8.1,0,0]
}, {
name: 'name8',
y: [28.9,8.9,6.6]
}
]
Edited:
var chart = null,
options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: []
};
$(document).ready(function() {
updateChart();
});
function updateChart() {
$.getJSON('test.json', function(data) {
// check if the chart's already rendered
if (!chart) {
// if it's not rendered you have to update your options
options.series = data;
chart = new Highcharts.Chart(options);
} else {
// if it's rendered you have to update dinamically
jQuery.each(data, function(seriePos, serie) {
chart.series[seriePos].setData(serie, false);
});
chart.redraw();
}
});
}
Fiddle: LINK