Related
I know that when my mouse is on the chart, it will show the points and tooltips as below:
I want:
Auto show the last points' tooltips, without mouse on it.
when exporting, also show the last tooltips, as in the image.
https://jsfiddle.net/dodouwang/Lh53fyu7/2/
// Create the chart
Highcharts.chart('container', {
exporting: {
useHTML: true
},
chart: {
type: 'spline'
},
title: {
text: 'Mountain house indoor temperatures'
},
subtitle: {
text: 'Split tooltips in Highcharts makes it easier to read overlapping line series'
},
tooltip: {
valueSuffix: '°C',
split: true,
distance: 30,
padding: 5
},
xAxis: {
crosshair: {
enabled: true
}
},
yAxis: {
title: {
text: 'Temperatur'
}
},
plotOptions: {
series: {
lineWidth: 1.5,
marker: {
radius: 2
}
}
},
data: {
columns: [
["Time", 1451616120000, 1451865660000, 1451952060000, 1452038400000, 1452124800000, 1452211200000, 1452297600000, 1452384000000, 1452470400000, 1452556800000, 1452643200000, 1452729600000, 1452816000000, 1452902400000, 1452988800000, 1453075200000, 1453161600000, 1453248000000, 1453334400000, 1453420800000, 1453507200000, 1453593600000, 1453680000000, 1453766400000, 1453852800000, 1453939200000, 1454025600000],
["Kitchen", 5, 4, 5, 9, 6, 15, 19, 14, 6, 5, 6, 6, 15, 18, 15, 6, 6, 6, 6, 6, 6, 6, 16, 10, 6, 6, 6],
["Living room", 9, 10, 16, 13, 6, 20, 24, 16, 7, 7, 6, 6, 20, 23, 18, 9, 7, 6, 6, 7, 6, 21, 20, 16, 6, 6, 6],
["Hall", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
["Bathroom", 7, 7, 13, 12, 5, 17, 22, 14, 4, 5, 5, 6, 18, 21, 17, 9, 5, 6, 5, 6, 6, 18, 20, 14, 5, 5, 5],
["Bedroom 1", 6, 19, 19, 10, 5, 15, 21, 14, 6, 6, 5, 5, 17, 21, 16, 6, 5, 5, 5, 5, 5, 17, 18, 13, 5, 5, 5],
["Bedroom 2", 7, 19, 19, 9, 5, 11, 19, 15, 6, 5, 6, 6, 16, 19, 17, 8, 9, 6, 5, 6, 5, 17, 19, 14, 6, 6, 6],
["Shed", 6, 6, 5, 5, 6, 6, 6, 5, 5, 6, 6, 5, 6, 6, 6, 6, 6, 6, null, null, 6, 6, 6, 6, 6, 6, 6]
]
}
});
This can be achived by using tooltip.refresh method:
function(chart) {
let points = [];
chart.series.forEach(series => {
points.push(series.points[series.points.length - 1])
})
chart.tooltip.refresh(points)
})
Demo:
https://jsfiddle.net/BlackLabel/cqp96b0d/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Tooltip#refresh
EDIT:
Add this function in the exporting.chartOptions on chart.load event as well - this allows to show tooltips automatically during exporting.
exporting: {
chartOptions: {
chart: {
events: {
load() {
let points = [];
this.series.forEach(series => {
points.push(series.points[series.points.length - 1])
})
this.tooltip.refresh(points)
}
}
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/24tjysnd/
I want to print score value only
void main() {
List questions = [
{
'questionText': 'What\'s your favorite color?',
'answers': [
{'text': 'Black', 'score': 10},
{'text': 'Red', 'score': 0},
{'text': 'Green', 'score': 0},
{'text': 'White', 'score': 0},
],
},
];
I tried to do
print(questions[0]["score"])
But it doesn't work. can anyone help me please
When you access questions[0] you are getting the first element in the array, which in this case is:
{
'questionText': 'What\'s your favorite color?',
'answers': [
{'text': 'Black', 'score': 10},
{'text': 'Red', 'score': 0},
{'text': 'Green', 'score': 0},
{'text': 'White', 'score': 0},
],
}
When you then write questions[0]["score"] you are trying to get the key score, which as you can see is null.
You should instead access answers inside the object, take a look at the examples below:
print(questions[0]["score"]); // null
print(questions[0]['answers'][0]['score']); // 10
print(questions[0]['answers'].map((answer) => answer['score'])); // (10, 0, 0, 0)
I want to get the value of 'id' of map as list.
Expected output: [1,35, 93, 82, 28]
[{'id': 1, 'name':'flutter', 'title':'dart'},
{'id': 35, 'name':'flutter', 'title':'dart'},
{'id': 93, 'name':'flutter', 'title':'dart'},
{'id': 82, 'name':'flutter', 'title':'dart'},
{'id': 28, 'name':'flutter', 'title':'dart'},
];
You can use .map to iterate through each object and get the value you want:
void main() {
final list = [
{'id': 1, 'name': 'flutter', 'title': 'dart'},
{'id': 35, 'name': 'flutter', 'title': 'dart'},
{'id': 93, 'name': 'flutter', 'title': 'dart'},
{'id': 82, 'name': 'flutter', 'title': 'dart'},
{'id': 28, 'name': 'flutter', 'title': 'dart'},
];
final idList = list.map((e) => e['id']).toList(); // [1, 35, 93, 82, 28]
}
I am using the predefined symbols for highcharts on a line chart, and would like to only have the symbol show. I do not want the line to show on there as well. I see that it is possible for a bubble chart, but when I change the chart type from bubble to line, the strikethrough appears: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bubble-symbol/. Any thoughts on to how I could combat this? Thanks in advance!
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts Bubbles with symbols'
},
series: [{
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
{
x: 57,
y: 0,
z: 31,
marker: {
symbol: 'triangle',
lineColor: 'red',
fillColor: 'rgba(255,0,0,0.5)'
},
dataLabels: {
enabled: true,
format: 'Individual marker'
}
}
],
marker: {
symbol: 'square'
},
name: 'Square'
}, {
data: [
[25, 10, 87],
[2, 75, 59],
[11, 54, 8],
[86, 55, 93],
[5, 3, 58],
[90, 63, 44],
[91, 33, 17],
[97, 3, 56],
[15, 67, 48],
[54, 25, 81]
],
marker: {
symbol: 'diamond'
},
name: 'Diamond'
}, {
data: [
[47, 47, 21],
[20, 12, 4],
[6, 76, 91],
[38, 30, 40],
[57, 98, 64],
[61, 17, 10],
[83, 60, 13],
[67, 78, 75],
[64, 12, 10],
[30, 77, 82]
],
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/earth.svg)'
},
name: 'Earth'
}]
});
I think that you can use the scatter series type to achieve it.
Demo: https://jsfiddle.net/BlackLabel/8gpnx90v/
chart: {
type: 'scatter'
},
API: https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
Bit of a late answer but if you set symbolWidth to the same value as the radius of your symbols it will hide the lines in the legend:
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
symbolWidth: 6
},
plotOptions: {
line: {
marker: {
symbol: 'circle',
radius: 6
}
}
},
I have a dataset like so where each layer is a chart in itself (example dataset below), below chart only plots the first layer Week 1.
I would like to add a timeline axis to it (date picker and timeSelector(instead of rangeSelector))which lets me show the different layers upon interaction
var dataSequence = [{
name: 'Week 1',
data: [1, 2, 2, 1, 1, 2, 2]
}, {
name: 'Week 2',
data: [6, 12, 2, 3, 3, 2, 2]
}, {
name: 'Week 3',
data: [4, 5, 6, 5, 5, 4, 9]
}, {
name: 'Week 4',
data: [5, 5, 6, 6, 5, 6, 6]
}, {
name: 'Week 5',
data: [6, 7, 7, 6, 6, 6, 7]
}, {
name: 'Week 6',
data: [8, 9, 9, 8, 8, 8, 9]
}, {
name: 'Week 7',
data: [9, 10, 4, 10, 9, 9, 9]
}, {
name: 'Week 8',
data: [1, 10, 10, 10, 10, 11, 11]
}, {
name: 'Week 9',
data: [11, 11, 12, 12, 12, 11, 11]
}];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Highcharts with time control - weeks'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'By week',
data: dataSequence[0].data.slice()
}, {
name: 'Average week',
data: [6, 8, 6, 7, 7, 7, 6]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I am aware of this motion plugin https://www.highcharts.com/blog/tutorials/176-charts-in-motion/ but I am looking for an inbuilt highchart solution.
I can imagine something can be cooked up with drilldown functionality? basically a chart which shows drill down series all the time and a timeline to interact.
What do you suggest? Is anyone aware of a solution here?
Thanks in advance.
You can add some custom buttons and on click use setData method to change the current data set:
document.getElementById('week3').addEventListener('click', function() {
chart.series[0].setData(dataSequence[2].data);
});
document.getElementById('week7').addEventListener('click', function() {
chart.series[0].setData(dataSequence[6].data);
});
Live demo: http://jsfiddle.net/BlackLabel/st12m4hn/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData