I have a graph with a rectangle added via chart.renderer and it looks exactly the way I want it to in Firefox, but when I view it in Chrome or IE the coordinates are off. I have the min and max set and I've tried setInterval, but to no avail. Here's my code:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart) { // on complete
chart.renderer.rect(348, 50, 242, 217, 0)
.attr({
fill: 'red'
})
.add();
});
Here's what it looks like in Firefox: http://i.imgur.com/8OQfRCR.png
And here's what it looks like in Chrome: http://i.imgur.com/NpKjwu3.png
I believe I've found the solution. It has to do with the chart offsets chart.plotLeft and chart.plotTop. I will post my full solution later.
Here's my working code:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart)
{ // on complete
//calculate corrdinates and dimensions based on offsets
var x=279+chart.plotLeft;
var y=chart.plotTop;
var width=chart.plotWidth*.467;
var height=chart.plotHeight*.502;
chart.renderer.rect(x, y, width, height, 0)
.attr({
fill: 'red'
})
.add();
});
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 + '%';
}
},
Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
area: {
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')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data
Please refer to JSFIDDLE
I want the value of var x1 (i.e, var x1 = 10;) should be change the moment i change the range slider which is::
document.getElementById("range").innerHTML
Please suggest.
Here is a simple solution for your question:
http://jsfiddle.net/La9s2cp4/5/
var chart;
function createChart(){
// Set up the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
marker: {
radius: xdata
},
colorByPoint: true,
data: [dataG.data1, dataG.data2, dataG.data3]
}]
});
}
I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.
Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm).
Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency.
So I need to create a series for each rotor size whem each series get the values of the data: H,NPSH,Power,Efficiency with its yAxis referals.
Here is the link's page with the code.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Curva da Bomba'
},
subtitle: {
text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
},
xAxis: [{
tickmarkPlacement: 'on',
labels: {
format: '{value}m³/h',
style: {
color: '#005ca2'
}
},
title: {
text: 'Vazão Q (m³/h)',
style: {
color: '#005ca2'
}
}
},{// Rendimento
labels: {
format: '{value}%',
style: {
color: '#005ca2'
}
},
title: {
text: 'Rendimento n (%)',
style: {
color: '#005ca2'
}
},
opposite: true,
top: 90,
height: 0,
offset: 0,
lineWidth: 1
}],
yAxis: [{ // Altura manométrica H
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'Altura manométrica H (mca)',
style: {
color: '#005ca2'
}
},
top: 90,
height: 250,
offset: 0,
lineWidth: 1
}, { // NPSH
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'NPSH (mca)',
style: {
color: '#005ca2'
}
},
top: 380,
height: 120,
offset: 0,
lineWidth: 1
}, {// Potência
title: {
text: 'Potência (hp)',
style: {
color: '#005ca2'
}
},
labels: {
format: '{value} hp',
style: {
color: '#005ca2'
}
},
top: 540,
height: 220,
offset: 0,
lineWidth: 1
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 34,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false
},
pointInterval: 1, // one hour
pointStart: 6
}
},
series: [{
name: 'Rendimento n (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'NPSH (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 1,
data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'Potência (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 2,
data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
tooltip: {
valueSuffix: 'hp'
}
}]
});
});
You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:
...
{
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
},
yAxis: 1,
}
...
Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.
My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
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'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
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: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo