I have a dropdown on month. What I want is when select current month, the data will display and when select previous month or incoming month, the data should display 'N/A'. Currently, the data is display in a solid gauge (speedometer).Below is the code
//Dropdown
<h3 class="box-title">
Month:
<input type="month" name="month" id="month" value="<?=date('Y-m')?>" class="onchange">
</h3>
//Script
$(function () {
$("body").on( "change",'.onchange', function( event ) {
$("#loading1").show();
$("#loading2").show();
$("#loading3").show();
$("#loading4").show();
$("#loading5").show();
$('#generation').DataTable().ajax.reload();
$.ajax({
url: "/lookup/getPlantLoading/",
data: {
campus: $('#campus').val(),
month: $('#month').val()
},
success: function(data){
chartPlantLoading(data);
$("#loading1").hide();
}
});
//Chart 1
function chartPlantLoading(data) {
var gaugeOptions = {
chart: { type: 'solidgauge' },
title: null,
pane: {
center: ['50%', '65%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: true
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#DF5353'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#55BF3B'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
if(data.data != 0.0){
Highcharts.chart('plant_loading', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
credits: { enabled: false },
series: [{
name: 'Plant Loading',
// data: [80],
data: data.data,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">N/A</span><br/>' +
'<span style="font-size:12px;opacity:0.4">%</span>' +
'</div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
}
else{
Highcharts.chart('plant_loading', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: null
}
},
credits: { enabled: false },
series: [{
name: 'Plant Loading',
// data: [80],
data: data.data,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">%</span>' +
'</div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
}
}
The data is already show a correct data, but how do I check whether the selected month is the current month and set when user choose previous month or incoming month, the meter will display 'N/A'?
Below is the current look of the speedometer
Related
I need to display my x-axis label as a whole number with percentage without the decimal and a zero before it. I am already using allowDecimals: false but that's not helping it looks like. How can I fix this?
0.10% should render as 10% and etc.
https://jsfiddle.net/samwhite/p01xvw2z/
Highcharts.chart('container', {
chart: {
height: 550
},
title: {
text: 'GME: Absolute Daily Return vs. % of Outstanding Shares Hedged, January 2021',
align: 'left',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
subtitle: {
text: 'Data source: OPERA and Bloomberg',
align: 'left'
},
credits: { enabled: false },
xAxis: {
title: { text: '% of Outstanding Shares Needed for Hedging' },
// labels: {
// formatter: function () {
// return this.value.toFixed(2) + '%'
// }
// },
labels: {
format: '{value:,.2f}%'
},
min: -0.01,
max: 0.6,
tickInterval: 0.1,
allowDecimals: false
},
yAxis: {
title: { text: 'Absolute % Change in Price' },
min: -0.01,
tickInterval: 0.5,
labels: {
formatter: function () {
return this.value.toFixed(1)
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: '',
color: "#f79646",
data: [[0, -.1489], [0.5, 0.7003]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
marker: {
symbol: 'circle',
fillColor: '#00429d',
radius: 3
},
name: 'Observations',
color: '#000',
data: [
[0.05, 0.08],
[0.05, 0.00],
[0.08, 0.05],
[0.08, 0.01],
[0.05, 0.02],
[0.13, 0.12],
[0.11, 0.00],
[0.35, 0.57],
[0.42, 0.27],
[0.38, 0.11],
[0.22, 0.10],
[0.21, 0.00],
[0.26, 0.09],
[0.48, 0.51],
[0.34, 0.18],
[0.44, 0.92],
[0.43, 1.34],
[0.34, 0.44],
[0.42, 0.67]
],
tooltip: {
valueDecimals: 2
}
}]
});
Something like this?
labels: {
formatter: function () {
return this.value * 100 + '%';
}
},
These code are written by javascript,and use hightChart StockChart below.
The program can draw chart by the datetime and report_value1 in the stockChart,and show report_value1 in the tooltip.
I want to add more values to show in the pointFormat of the tooltip.
How to add code to show the rpm value of the speed_data in the tooltip?
var speed_data = [];
for (var i = 0; i < _datalenght; i++) {
v = sData[i];
speed_data.push([
v.report_time * 1000,
v.report_value1,
v.rpm,
]);
}
fuelchart = new Highcharts.StockChart({
chart: {
renderTo: "speed_chart_div",
type: 'line',
zoomType: 'x',
marginRight: 10,
backgroundColor: null
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 5,
text: '5min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'hour',
count: 1,
text: '1hour'
}, {
type: 'hour',
count: 4,
text: '4hour'
}, {
type: 'hour',
count: 8,
text: '8hour'
}, {
type: 'all',
count: 1,
text: 'all'
}],
selected: 5,
inputEnabled: false
},
title: {
text: null
},
subtitle: {
text: '' // dummy text to reserve space for dynamic subtitle
},
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: JLANG.REPORT_SPEED
},
min: 0
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
}
}
},
series: [{
name: JLANG.REPORT_SPEED,
type: 'area',
color: '#357EC7',
lineWidth: 1,
data: speed_data,
tooltip: {
valueDecimals: 0,
useHTML: true,
headerFormat: '<span style="color: {series.color}; font-size:15px;"><b>{point.key}</b></span>',
pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{point.y} km/h</b></span></div>' +
'<br/><div><span style="color: {series.color}; font-size:15px;">rpm: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{???} </b></span></div>'
,
xDateFormat: '%H:%M:%S %d-%m-%Y'
},
gapSize: 0,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
credits: {
enabled: false
}
});
I try it succussfully.
usdeur = [[1187654400000,0.7429,1],[1187740800000,0.7383,2],[1187827200000,0.7369,3]];
propertyData = [];
//propertyData[1187654400000] = {"a":1,"b":2};
//propertyData[1187740800000] = {"a":3,"b":4};
//propertyData[1187827200000] = {"a":5,"b":6};
for (var i = 0; i < usdeur.length; i++) {
propertyData[usdeur[i][0]] = {"a":i,"b":i+1};
}
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: "speed"
},
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 0,
useHTML: true,
xDateFormat: '%H:%M:%S %d-%m-%Y',
/* pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' +
'<div><span style="text-align: right; font-size:15px;"><b>{propertyData[point.x]}.{point.y} km/h</b></span></div>',
*/
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>1 USD = ' + this.y + ' EUR<br/>' +
propertyData[this.x]["a"] + "<br/>" +
propertyData[this.x]["b"] ;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
type: 'area',
name: 'USD to EUR',
data: usdeur
}]
});
I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.
I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.
Any ideas ?
Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/
And here's (some of) the code:
jQuery('#chartContainer').highcharts({
chart: { width: 600, height: 500 },
title: { text: '' },
credits: { enabled: false },
xAxis: {
categories: client_age_array,
title: {
text: 'Client age',
style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
},
labels: {
step: 5,
staggerLines: 1
}
},
yAxis: [{ // First yAxis - Income
labels: {
style: {
color: gradTop,
fontSize: '12px'
}
},
title: {
text: 'Income',
style: {
color: gradTop,
fontSize: '12px'
}
},
opposite: true,
min: null,
max: null
},
{ // Second yAxis - Fund value
gridLineWidth: 0,
labels: {
style: {
color: '#003466',
fontSize: '12px'
}
},
title: {
text: 'Fund value',
style: {
color: '#003466',
fontSize: '12px'
}
},
min: null,
max: null
},
{ // Third yAxis - Survival probability
gridLineWidth: 0,
labels: {
format: '{value}%',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
title: {
text: 'Survival probability',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
opposite: true,
min: 0,
max: 100
}],
tooltip: {
formatter: function() {
var toolTip = '<b>Age : '+ this.x +'</b><br />';
jQuery.each(this.points, function(i, point) {
if( point.series.name == 'Survival probability' ){
if( isNaN(point.y) ){
// -- do nothing
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
});
return toolTip;
},
shared: true
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -5
}
},
series: [
{
name: 'Income',
type: 'column',
yAxis: 0,
data: income_array
},
{
name: 'Fund value',
type: 'spline',
yAxis: 1,
data: fund_value_array,
marker: {
enabled: false
}
},
{
name: 'Survival probability',
type: 'line',
lineWidth: 0,
yAxis: 2,
data: survival_array_2
}
],
colors: [{
linearGradient: perShapeGradient,
stops: [ [0, gradTop], [1, gradBottom] ]
},
'#003466',
'#fe6f01'
]
});
Simply set alignTicks to false for the Survival Probability axis. That's it.
When i have inconsistent data coming in (when for example the server that gathers the data is down) highcharts does not plot the X correctly.
It still plots like there is data on the X while there is not.
It should afcouse plot the correct hour when there actually is data.
Here is the fiddle: http://jsfiddle.net/ZVwFK/
Data variable is inconsistant!
Can someone show me how i can correct this error?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
margin: [50,130,90,100]
},
title: {
text: 'Weather Today'
},
credits: {
enabled: false
},
subtitle: {
text: 'test'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{
title: {
text: 'Temperature C'
},
opposite: false,
minorGridLineWidth: 0
}, {
title: {
text: 'Humidity %'
},
minorGridLineWidth: 0,
opposite: true
}, {
opposite: true,
title: {
text: 'Air Pressure hPa',
minorGridLineWidth: 0,
},
}],
tooltip: {
formatter: function() {
if(this.series.name === 'Temperature')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Humidity')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
}
if(this.series.name === 'Air Pressure')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
}
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
}
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'spline',
/* yAxis: 0, */
shadow: true,
showInLegend: true,
pointInterval: 60 * 1000,
/* pointStart: Date.UTC(2006, 0, 1),*/
dashStyle: 'solid',
marker: {
enabled: false
}
} , {
name: 'Humidity',
data: hum,
yAxis: 1,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'dot',
marker: {
enabled: false
}
}, {
name: 'Air Pressure',
data: bar,
yAxis: 2,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot',
marker: {
enabled: false
}
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
There are two ways of specifying time data for Highcharts and I think you are using the wrong way for the problem. It's the second style you should use when having gaps in the data.
A compact array without gaps only containing the values for each time-point
data: [2, 5, 3, 6, 1]
Then you specify the time-point for the first measure together with the interval. eg:
pointStart: Date.UTC(2013,1,12), // start point in milliseconds
pointInterval: 3600 // interval in milliseconds
You cannot have different length between the time-points this way.
A two dimensional array with both time-points and measure
data: [[Date.UTC(2013,1,12), 2],
[Date.UTC(2013,1,12), 5],
[Date.UTC(2013,1,12), 3],
...]
This way of specifying the array can have gaps where there's no data.
See the reference here
and example here.
How can I animate the graph from a certain point in Highcharts?
Look at this JSfiddle. Can I say 'animate from point [Date.UTC(1997,1,0),5.5]'? Or animate only a certain series?
So everything before [Date.UTC(1997,1,0),5.5] should not animate and just 'be there' when the graph loads.
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 20
},
title: {
text: 'Kortetermijnraming CPB'
},
subtitle: {
text: 'Werkloosheid stijgt tot 6%'
},
xAxis: {
max: Date.UTC(2013, 1, 0),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 0,
title: {
text: 'Werkloosheid (%)'
},
plotLines: [{
value: 0,
width: 2,
color: '#000000',
zIndex: 5
}, {
label: {
text: 'Werkloosheid',
x: 0,
align: 'right'
},
value: 5,
width: 0.5,
color: '#ffffff',
zIndex: 1
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '<br/>' + Highcharts.dateFormat('%Y', this.x) + ':</b> ' + this.y + '%';
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
legend: {
enabled: false
},
});
Add animation to the serie:
serie: [{
animation: {
duration: 5000
},
...
}]
demo