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)
Related
Here is the code I have added to plot the bubble chart
{
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
},
title: {
text: 'Highcharts bubbles with radial gradient fill',
},
xAxis: {
gridLineWidth: 1,
min: 0,
},
yAxis: {
min: 0,
max: 100,
},
plotOptions: {
series: {
maxSize: 20,
cursor: 'pointer',
stickyTracking: false,
},
bubble: {
dataLabels: {
enabled: true,
format: '{point.y:,.0f}%',
inside: false,
align: 'center',
x: 0,
y: -8,
style: {
textOutline: 0,
fontWeight: '400',
color: 'black',
},
},
marker: {
lineWidth: 0,
},
},
},
series: [
{
data: [
[42, 38, 500],
[6, 18, 1],
[0, 93, 505],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 187, 89],
[57, 191, 82],
[45, 15, 98],
],
},
],
}
There you might find 2 data points not showing up because y-axis range has been defined. I would also need those points to be rendered in the graph at boundary level (at 100). Is there any special property to set this (or) it is not working even if highcharts had default feature like that. Please help me with this.
You can preprocess your data to set y: 100 for values that are greater than 100 and save the original value to show it, for example in a tooltip:
var data = [
...
];
var processedData = data.map(el => ({
x: el[0],
y: el[1] > 100 ? 100 : el[1],
z: el[2],
realYVal: el[1]
}));
Highcharts.chart('container', {
...,
series: [{
data: processedData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/jx0o7e1d/
I have a working, simple highchart chart which plots 'score' against 'time'. There's a demo here: http://jsfiddle.net/akfwsq1e/.
The series data is in the form [time, score]:
"data": [
[1540398983, 3],
[1540398983, 2],
[1540398983, 3],
[1540398983, 2],
[1540398983, 4],
[1540485383, 3]
]
However, I need to append more meta-data as I'd like to extend the chart with filters etc in future. This means that the data from the API is returning named objects:
"data": [
{ 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
{ 'dateCompleted': 1540398983, 'score': 2, 'category': 'C' },
{ 'dateCompleted': 1540398983, 'score': 3, 'category': 'A' },
{ 'dateCompleted': 1540398983, 'score': 2, 'category': 'B' },
{ 'dateCompleted': 1540398983, 'score': 4, 'category': 'A' },
{ 'dateCompleted': 1540485383, 'score': 3, 'category': 'C' }
]
For now I'm not too concerned with the filtering, I just need to get the chart to plot the same as it does when using simple object values. When I use named values though the chart silently fails to plot anything.
I can't seem to figure out from the documentation how Highcharts 'knows' which values from a named-object to plot.
Can anyone suggest how to get this working?
Many thanks.
If you won't change the structure of object recieved from server, you could implement your own data parse function, which takes the data with specific structure, and returns the data specially prepared for Highcharts.
Actually it's a bit piece of cake, so I wrote that function:
function mapData(data) {
let arr;
arr = data.map(point => {
return {
x: point.dateCompleted,
y: point.score,
category: point.category
}
})
return arr
}
Live example: http://jsfiddle.net/1jp8v6ns/
Apparently you need to call the values to plot 'x' and 'y' (https://api.highcharts.com/highcharts/series.column.data). So this works:
"data": [
{ 'x': 1540398983, 'y': 3, 'category': 'A' },
{ 'x': 1540398983, 'y': 2, 'category': 'C' },
{ 'x': 1540398983, 'y': 3, 'category': 'A' },
{ 'x': 1540398983, 'y': 2, 'category': 'B' },
{ 'x': 1540398983, 'y': 4, 'category': 'A' },
{ 'x': 1540485383, 'y': 3, 'category': 'C' }
]
I have gone through the highstock datagrouping documenation(https://api.highcharts.com/highstock/series.column.dataGrouping), But little unclear about this data grouping option, Things I have noticed is, Data grouping is enabled by default in highstock, I n which we can force the datagrouping by giving custom datagrouping option through units option in datagrouping, The doubt I got is which is the default data grouping(default unit option) in highstock, another one is do we need to tell the datagrouping units for each time interval by which we are gonna show in chart(eg, if the datarange chosen is one month the grouping should by 1 day, If the daterange chosen is one day means the datagrouping units should be by hour),
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
Do we need to specify each unit or do we need to change the units dynamically based on the daterange chosen?
This is what I have done, The based on the daterange the user chosen the grouping units should be changed, Do we need to specify the units based on the daterange chosen and what the units array specifies (Is Giving only one unit as option to the grouping is the functionality, Or the units array options can be chosen based on the timestamps)
Highcharts.stockChart('chart', {
chart: {
zoomType: false
},
legend: {
enabled: true
align: 'right',
verticalAlign: 'top',
x: 0,
y: -20
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e"
}
},
yAxis: {
opposite : false
},
series: [{
data: data ,
marker: {
enabled: true
},
dataGrouping: {
forced: true,
approximation: "sum"
}
}]
EDIT
While forced option is set to false
which is the default data grouping(default unit option) in highstock
There's a little flaw in the API (https://api.highcharts.com/highstock/series.column.dataGrouping.units) in units section. First it says that it defaults to:
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
and after that "Defaults to undefined." line appears. The first one is correct.
Highcharts automatically finds the best grouping unit from units array. So, in other words: units specifies which groupings can be applied if Highcharts decides that applying data grouping is a good idea.
Enable dataGrouping.forced and use only one key-value pair in units array if you want to make sure that this grouping will be used no matter what e.g.:
units: [[
'hour',
[3]
] // Data will always be grouped into 3 hours periods
These're just general rules - they should be enough to use data grouping successfully.
http://jsfiddle.net/vUdGJ/
$(function () {
$('#container').highcharts(
{
"xAxis": {
"startOnTick": true,
"endOnTick": true,
"type": "datetime",
"min": Date.UTC(2014, 1, 2),
"max": Date.UTC(2014, 4, 31)
},
"series": [{
"type": "line",
"data": [
[Date.UTC(2014, 1, 2, 11, 0, 0, 0), 30],
[Date.UTC(2014, 1, 3, 11, 0, 0, 0), 24],
],
}]
}
);
});
If you drag the divider to the left, the first point disappears behind the y-axis.
The model could not be much simpler. Is this a bug?
It's caused by setting startOnTick: true. As you can see, the first tick on a chart is 3rd of Feb (even if you specify to be 2nd of a Feb). Simply remove that option and will be working fine: http://jsfiddle.net/vUdGJ/1/
please take a look at this graph which displays as expected (i.e. ticks are at the specified positions):
http://jsfiddle.net/a3ZrC/3/
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
gridLineWidth: '1',
lineWidth: 1
//tickPosition: 'outside'
},
Now, if I specify categories, the tick positions (and grid) change, they are no longer on the label, see:
http://jsfiddle.net/a3ZrC/4/
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
categories: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'],
gridLineWidth: '1',
lineWidth: 1
//tickPosition: 'outside'
},
Is this a bug or am I missing something?
Cheers,
Tony.
Guess you missed a trick here. You can specify the tickmarkPlacement option .
It defaults to between. Specify it as on to get the results as you desired.
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
categories: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'],
gridLineWidth: '1',
lineWidth: 1,
tickmarkPlacement: 'on'
},
Fiddled version.
Hope this helps.