highcharts line and column - line not rendering - charts

For the life of me, I cannot figure out why the LINE graph is not rendering. It renders the COLUMNs just fine. Here are my chart options. Can someone shed some light on this?
thanks.
{
'chart':
{'renderTo': 'container'}
,
'credits':
{'text': ''},
'title':
{'text': 'CC SLA Attainment Trend'},
'subtitle':
{'text': '2013-06-01 to 2013-12-31'},
'xAxis':
{'categories':['Jun2013', 'Jul2013', 'Aug2013', 'Sep2013', 'Oct2013', 'Nov2013', 'Dec2013'],
'labels':{'enabled': true} },
'yAxis':
{'min': 0, 'max': 100,
'title': {'text': 'CC Attainment (percentage)'},
'labels': {'format': '{value}%'} },
'legend': {'enabled': true},
'tooltip': {'pointFormat': '<b>{point.y:.2f}%<\/b>'},
'lang': {'noData': 'There were no results based on search criteria, try again.'},
'noData': {'style':{'fontWeight': 'bold', 'fontSize': '15px', 'color': '#C7C7C7'} },
'navigation': {'buttonOptions':{'enabled': true} },
'exporting': {'filename': 'CCSLAAttainment'},
'series':[
{'type': 'column', 'name': 'Attainment', 'dataLabels':{'enabled': true},
'data':[73.39, 77.33, 77.52, 70.58, 68.95, 70.07, 73.58]},
{'type': 'line', 'name': 'Objective 70.00%', 'dataLabels':{'enabled': false},
'data':[70.00, 70.00, 70.00, 70.00, 70.00, 70.00, 70.00]}
]
}

Related

Flutter : Lists map combine

I made three lists, the first for free servers, the second for paid servers, and the third list includes both together.
The problem is that when he adds the lists in the third list, he adds them in order
In other words, he adds the whole first list above and the second list below
I want a way to combine the two lists and arrange them according to name, number, or any other thing. The important thing is that they are not arranged according to the same list (the first is above and the second is below)
You can use sort method on 'allservs'. Here is a working sample that sorts combined list based on 'cnumber':
var servers = List.from([
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 7,
'isvip': false,
},
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 2,
'isvip': false,
},
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 1,
'isvip': false,
},
]);
var newServers = List.from([
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 7,
'isvip': false,
},
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 12,
'isvip': false,
},
{
'name': 'Singapore',
'flag': 'assets/images/flags/singapore.png',
'cnumber': 3,
'isvip': false,
},
]);
get allServers => (List.from(newServers) + List.from(servers))
..sort((a, b) => (a['cnumber'] >= b['cnumber']) ? 1 : -1);
void main() {
print(allServers);
}
The simples way would be to do it like this:
var allServers = [...servers, ...newsServers ];
For Example, you can see this sample in DartPad:
image
which would result in outputing:
[{name: Singapore}, {name1: Singapore1}]

Mapbox Changing Polygone Color based users area showed

I'm currently building map using Mapbox GL. On this polygone there is polygone that are color based on 1 metric.
The metric range is between 1 to 25.
I have only 12 color panel.
ColorPannel
The goals would be to
Retrieve to top left, top right, bottom left and bottom right of the users map screen.
Get all the polygone that fit into the area. (SQL request)
From all those polygone, I retrieve the metric MIN and MAX.
Create 12 range of value based of MIN and MAX.
How could I reload the color for each polygone showed on the map based on the 12 range of value that I received from the back-end. This reload of color need to be executed when the users stop moving the area.
Here is my sample of the code :
map.addLayer({
'id': 'terrain1-data',
'type': 'fill',
'source': 'level_hight',
'source-layer': 'sold_level_high-36rykl', 'maxzoom': zoomThresholdZoneHtM, 'paint': {
'fill-color': [
'interpolate',
['linear'],
["to-number",['get', 'MYMETRIC']],
0,
'#FFFFFF',
5,
'#008855',
6,
'#13be00',
7,
'#75e100',
8,
'#aee500',
9,
'#dfff00',
10,
'#fff831',
11,
'#ffe82f',
12,
'#ffd500',
13,
'#ffa51f',
14,
'#ff7b16',
15,
'#ff0a02',
16,
'#c80000'
],
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
0.8,
0.5
],
'fill-outline-color': '#000000',
}
});
Thanks in advance. Sorry I'm starting using Mapbox.
If my understanding is correct, you want to set the number dynamically in 'interpolate'. In the following case you want to change 0, 5, ... according to the data, light?
'fill-color': [
'interpolate',
['linear'],
["to-number",['get', 'MYMETRIC']],
0,
'#FFFFFF',
5,
Then, normally you will get the date from your server and there's a chance to calculate those numbers in JavaScript code. Then put the calculated number in 'interpolate' would work.
Here's a sample. The number is generated randomly,
map.on('load', function () {
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[[0, 0], [0, 1], [1, 1], [1, 0]]
]
},
'properties': {
'height': 10
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[[1, 1], [1, 2], [2, 2], [2, 1]]
]
},
'properties': {
'height': 20
}
},
]
}
});
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine',
'layout': {},
'paint': {
'fill-color': [
'interpolate',
['linear'],
['to-number', ['get', 'height']],
c(10),
'#000000',
c(10) + 10,
'#FFFFFF',
]
}
});
});
function c(n) {
return Math.round(Math.random() * n);
}

echarts - visualMap according to y axis

I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur

Google home device and dialogflow

I have a agent, using V1 dialog flow. Integrated with two Google home devices.
One Google home device is in Europe, one in India. Both the devices are configured ccount. The same account is used to deploy the webhook, deploy and dialogflow agent.
The firmware version is identical.
The agent works perfectly on simulator.
Now when talked on Google home:
Google device in India: When started inovkes, there is a certain pin number which is asked, even when pin is mentioned slowly, spaces are not considered in the dialog flow JSON request pin.original is without spaces, say pin is 12345, JSON request is 12345
Google device in Europe: When started inovkes, there is a certain pin number which is asked, even when pin is mentioned slowly, spaces are considered in the dialog flow JSON request pin.original is with spaces and gets trimmed.
say pin is 12345 but JSON request is 123,
Not sure why this is happening.
Any help, please?
Adding the dialog flow requests.........
DF JSON Request coming to backend from Google Home Device in India - Working Fine
{
data: {
'timestamp': '2018-06-15T17:42:38.261Z',
'id': 'e5acf434-4e03-4c14-b3d9-e8fc98555694',
'status': {
'errorType': 'success', 'code': 200
}
,
'sessionId': '1529084528066',
'originalRequest': {
'source': 'google', 'data': {
'user': {
'userId': '1529084528066', 'locale': 'en-US'
}
,
'surface': {
'capabilities': [{'name': 'actions.capability.MEDIA_RESPONSE_AUDIO'}, {'name': 'actions.capability.AUDIO_OUTPUT'}]
}
,
'isInSandbox': True, 'inputs': [{
'arguments': [{
'name': 'text',
'rawText': 'my pin is 23456',
'textValue': 'my pin is 23456'
}],
'intent': 'actions.intent.TEXT',
'rawInputs': [{'inputType': 'VOICE', 'query': 'my pin is 23456'}]
}], 'conversation': {
'conversationId': '1529084528066',
'conversationToken': '["0748bff2-90d8-4941-8f9f-cf59dd3d009c_id_dialog_context","actions_capability_audio_output","actions_capability_media_response_audio","auth_dialog_context","auth_dialog_params_pin","defaultwelcomeintent-followup","google_assistant_input_type_voice"]',
'type': 'ACTIVE'
}
}
,
'version': '2'
}
,
'lang': 'en-us',
'result': {
'speech': '',
'action': 'DefaultWelcomeIntent.DefaultWelcomeIntent-custom',
'actionIncomplete': False,
'parameters': {
'phone': '1234567890', 'pin': '23456'
}
,
'fulfillment': {
'speech': '', 'messages': [{'speech': '', 'type': 0}]
}
,
'source': 'agent',
'contexts': [{
'name': 'google_assistant_input_type_voice',
'parameters': {
'phone': '1234567890',
'pin': '23456',
'pin.original': '23456',
'phone.original': '12345 67890'
},
'lifespan': 0
}, {
'name': 'actions_capability_audio_output',
'parameters': {
'phone': '1234567890',
'pin': '23456',
'pin.original': '23456',
'phone.original': '12345 67890'
},
'lifespan': 0
}, {
'name': 'auth',
'parameters': {
'phone': '1234567890',
'pin': '23456',
'pin.original': '23456',
'phone.original': '12345 67890'
},
'lifespan': 5
}, {
'name': 'defaultwelcomeintent-followup',
'parameters': {
'phone': '1234567890',
'pin': '23456',
'pin.original': '23456',
'phone.original': '12345 67890'
},
'lifespan': 1
}, {
'name': 'actions_capability_media_response_audio',
'parameters': {
'phone': '1234567890',
'pin': '23456',
'pin.original': '23456',
'phone.original': '12345 67890'
},
'lifespan': 0
}],
'resolvedQuery': 'my pin is 23456',
'score': 1.0,
'metadata': {
'matchedParameters': [{
'prompts': [{'value': 'Please tell us your pin', 'lang': 'en'}],
'required': True,
'name': 'pin',
'value': '$pin',
'dataType': '#sys.phone-number',
'isList': False
}],
'webhookUsed': 'true',
'intentId': '0748bff2-90d8-4941-8f9f-cf59dd3d009c',
'nluResponseTime': 296,
'intentName': 'auth',
'webhookForSlotFillingUsed': 'false',
'isResponseToSlotfilling': False
}
}
}
}
DF JSON Request coming to backend from Google Home Device in Europe - See the pin number issue,
{
data: {
'timestamp': '2018-06-15T13:19:06.014Z',
'id': 'ca0ebb47-8bf1-478b-9c87-c704e0114cf9',
'status': {'errorType': 'success', 'code': 200},
'sessionId': '1529068715507',
'originalRequest': {
'source': 'google',
'data': {
'user': {'userId': '1529068715507', 'locale': 'en-US'},
'surface': {'capabilities': [{'name': 'actions.capability.AUDIO_OUTPUT'}, {'name': 'actions.capability.MEDIA_RESPONSE_AUDIO'}]},
'isInSandbox': True,
'inputs': [{
'arguments': [{
'name': 'text',
'rawText': 'my pin is 2 3 4 5 6',
'textValue': 'my pin is 2 3 4 5 6'
}],
'intent': 'actions.intent.TEXT',
'rawInputs': [{'inputType': 'VOICE', 'query': 'my pin is 2 3 4 5 6'}]
}],
'conversation': {
'conversationId': '1529068715507',
'conversationToken': '["0748bff2-90d8-4941-8f9f-cf59dd3d009c_id_dialog_context","actions_capability_audio_output","actions_capability_media_response_audio","auth_dialog_context","auth_dialog_params_pin","defaultwelcomeintent-followup","google_assistant_input_type_voice"]',
'type': 'ACTIVE'
}
},
'version': '2'
},
'lang': 'en-us',
'result': {
'speech': '',
'action': 'DefaultWelcomeIntent.DefaultWelcomeIntent-custom',
'actionIncomplete': False,
'parameters': {'phone': '1234567890', 'pin': '234'},
'fulfillment': {'speech': '', 'messages': [{'speech': '', 'type': 0}]},
'source': 'agent',
'contexts': [{
'name': 'google_assistant_input_type_voice',
'parameters': {
'phone': '1234567890',
'pin': '234',
'pin.original': '2 3 4',
'phone.original': '123-456-7890'
},
'lifespan': 0
}, {
'name': 'actions_capability_audio_output',
'parameters': {
'phone': '1234567890',
'pin': '234',
'pin.original': '2 3 4',
'phone.original': '123-456-7890'
},
'lifespan': 0
}, {
'name': 'auth',
'parameters': {
'phone': '1234567890',
'pin': '234',
'pin.original': '2 3 4',
'phone.original': '123-456-7890'
},
'lifespan': 5
}, {
'name': 'actions_capability_media_response_audio',
'parameters': {
'phone': '1234567890',
'pin': '234',
'pin.original': '2 3 4',
'phone.original': '123-456-7890'
},
'lifespan': 0
}, {
'name': 'defaultwelcomeintent-followup',
'parameters': {
'phone': '1234567890',
'pin': '234',
'pin.original': '2 3 4',
'phone.original': '123-456-7890'
},
'lifespan': 1
}],
'resolvedQuery': 'my pin is 2 3 4 5 6',
'score': 1.0,
'metadata': {
'matchedParameters': [{
'prompts': [{
'value': 'Please tell us your pin',
'lang': 'en'
}],
'required': True,
'name': 'pin',
'value': '$pin',
'dataType': '#sys.phone-number',
'isList': False
}],
'webhookUsed': 'true',
'intentId': '0748bff2-90d8-4941-8f9f-cf59dd3d009c',
'nluResponseTime': 356,
'intentName': 'auth',
'webhookForSlotFillingUsed': 'false',
'isResponseToSlotfilling': False
}
}
}
}
Even though your locale is the same, your location is different.
I guess, that this influences the interpretation of #sys.phone-number.
So if you would use another dataType (e.g. #sys.number-sequence), I think it would work.
You could probably try this by changing your location in the Google Actions Simulator.
(Training diverse number sequences seems to improve the results.)

Adding labels to google scatter charts

I am using google charts API to draw scatter, is there a way to label each node in the scatter diagram. I guess it only uses the numeric values.....Any other tools I can use instead.
Example:
Name Age Response
Allen 12 40
Tom 16 45
Sim 17 60
X and y axis will be age and response respectively, but each node on the graph can I label as Allen, Tom, Sim
I was having same issue to plot labels for points on chart itself.
Google chart have solved this problem now. You can add one more property as annotation. By which you can add labels.
See how it looks like. Generally I do annotation in number and then explain what those number are about.
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', {role: 'annotation'}],
[ 8, 12, 'Point 1'],
[ 1, 5.5, 'Point 2'],
[ 11, 14, 'Point 3'],
[ 4, 5, 'Point 4'],
[ 3, 3.5, 'Point 5'],
[ 6.5, 7, 'Point 6']
]);
You can label the points in a Google ScatterChart by adding a tooltip. Tooltips show up when you mouseover a data point.
The code for your data table should look something like this:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}]}
]
},
0.6
)
When you mouseover the points, the name will show up.
Link to Tooltips:
https://developers.google.com/chart/interactive/docs/roles#tooltiprole
Link to DataTable class (for formatting data):
https://developers.google.com/chart/interactive/docs/reference#DataTable
NOTE: if you're trying to plot multiple data series, you have to specify a tooltip for each one. For example, if you add a separate data series for Average Response, the code would change to:
var dt = new google.visualization.DataTable(
{
cols: [{id: 'A', label: 'Age', type: 'number'},
{id: 'B', label: 'Response', type: 'number'},
{id: 'C', label: 'Name', type:'tooltip', p:{role:'tooltip'}},
{id: 'D', label: 'AvgResp', type: 'number'},
{id: 'E', label: 'Category', type:'tooltip', p:{role:'tooltip'}}
],
rows: [{c:[{v: 12}, {v: 40}, {v:'Allen'}, {v:null}, {v:null}]},
{c:[{v: 16}, {v: 45}, {v:'Tom'}, {v:null}, {v:null}]},
{c:[{v: 17}, {v: 60}, {v:'Sim'}, {v:null}, {v:null}]},
{c:[{v: 12}, {v: null}, {v:null}, {v: 35}, {v:'Avg. 12yo'}]},
{c:[{v: 16}, {v: null}, {v:null}, {v: 48}, {v:'Avg. 16yo'}]},
{c:[{v: 17}, {v: null}, {v:null}, {v: 52}, {v:'Avg. 17yo'}]}
]
},
0.6
)
To do it using the visualization API, just use a cell_object (https://google-developers.appspot.com/chart/interactive/docs/reference#cell_object). The google API playground was useful for me, might be for you: https://code.google.com/apis/ajax/playground
Here's an example of some code:
var data = google.visualization.arrayToDataTable([
['Age','Response'],
[ {v:12, f: 'Allen'}, 40],
[ {v:16, f: 'Tom'}, 45],
[ {v:17, f: 'Sim'}, 60]
]);
Hope that helps!
https://developers.google.com/chart/image/docs/gallery/scatter_charts#chart_types
This page documents coloring the plots and adding a legend.
With Google charts you can't, short of using the legend and cross referencing. I don't know of any scatter chart creator that will label the individual plots.