I would like to add new points to the scatter plot in a async manner. For that, there is an api in scatter plot "addpoint" that adds newly sent data to the chart without refreshing the scatter plot. The code used in this is
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function(){
$('#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: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
]
}]
});
function requestData() {
var chart = $('#container').highcharts();
var points = [
{
x: Math.random() * 100,
y:Math.random() * 80
}
]
var series = chart.series[0];
var data;
chart.series[1].addPoint([Math.random() * 100,Math.random() * 80]);
// call it again after one second
setTimeout(requestData, 1000);
}
requestData();
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The fiddle is here : http://jsfiddle.net/anirbankundu/T8GT3/1/
Can anyone let me know if there is any possible way to add an array of points instead of adding each point step by step. I will be fetching around 1000 points for each call and the total number of points can go above 100K
Thanks,
Anirban
Use chart.series[1].data to get the current serie data and then use chart.series[1].setData to update it's data.
function requestData() {
var chart = $('#container').highcharts(),
serie = chart.series[1];
// get serie data
var data = serie.data;
// append points to data
for (var i = 0; i < 1000; i++) {
data.push([
Math.random() * 100,
Math.random() * 80
]);
}
// update serie data
serie.setData(data);
}
You can see it working here.
Update - Append points to the current data
function requestData() {
var chart = $('#container').highcharts();
// append points to data
for (var i = 0; i < 1000; i++) {
chart.series[1].addPoint([
Math.random() * 100,
Math.random() * 80
], false);
}
chart.redraw();
}
Demo
Related
High everyone,
I am trying to get two things to happen. First, I want to create a custom tooltip for a columnrange-type series where the tooltip shows something like HIGH: 'this.point.high' and on a new line "LOW:" 'this.point.low'. Second, I would like these 'low' and 'high' values to populate a form field dynamically. For example, when a user drags the high value for the columnrange entry, I want this to dynamically update a number in the corresponding formfield that collects user input.
Here is a fiddle: https://jsfiddle.net/e9zqmy12/
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
var myChart;
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
// draw chart
myChart = Highcharts.chart('container',
{
chart: {
type: "line",
events: {
click: function (e) {
// find the clicked values and the series
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
},
drag: function (e) {
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
}
}
},
title: {
text: "Forecasting History"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Quarter"
},
plotBands: [{
color: 'rgba(204,153,255,0.2)', // Color value
from: 11.5, // Start of the plot band
to: 12.5, // End of the plot band
label: {
text: 'Forecast'
}
}]
},
yAxis: {
title: {
text: "Inflation (%)"
},
plotLines: [{
value: 0,
width: 2,
color: '#aaa',
zIndex: 10
}]
},
tooltip: {
style: {
color: 'black',
fontWeight: 'bold',
fontSize: 13
},
positioner: function () {
return { x: 80, y:0 };
},
shared: true,
headerFormat: '',
valueDecimals: 2,
shadow: false,
borderWidth: 2,
borderColor: '#000000',
shape: 'rect',
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [
{
name: 'Inflation',
data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Central Bank Forecast',
data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Your Forecast',
showInLegend: false,
data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
marker: {
radius: 2.5,
fillColor: 'red'
},
},{
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
}
}
},
name: 'Forecast Range',
color: 'rgba(255,0,0,.1)',
type: 'columnrange',
data: [[12,1,3]],
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: "+this.point.low + " HIGH:" +this.point.high;
}
},
dragDrop: {
draggableY: true,
groupBy: 'GroupId',
dragMinY: -10,
dragMaxY: 10,
dragPrecisionY: .01,
liveRedraw: false
},
}
],
});
It seems that your code was almost good except this callback pointFormatter callback - notice that this calls for point already, so this.point refers to undefined, it should be:
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: " + this.low + " <br>HIGH:" + this.high;
}
},
Demo: https://jsfiddle.net/BlackLabel/vbo6j9em/
I am new to HighCharts and I am trying to display 2 graphs on the same x-axis) axis like shown here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/.
However, I get an error message: This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.
The error occurs in "chart1"
The html and JAVASCRIPT code is as follows:
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[]
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
console.log(date);
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
console.log("day_final", day_final);
var chart = new Highcharts.chart({
chart: {
type: 'spline',
renderTo: 'light',
marginBottom: 200
},
title: {
text: 'indicatorName'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: 'Ambient Light Level'
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final //
}]
});
var chart1= Highcharts.chart('temp&humid',{
chart: {
zoomType:'xy'
},
title:{
text:'Humidity and temperature'
},
xAxis:{
categories: [1,2,3],
crosshair: true
},
yAxis: [{
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title:{
text: 'Temperature',
style:{
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
},
{ //secondary Y AXIS
gridLineWidth: 0,
title:{
text: 'Humidity',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
format: '{value}%',
style:{
color:Highcharts.getOptions().colors[0]
}
}
}]
,
tooltip:{shared:true},
legend:{
layout: 'vertical',
align:'left',
x:80,
verticalAlign: 'top',
y: 55,
floating:true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series:[{
name:'Humidity',
type: 'column',
yAxis:1,
data:[12,3],
tooltip:{valueSuffix: ' %'}
},
{
name:'Temperature',
type:'spline',
yAxis:2,
data: [1,2,3],
tooltip:{valueSuffix: ' °C'}
}]
});
}); //getJSON method
setTimeout(updat, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>
You are doing the following:
series:[{
yAxis:1,
},
{
yAxis:2,
}]
You need to do:
series:[{
yAxis:0,
},
{
yAxis:1,
}]
The problem is that axes start indexing at 0. So your index where you set temperature to axis 2 does not work because there is no axis 2. In the demo there are 3 axes, which is why it works with these definitions.
My graph is very similar to this example: http://jsfiddle.net/MrFox1/n6vwqafg/
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container" style="height: 500px; min-width: 410px; max-width: 600px; margin: 0
auto">
</div>
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
Highcharts.mapChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'vertical',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'middle',
align: 'right',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
});
I need to add a label to the axis showing the average of all the data shown.
Ideally with a marker to the position in the legend. The same marker that is shown on the axis when you hover over the map, that shows how the color you're pointing to relates to the legend.
The average over all the numbers has already been calculated, it's just about how to show this visually.
You can set tick positions in the color axis via colorAxis.tickPositions (array) or colorAxis.tickPositioner (callback). It will creates a tick for the specified value. If you use a logarithmic axis then those values need to be scaled properly.
colorAxis: {
tickPositions: [Math.log10(1), Math.log10(10), Math.log10(calculatedAverage), Math.log10(100), Math.log10(1000)],
Then use colorAxis.labels.formatter to define text for a specific tick.
labels: {
formatter: function () {
return this.value == calculatedAverage
? 'avg (' + this.value + ')'
: this.value;
}
}
example: http://jsfiddle.net/n6vwqafg/9/
I want to addSeries in onclick event of a point, but I got an error that addSeries isn't a function of current this.
How can I add Series to HighChart Graph when I click on one of his points?
I am adding the following jsfiddle to demonstrate the problem:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
this.addSeries({
name:'series1',
color: "red",
data:[10,20,30,40]
});
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
Check this out. I console.log the this and it is referring to the Point instead of Chart, and this is why the error saying addSeries isn't a function of this.
Modified it with $('#container').highcharts().addSeries and it works.
I have found the code below. I would like to have differents symbols for 1 serie in Highcharts with the threshold = 50. When the y value is smaller than 50 I would like green symbols and when y value is bigger than 50 I would like square symbols.
Thank you for your help!
http://jsfiddle.net/mhardik/YgxEB/1/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Scatter Graph Demo'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +' cm, '+ this.y +' kg';
}
},
plotOptions: {
scatter: {
marker: {
radius: 3,
symbol:myFunction(),
}
}
},
series: [{
name: 'Points',
color: 'rgba(223, 83, 83, .5)',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6]]
}]
});
});
});
function myFunction() {
if(true){
return 'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)';
} else{
return 'square';
}
}
If you reorganize your code a bit, you can start out with the data array and then preprocess it into object literals that hold a marker definition for each point:
data = $.map(data, function (point) {
return {
x: point[0],
y: point[1],
marker: {
radius: 3,
symbol: point[1] < 50 ?
'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)' :
'square'
}
};
});
http://jsfiddle.net/highcharts/YgxEB/10/