Datetime axis label in highcharts - highcharts

I have this plot that I am getting the data form a MSSQL table in JSON format but the datetime axis labels shows only one point. The datetime format in the JSON is epoc format [1325397600000,1325484000000,1325570400000,1325656800000,1325743200000,1325829600000].
What possibly is the problem?
Here is the code I am using:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 60
},
title: {
text: 'Pressure and Temperature',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
type: 'datetime',
},
yAxis: {
title: {
text: 'Temperature '
},
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("data3.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});

In these lines:
options.series[0] = json[1];
options.series[1] = json[2];
You try to add two series, but based on your JSON it meanas that you try to reference to one point for series, in other words your construction means:
options.series[0] = 1325397600000;
options.series[1] = 1325484000000;
I advice to familiar with correct series structure (data array included).
http://docs.highcharts.com/#preprocessing

Related

Highchartjs SubPlots not correctly stacked

I whish two plots stacked vertically:
chart = new Highcharts.chart({
chart: {
renderTo: 'prod',
defaultSeriesType: 'spline'
},
title: {
text: 'Sums'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%A %e - %b - %Y %k:%M ', this.value);
}
}
},
yAxis: [{
title: {
text: 'Plot1'
},
height: '25%',
offset: 0,
lineWidth: 1,
tickInterval: 50,
labels: {
formatter: function () {
var ret = this.value;
if(ret <= 50)
return ret;
}
}
},{
title: {
text: 'Plot2'
},
top: '25%',
height: '25%',
offset: 0,
lineWidth: 1,
tickInterval: 50,
}],
legend:false,
series: [
{
name:'plot1',
data:data1,
yAxis:0
},
{
name:'plot2',
data:data2,
yAxis:1
}
]
});
But what I get is this:
How can I remove the blanck space between the last plot and the xAxis?
You need to correctly set height and top for y-axis:
yAxis: [{
height: '50%',
...
}, {
top: '50%',
height: '50%',
...
}]
Live demo: http://jsfiddle.net/BlackLabel/j5hkcr8y/
API Reference:
https://api.highcharts.com/highcharts/yAxis.top
https://api.highcharts.com/highcharts/yAxis.height

HighCharts - increase bar height and reduce bar gap

Trying to increase bar height to accommodate series name inside bar and trying to reduce default gap between series group. The section "series: []" is, I assume for the JSON return function to populate. Tried many examples from all the generous JSFiddle examples to no avail. I'm a noob so please be patient. Any ideas? So far I have: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'],
title: {
text: 'Cluster Totals',
x: -20 //center
},
subtitle: {
text: 'Dept - Branch',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
align: 'center',
borderWidth: 0
},
plotOptions: {
bar: {
stacking: 'normal',
pointWidth: 20,
pointPadding: 0,
cursor: 'pointer',
point: {
events: {
click: function() {
alert('later drilldown events');
}
}
dataLabels: {
enabled: true,
inside:true,
useHTML: true,
align: 'left',
color: 'white',
style: {
fontWeight: 'bold'
},
verticalAlign: 'middle',
formatter: function () {
if (this.series.name)
return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>';
else return '';
}
}
}
},
series: []
}
$.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, 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];
chart = new Highcharts.Chart(options);
});
I think you options you need are groupPadding and pointWidth. e.g.
groupPadding:0.1,
pointWidth:20,
http://jsfiddle.net/s3t2pL94/

grouping date in Highcharts if the date range is too big

I am using Highcharts to show some statistic for my customer but I have problem when the customer select long data range
here is the first image for my highchart in the default view
and if I select too long date range here is the result
here is my code
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 50,
marginBottom: 80,
dataGrouping: {
enabled: true
}
},
title: {
text: 'Visits Statistics',
x: -20 //center
},
credits: {
text: '',
href: ''
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php print $categories; ?>],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Visits'
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +' '+'</b><br/>'+ this.y +'Hit';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 10,
borderWidth: 0
},
series: [{name:'from 2011-09-1',data: [<?php print $visits; ?>]}]
});
});
});
Highcharts can automatically manage time values in the x-Axis, provided that your chart is configured correctly. The problem in your case is that you've told Highcharts to use your categories, and it shows all of the categories.
To set up your chart to avoid this, you'll need to do two things:
Set the x-Axis type to datetime
Make sure that your data is formatted correctly
Or, use pointStart and pointInterval if you can't mess around with the data.
Using your example:
// ...
xAxis: {
//remove categories and set type as 'datetime'
type: 'datetime',
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
// ...
series: [{
name:'from 2011-09-1',
// since you probably don't want to change your data, we leave it alone...
data: [<?php print $visits; ?>],
// ... and instead, set `pointStart` and `pointInterval`
pointStart: Date.UTC(2011, 8, 1), // September 1, 2011
pointInterval: 24 * 3600 * 1000 // each point is 1 day (measured in milliseconds)
}]

Updating basic column high chart

I am having a problem updating my basic column high chart.
My json array that is returned from the server is:
[{"name":"positive","data":[18,35,32,38]},{"name":"negative","data":[0,14,65,121]}]
I am only using the "data" arrays ^ i.e. jsonArr[0].data and jsonArr[1].data
I have the data set up correctly, however the chart is not depicting these values. Any ideas?
Here is my javascript:
$(document).ready(function() {
var twitterChart;
posArr = [];
negArr = [];
function renderGraph()
{
$.getJSON("FrontController", function(jsonArr, statusTxt, xhr){
console.log("Data returned : " + data);*/
posArr = jsonArr[0].data;
negArr = jsonArr[1].data;
console.log("posArr: " + posArr);
console.log("negArr: " + negArr);
twitterChart.series[0].data = posArr;
twitterChart.series[1].data = negArr;
});
setTimeout(renderGraph, 3000)
}
twitterChart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ':'
},
xAxis: {
categories: [
'Column 1',
'Column 2',
'Column 3',
'Column 4'
]
},
yAxis: {
min: 0,
title: {
text: 'Testing"'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' tweets';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Positive',
data: posArr
}, {
name: 'Negative',
data: negArr
}]
});
renderGraph();
});
</script>
To update series data use twitterChart.series[0].setData(array); see: http://api.highcharts.com/highcharts#Series.setData()

highcharts graph no show yaxis values

The graph does not show the y-axis values​​. Could anyone help me with this? thanks.
If I put the value of prueba in the series data, everything worsk correctly
the prueba array and the dinero array are displayed correctly.
Thanks,
$.getJSON('http://localhost/jquery/grafica4.php', function(data) {
var dinero = [];
var categories = [];
var prueba = [79, 71, 66,44,42,38,32,10];
$.each(data, function(index, value) {
categories.push(data[index].producto_id);
dinero.push(data[index].cantidad);
alert("hola");
});
alert(dinero);
alert(prueba);
chart4 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'column'
},
title: {
text: 'Productos más vendidos'
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title:
text: 'Cantidad'
},
labels: {
formatter: function() {
return this.value; // clean, unformatted
}
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
'<b>'+'Producto:'+this.x +'</b>'+'<br/>'+ this.y+ ' unidades';
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: 'Cantidad',
data: dinero
}],
exporting: {
filename: 'Facturacion-de-empleados'
}
});
});

Resources