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 am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
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,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO
The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.
I am working on high chart .I want to add comma between the digit (as a label ).I am using high chart
http://jsfiddle.net/xpLgj7n5/
As shown in image there is gap between 0 and 7 .I understand this , it is because number represent the thousand. I need to add comma between them ",".I need to display numbers like this "10,700" when I change the data nothing happen
I change the data like this
data: [10,700, 31,00, 63,500, 20,300, 2,000]
nothing happen.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [10700, 3100, 63500, 20300, 2000]
}]
});
});
Refer to documentation
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Fiddle
That may work, but this also works:
plotOptions: {
line: {
dataLabels: {
enabled: true,
format: '${y:,.2f}'
}
}
}
$ - for dollar sign
Y - for y axis
, - adds a comma where a space would be
2f - two digits after decimal point
ex: format: '${y:,.2f}' would show up as $10,000.00
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