Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance
You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter
I need to display the average of the values of my 2 datasets, but with a specific characteristic: when the users zoom the chart, the average line is recalculated ONLY with the values of the zoomed area.
How is this done?
Here is my JS:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Test'
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
title: {
enabled: true,
text: 'Date'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} date, {point.y} dose'
}
}
},
series: [{
name: 'ag',
color: 'rgba(223, 83, 83, .5)',
data: [[1426719600000,0.9659],[1426719600000,0.8928],[1445205600000,1.6428],[1445205600000,1.4711],[1445205600000,1.4209],[1445205600000,1.9574],[1445205600000,1.1226],[1445205600000,0.8159],[1445205600000,1.0114],[1445205600000,0.9168],[1445464800000,1.175],[1445464800000,1.2219],[1445464800000,1.2641],[1445464800000,1.3006],[1445464800000,0.9375],[1445464800000,0.8966],[1445464800000,0.9374],[1445464800000,1.0811]]
}, {
name: 'cf',
color: 'rgba(119, 152, 191, .5)',
data: [[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.265],[1445378400000,2.015],[1445378400000,2.015],[1445378400000,2.015],[1445464800000,1.2254],[1445464800000,1.1065],[1445464800000,1.3482],[1445464800000,1.3015],[1445292000000,1.2297]]
}]
});
});
Thanks in advance!
This can be done several ways. I am going to show you the way to do it via chart.events.redraw. Whenever you do a zoom (or reset zoom) the chart is redrawn and this gives us a good hook into calculating and adding items to chart at that time. Here is the code block for the redraw event:
Here is a live demo.
I made it verbose so you can see each step. We are going to use getExtremes() to find out what are max and min xAxis and yAxis indexes are. From this we determine if the points in each series are within this "window". If they are not within the window we ignore. If they are then we add the y-value to a var and increment the point counter by 1. Once we are done we do a simple check to make sure we are not going to divide by zero and then calculate the average.
Once we have the average we then will draw a plotLine at the value of the average we calculated above. First we see if a plotline exists with our id. If it does we remove it. Then we create our new plotline.
There is some clean up to do as well (such as, do you include a 0-value plotline based on your business rules) but this should get you started.
Attempted to add code block in edit as original answer attempt would not let it through. Still unable to post code block.
I have a webpage with HighCharts and idTabs plugins installed. I just want to show 1 chart at time, so hi got them in multiple tabs. The html code is:
<ul class="idTabs">
<li>Points</li>
<li>Kills and deaths</li>
<li>Damage</li>
<li>Bombs</li>
</ul>
<div id="vpPointsGraphWrapper"><div id="vpPointsGraph"></div></div>
<div id="vpKillsDeathsGraphWrapper"><div id="vpKillsDeathsGraph"></div></div>
<div id="vpDamageGraphWrapper"><div id="vpDamageGraph"></div></div>
<div id="vpBombsGraphWrapper"><div id="vpBombsGraph"></div></div>
Until this point is all okey, the charts have their data, and all is okey except one thing, the width. The chart that is showed by default (vpPointsGraph) has the correct width (100% of the div that contains them), but the others take the width that correspond to the width of the monitor, overflowing out of the wrapper div. I think the problem is that they want to get the wrapper div width, but as its hidden they take the whole screen width. ¿Is there anyway to fix this?
Thanks for your answers.
Edit: I solved it, check the next answer for explanation.
Solution: http://jsfiddle.net/5kLdG/
What i have done its just getting the width of the container i want the chart to fit in, and setting it in the highcharts 'width' parameter. I don't know if its the best solution but it worked for me.
//Get wrapper width
var width = $('#wrapper').width()
//Points Graph
var pointsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpPointsGraph',
type: 'line'
},
title: {
text: 'Points'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5,6,7],
reversed: true
},
yAxis: {
title: {
text: 'Points'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Points',
data: [5,6,7,8,3,6,8]
}]
});
//KillsDeaths Graph
var killsDeathsChart = new Highcharts.Chart({
chart: {
renderTo: 'vpKillsDeathsGraph',
type: 'line',
width: width
},
title: {
text: 'Kills and Deaths per match'
},
xAxis: {
title: {
text: 'Match'
},
categories: [1,2,3,4,5],
reversed: true
},
yAxis: {
title: {
text: 'Number'
},
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
plotOptions: {
line: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Kills',
data: [6,8,2,2,5]
}]
});
I am using highcharts to display charts in my project. Everything is great but when I use zoom buttons the grid lines are dissapearing.
Does anyone know what could be the reason for this?
Below is my code. I did not change much from the examples provided in highcharts.com.
I get the chart with grid lines first without any problem. Only when I use zoom buttons grid lines dissapear. This is not happening with highcharts examples.
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
Edit: I have used the following plug in my website for grouping categories in x-axis. The above problem occurs wherever I used this plugin. Can anybody suggest what I can change to get rid of this problem? Or can anyone suggest an other plugin which gives this functionality?
http://blacklabel.github.io/grouped_categories/
I have used this plugin code in following jsfiddle and could reproduce the issue.
Click on zoom(1y,6m) buttons in this fiddle and observe that grid lines are disappearing
http://jsfiddle.net/92NDX/
I am trying to use this Javascript to create a scatter plot: http://www.highcharts.com/demo/scatter/gray
Im using it just like it shows there and when i copy the graph with the info from the example it works fine.
I created a function to populate the table to how I want...this is how my code looks
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
var rateValueData = <?php echo json_encode($data);?>;
$(function (scatter) {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: THIS IS WHERE I NEED TO USE THE VARIABLE!!!!
}, ]
});
});
</script>
so the function to create the Variable works but then how can i use that variable to populate the data for the graph
This is what the variable displays at when I echo it out:
var rateValueData = [["7.59090","104.2"],["1.58181","101.3636364"],["0.86363","106.5090909"],["0.7","73.86363636"],["2.7","94.38571429"],["2.48333","104.4727273"],["22.45","103"],["4.09090","105.3888889"],["1.91818","102.2909091"],["1.85","94.82727273"],["62.1","102.7666667"],["6.31818","100.7454545"],["2.31818","107.9545455"],["5.8","99.9625"],["1.92727","105.4727273"],["1.1","102.3"],["16.95","99.40909091"],["0.6","96.35"],["81.68","103.7909091"],["11.5818","116.7363636"],["2.64545","104.8111111"],["1.72","105.73"],["1.24545","104.9272727"],["1.35454","101.9363636"],["32.6363","99.05"],["15.5727","102.05"],["0.8","103.6"],["2.37272","109.7818182"],["0.9","99.62727273"],["4.05454","93.06363636"],["1.1","101.2272727"],["2.70909","102.5888889"],["1.35454","106.3363636"],["41.2181","101.3375"],["0.52727","104.4363636"],["14.8818","107.3909091"],["2.18333","98.82727273"],["3.7","66.70909091"],["10.3272","113.5545455"],["2.31428","96.51818182"],["1.14","101.7727273"],["11.9727","102.4272727"],["1.68571","101.3727273"],["1.48181","102.1454545"],["1.3","103.5181818"],["12.3090","100.8545455"],["0.91818","101.9272727"],["6.51","92.75"],["10.7818","98.05"],["21.46","97.95"],["8.35","98.85"],["7.6625","98.53"],["2.79090","106.1909091"],["1.17","107.3090909"],["19.9181","107.6909091"],["0.61666","50.03636364"],["2.68181","104.5818182"],["1.11428","80"],["1.93333","105.0454545"],["0.84545","99.36"],["2.46363","105.8714286"],["1.49090","104.9272727"],["50.4545","106.6636364"],["1.24545","103.9363636"],["1.01818","102.1636364"],["1.12727","104.7090909"],["2.22222","96.01818182"],["7.83636","101.4090909"],["4.5","98.98181818"],["8.99090","116.1571429"],["1.67272","105.1545455"],["6.25","106.5727273"]];
That is the data that I need to plot in the scatter chart.
Can anybody help me out?
Let me know if you need more info
The problem is your array contains string instead of numeric value.
Try with
var rateValueData = [[7.59090,104.2],[1.58181,101.3636364],[0.86363,106.5090909],[0.7,73.86363636],[2.7,94.38571429],[2.48333,104.4727273],[22.45,103],[4.09090,105.3888889],[1.91818,102.2909091],[1.85,94.82727273],[62.1,102.7666667],[6.31818,100.7454545],[2.31818,107.9545455],[5.8,99.9625],[1.92727,105.4727273],[1.1,102.3],[16.95,99.40909091],[0.6,96.35],[81.68,103.7909091],[11.5818,116.7363636],[2.64545,104.8111111],[1.72,105.73],[1.24545,104.9272727],[1.35454,101.9363636],[32.6363,99.05],[15.5727,102.05],[0.8,103.6],[2.37272,109.7818182],[0.9,99.62727273],[4.05454,93.06363636],[1.1,101.2272727],[2.70909,102.5888889],[1.35454,106.3363636],[41.2181,101.3375],[0.52727,104.4363636],[14.8818,107.3909091],[2.18333,98.82727273],[3.7,66.70909091],[10.3272,113.5545455],[2.31428,96.51818182],[1.14,101.7727273],[11.9727,102.4272727],[1.68571,101.3727273],[1.48181,102.1454545],[1.3,103.5181818],[12.3090,100.8545455],[0.91818,101.9272727],[6.51,92.75],[10.7818,98.05],[21.46,97.95],[8.35,98.85],[7.6625,98.53],[2.79090,106.1909091],[1.17,107.3090909],[19.9181,107.6909091],[0.61666,50.03636364],[2.68181,104.5818182],[1.11428,80],[1.93333,105.0454545],[0.84545,99.36],[2.46363,105.8714286],[1.49090,104.9272727],[50.4545,106.6636364],[1.24545,103.9363636],[1.01818,102.1636364],[1.12727,104.7090909],[2.22222,96.01818182],[7.83636,101.4090909],[4.5,98.98181818],[8.99090,116.1571429],[1.67272,105.1545455],[6.25,106.5727273]];
This demo is throwing an error
While this is working