We Keep Coding

Datetime in Y-Axis Highcharts

I'm in the middle of building heatmap chart, but i have problem adding datetime in Y axis from timestamp data in my json file, it just showing 00:00:00:001 in my Y axis chart.
This is my code
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'heatmap'
},
xAxis: {
tickPixelInterval: 1000,
categories: []
},
yAxis: {
type: 'datetime'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 280
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: -5
},
plotOptions: {
series: {
turboThreshold: 0
}
},
series: [{
dataLabels: {
enabled: true,
color: '#000000'
}
}]
};
var ajaxCounter = 0,
dataArr = [],
intervalId = setInterval(function() {
$.getJSON('test.json', function(data) {
var categories = [],
prevCat = -1,
numb = -1;
Highcharts.each(data, function(xvals, i) {
if (prevCat !== xvals[0]) {
numb++;
prevCat = xvals[0];
categories.push((xvals[0]));
dataArr.push([numb, ajaxCounter, xvals[2]]);
} else {
dataArr.push([numb, ajaxCounter, xvals[2]]);
}
});
ajaxCounter++;
options.xAxis.categories = categories;
options.series[0].data = dataArr;
var chart = new Highcharts.Chart(options);
if (ajaxCounter === 24) {
clearInterval(intervalId);
}
});
}, 10000);
});
This is my json file
[
[100,1474633760,0],
[200,1474633760,0],
[300,1474633760,2471.0],
[400,1474633760,0],
[500,1474633760,0],
[600,1474633760,1951.0],
[700,1474633760,0],
[800,1474633760,0],
[900,1474633760,2125.0],
[1000,1474633760,0]
]
Thank you for you attention, i hope you guys can help my little project

Highchart js click rotate and expand arc

Hi I'm looking to create a pie chart with highchart js that expands twolayers, and rotates to the center whenever I click a section.
So far I have a pie chart that expands one layer, and a click function that brings the arcs to the center (-90). I also have a click function that rotates the pie by degrees. My inner arc stays in the center and im having a hard time moving the arc to the same position of the out rings. The inner arc do not follow the click rotate aswell.
I would like to make a pie that rotates smoothly to center (-90) and expands with two extra layers. with the inner arch to follow the outer arch and be in the same starting point as the outer arch
Thank you in advance
here is what my code executes and looks like :
pie chart with what im currently running
Here is my script
$(function () {
var lastHighlight = -1;
var lastPos = [10,10,10];
$('#mouseMoveDiv').click(function () {
var theChart = $('#container').highcharts();
var currStartAngle = theChart.series[0].options.startAngle;
//console.log('currStartAngle: ' + currStartAngle);
var newStartAngle = currStartAngle + 5;
if (newStartAngle > 359) {
newStartAngle = 5;
}
//console.log(newStartAngle);
theChart.series[0].update({
startAngle: newStartAngle
});
var someData = theChart.series[0].data;
var N = someData.length;
var highLight = -1;
for (var i = 0; i < N; i++){
var startAngle = someData[i].angle + (((someData[i].percentage/100) * 6.28318)/2);
var dis = 1.5795 - startAngle;
if (lastPos[i] > 0 && dis < 0){
highLight = i;
lastPos[i] = dis;
break;
}
lastPos[i] = dis;
}
if (highLight != -1){
var someRows = $('#dataTable tr');
someRows.eq(lastHighlight).css('backgroundColor','white');
someRows.eq(highLight).css('backgroundColor','yellow');
lastHighlight = highLight;
}
});
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}',
center: ["50%", "50%"],
connectorWidth: 0,
startAngle: 90,
animation: false
}
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
series: [{
type: 'pie'
data: [
{ name: 'Planning', y: 33.3 },
{ name: 'Sprints', y: 33.3 },
{ name: 'Release', y: 33.3 }
],
size: '60%',
innerSize: '40%',
point: {
events: {
click: function () {
var chart = this.series.chart,
series = chart.series,
len = series.length,
index = this.x + 1,
i;
for (i = 1; i < len; i++) {
if (i === index) {
series[i].update({
size: '100%',
dataLabels: {
enabled: true
}
}, false);
} else {
series[i].update({
size: '0%',
dataLabels: {
enabled: false
}
}, false);
}
}
var points = this.series.points;
var startAngle = 0;
for (var i = 0; i < points.length; i++) {
var p = points[i];
if (p == this) {
break;
}
startAngle += (p.percentage / 100.0 * 360.0);
}
this.series.update({
startAngle: -startAngle + 90 - ((this.percentage / 100.0 * 360.0) / 2) // center at 180
})
chart.redraw();
}
}
},
dataLabels: {
distance: 90, //distance name
style: {
color: 'Black'
},
enabled: true
},
zIndex: 1
},
{
zIndex: 0,
type: 'pie',
size: '60%',
innerSize: '0%',
data: [{
y: 2,
color: 'rgba(250,0,0,1)',
name: 'Training'
},
{
y: 2,
color: 'rgba(250,0,0,1)',
name: 'Secure'
},
{
y: 8,
color: 'rgba(0,0,0,0)',
dataLabels: {
enabled: false
}
}],
dataLabels: {
distance: -30,
enabled: false,
style: {
color: 'black'
}
},
enableMouseTracking: false
},
{
zIndex: 0,
type: 'pie',
size: '0%',
data: [{
y: 3,
color: 'rgba(0,0,0,0)',
dataLabels: {
enabled: false
}
}, {
y: 1,
color: 'rgba(0,200,0,1)',
name: 'test'
}, {
y: 1,
color: 'rgba(0,200,0,1)',
name: 'test'
}, {
y: 1,
color: 'rgba(0,200,0,1)',
name: 'test'
}, {
y: 3,
color: 'rgba(0,0,0,0)',
dataLabels: {
enabled: false
}
}],
dataLabels: {
distance: -30,
enabled: false
style: {
color: 'black'
}
},
enableMouseTracking: false
},
{
zIndex: 0,
type: 'pie',
size: '0%',
data: [{
y: 6,
color: 'rgba(0,0,0,0)',
dataLabels: {
enabled: false
}
}, {
y: 1,
color: 'rgba(0,0,200,1)',
name: 'test'
}, {
y: 1,
color: 'rgba(0,0,200,1)',
name: 'test'
}, {
y: 1,
color: 'rgba(0,0,200,1)',
name: 'test'
}],
dataLabels: {
distance: -30,
enabled: false,
style: {
color: 'black'
}
},
enableMouseTracking: false
}]
});
});

I suggest to change logic a bit: use one series for each of the circles, and manage manually visibility of the slices instead. For example: http://jsfiddle.net/vkhvvs5d/3/
And to answer the second question, rotate animation is not supported when using series.update(), however it have an easy workaround: http://jsfiddle.net/8x54efu6/3
var chart = $("#container").highcharts(),
pie = chart.series[0];
pie.options.startAngle = new_angle;
pie.isDirty = pie.isDirtyData = true;
chart.redraw();

Hide/Show yaxis on series hide/show event

I'm making a multiple panel chart, and I'm trying to hide the y-axis on the hide event of the axis serie.
I tried setting the axis height and redrawing it (didn't work), set extremes, nothing worked. I also tryed this solution but didn't work, I beleave it didn't work beacause I'm using highstock and the "solution" use Highcharts, does that make sense?
I also have to resize the others y-axis when one is hidden, but this is another problem. But if someone has a tip on how to do it automatically would be thankful
Here is my JSFiddle code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
events: {
hide: function (event) {
console.log(this.yAxis)
//Hide
},
show: function (event) {
console.log(this.yAxis)
//Display
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "aaa"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

I worked more on solution and I found A way to hide the y-axis, by changing its height to 0% on the series hide event. I'm also increasing the axis height back to 25% in the series show event.
plotOptions: {
series: {
events: {
hide: function (event) {
this.yAxis.update({
height: '0%'
});
},
show: function (event) {
this.yAxis.update({
height: '25%'
});
}
}
}
},
Full code
Edit:
I found a way to resize the others y-axis when one of them is hidden or one the axis is displayed.
You can check the full code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: true,
radius : 2
},
events: {
hide: function (event) {
var serieYAxis = this.yAxis;
serieYAxis.visivel = false;
serieYAxis.update({
height: '0%',
title: {
style: {"display":"none"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
},
show: function (event) {
this.yAxis.visivel = true;
this.yAxis.update({
title: {
style: {"display":"initial"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y2"
}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y3"
}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

Counting json data to create dynamic series in highchart line charts

I've got Json data like this :
q_table.php
[{"data":["2012-12-16; 0","2012-12-16; 23"]},{"name":"MSMDN1","data":[98.9914,99.5429]},{"name":"MSMDN2","data":[99.4577,99.5078]},{"name":"MSMDN3","data":[99.1454,99.4605]},{"name":"MSMDN4","data":[98.9663,99.3663,]},{"name":"MSMDN5","data":[104.97,91.4251]}]
I want to count the array data so the data look like this:
json_data = [0]; //data":["2012-12-16; 0","2012-12-16; 23"]
json_data = [1]; //"name":"MSMDN1","data":[98.9914,99.5429]
json_data = [2]; //"name":"MSMDN2","data":[99.4577,99.5078]
json_data = [3]; //"name":"MSMDN3","data":[99.1454,99.4605]
json_data = [4]; //"name":"MSMDN4","data":[98.9663,99.3663,]
json_data = [5]; //"name":"MSMDN5","data":[104.97,91.4251]}
How to counting those array from javascript?
This code below was worked, but as you see at the script part that get json data, i must declare series and categories manually
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 155
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [''],
labels:
{
rotation: -90
}
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("q_table.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
options.series[4] = json[5];
//options.series[5] = json[6];
chart = new Highcharts.Chart(options);
});
});
Here is the script part that i change according to #SebastianBochan answer
$.getJSON("q_table.php", function(json)
{
var len = json.length
for(i=0;i<len;i++){
if(i===0){
options.xAxis.categories = json[i]['data'];
}else{
j = i-1;
options.series[j] = json[i];
}
}
chart = new Highcharts.Chart(options);
});
or any other way, very pleased..
Worked Script
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 155
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [''],
labels:
{
rotation: -90
}
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("q_table.php", function(json)
{
var len = json.length
for(i=0;i<len;i++){
if(i===0){
options.xAxis.categories = json[i]['data'];
}else{
j = i-1;
options.series[j] = json[i];
}
}
chart = new Highcharts.Chart(options);
});
});

You need to parse check which line should be categories and which series. I simulated json as variable Take look:
var json = [{
"data": ["2012-12-16; 0", "2012-12-16; 23"]
}, {
"name": "MSMDN1",
"data": [98.9914, 99.5429]
}, {
"name": "MSMDN2",
"data": [99.4577, 99.5078]
}, {
"name": "MSMDN3",
"data": [99.1454, 99.4605]
}, {
"name": "MSMDN4",
"data": [98.9663, 99.3663]
}, {
"name": "MSMDN5",
"data": [104.97, 91.4251]
}];
var len = json.length
i = 0;
var options = {
xAxis: {
categories: []
},
series: []
}
for (i; i < len; i++) {
if (i === 0) {
var dat = json[i].data,
lenJ = dat.length,
j = 0,
tmp;
for (j; j < lenJ; j++) {
tmp = dat[j].split(';');
options.xAxis.categories.push(tmp[0]);
}
} else {
options.series.push(json[i]);
}
}
http://jsfiddle.net/UKfPm/

$.getJSON("q_table.php", function(json)
var options = {}; // whatever options you want to set, at least the container
options.series = new Array();
for(i=0;i< json.length;i++) {
options.series.push(json[i]);
}
chart = new Highcharts.Chart(options);
});

Highcharts - differents symbols for 1 serie

I have found the code below. I would like to have differents symbols for 1 serie in Highcharts with the threshold = 50. When the y value is smaller than 50 I would like green symbols and when y value is bigger than 50 I would like square symbols.
Thank you for your help!
http://jsfiddle.net/mhardik/YgxEB/1/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Scatter Graph Demo'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +' cm, '+ this.y +' kg';
}
},
plotOptions: {
scatter: {
marker: {
radius: 3,
symbol:myFunction(),
}
}
},
series: [{
name: 'Points',
color: 'rgba(223, 83, 83, .5)',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]]
}]
});
});
});
function myFunction() {
if(true){
return 'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)';
} else{
return 'square';
}
}

If you reorganize your code a bit, you can start out with the data array and then preprocess it into object literals that hold a marker definition for each point:
data = $.map(data, function (point) {
return {
x: point[0],
y: point[1],
marker: {
radius: 3,
symbol: point[1] < 50 ?
'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)' :
'square'
}
};
});
http://jsfiddle.net/highcharts/YgxEB/10/