How to configure Highcharts so that it displays some pre-defined value - javascript

I have been searching and struggling to find a solution for my problem for a long time but no luck.
I have a simple screen where i ask user to enter their score. Once they enter their score my graph shows up with my pre-defined average score and highest score. In this case, my average score is 1450 and the highest score is 1900.
What i want to do is that once my page is loaded i want my graph displays the average and highest score already. Once user enter his score then it shows up.
Below is my code and you can see it here: http://jsfiddle.net/8jomr1wd/
Any idea?
$(function () {
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}],
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
})
});

$(document).ready(function () {
$(function () {
create(0)
$('#btn').click(function () {
var val1,
options;
val1 = parseFloat($('input[name=entered]').val());
create(val1);
});
});
});
function create(val1){
if ((val1 >= 0) && (val1 <= 1900)) {
// start creating the chart
options = {
chart: {
type: 'column'
},
title: {
text: 'Title'
},
subtitle: {
text: 'This is subtitle'
},
xAxis: {
type: 'category',
labels: {
enabled: true
},
legend: {
enabled: true
},
categories: ['Your score', 'Average', 'Highest Score']
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderColor: '#000000',
borderWidth: 1,
dataLabels: {
enabled: true
},
colorByPoint: true
}
},
credits: {
enabled: false
},
yAxis: {
max: 1900,
tickInterval: 100,
title: 'test'
},
tooltip: {
enabled: true
},
series: [{
name: 'Score',
data: [val1, 1450, 1900]
}]
};
} else {
$("#result").append("<div>Score must be between 0-1900</div>");
}
$('#container').highcharts(options);
}

Related

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

Highchart - I have to refresh the page to see new data

Below is the chart code, my problem is JSON needs to be used to grab updated data.
I dont want the whole chart to be re-render, but instead only the candles (add the new ones).
I guess there has to be a loop looking every sec in the new data by looping the JSON and create a chart.update?
Would love a answer from anyone with how i should solve this with code!
https://codeshare.io/alxOMZ
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
-----CODE-----
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
Looking at the highcharts api quickly on google, you may need an event property followed by load property, and your logic, which would probably include something like
chart: {
events: {
load: function () {
// here's how you would access your series
var series = this.series[0];
setInterval(function () {
//modify your series here.
}, 1000);
}
}
}

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

Highchart: why can I not set the duration in this case?

Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?

highcharts grouping with overflow

I made highcharts for petrol tank(credit prepayment)
I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)
Thanks.
![var options = {
chart: {
type: 'bar',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: \['Credit'\],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: \[{
color:'#89C35C',
name: 'Current Credit',
data: \[10\] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: \[5\] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: \[1\] }\],
};
$('#container').highcharts(options);][1]
Example:
http://jsfiddle.net/2se5q/
you will find all the explanations on this link http://api.highcharts.com/highcharts
To answer your question if you delete only "plotOptions:" You will not find more than the sum of the graphics on a line but starting from 0.
Here : http://jsfiddle.net/2se5q/3/
plotOptions: {
series: {
stacking: 'normal'
}
I made it like this,where type = area
http://jsfiddle.net/2se5q/4/
var options = {
chart: {
type: 'area',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: ['Credit'],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
color:'#89C35C',
name: 'Current Credit',
data: [10,10] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: [5,5] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: [1,1] }],
};
$('#container').highcharts(options);

Categories