HighMap chart with lat long data - highmaps

I am looking at the highmap from highcharts for angular 2 and looking at this demo:
http://plnkr.co/edit/AmDfKwhRhshFn3CPprkk?p=preview
Here, the series is like:
series : [{
name: 'UTC',
data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
return { code: code };
})
}, {
name: 'UTC + 1',
data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU','SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
return { code: code };
})
}, {
name: 'UTC + 2',
data: ['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'].map(function (code) {
return { code: code };
})
}, {
name: 'UTC + 3',
data: ['RU'].map(function (code) {
return { code: code };
})
}]
However, I want to provide coordindates (lat long) to plot the points. Is it possible to do this? If yes, how? Please note that I am looking for a solution specific to Angular 2

If you can get your data in terms of latitudes and longitudes, it can be plotted on the map using the library proj4js. This library has to be included to work internally with Highmaps, need not do anything explicitly.
Your data has to be converted to latitude/longitude like you see here : http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/mappoint-latlon/
Check my other angular post here for a full working example in angular2+ versions: Highmaps chart is empty in Angular 5

Related

Question about colorBy after data sorting

In this example with universalTransition turned on, after the pie chart of colorBy:'data' is sorted, it is inconsistent with the corresponding relationship between labels and colors in the bar chart, how to make their colors consistent.
Makepie will be out of service on February 15, you can run follow code on ECharts examples editor.
const dataset = {
dimensions: ['name', 'score'],
source: [
['Hannah Krause', 314],
['Zhao Qian', 351],
]
};
const pieOption = {
// dataset: [dataset],
// 顺序排序数据
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),
series: [
{
type: 'pie',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
radius: [0, '50%'],
universalTransition: true,
animationDurationUpdate: 1000,
// 取排序后的数据
datasetIndex: 1,
}
]
};
const barOption = {
dataset: [dataset],
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
type: 'bar',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
// 每个数据都是用不同的颜色
colorBy: 'data',
encode: { x: 'name', y: 'score' },
universalTransition: true,
animationDurationUpdate: 1000
}
]
};
option = barOption;
setInterval(() => {
option = option === pieOption ? barOption : pieOption;
// 使用 notMerge 的形式可以移除坐标轴
myChart.setOption(option, true);
}, 2000);
Your dataset order by 'desc' on pie chart.
but it's not used on bar chart.
Maybe your two charts should be sorted in the same order
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),

ExtJS 7.2 - Loading record into a form with chained comboboxes and forceSelection:true does not load all values

I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});

ag-Grid, try to make Tree Demo work using own data

I like the ag-Grid because it's less buggy, fast and works with many frameworks.
So I tried the Tree Data, no need to tell the link between parents and children, simply lay down the data in structure, specify some options, Bingo! But, when I plug in my API, it tells me
"TypeError: rowData is undefined"
from inside of ag-grid.js even though Watch clearly shows it has the array. There are some answered Question here regarding customization with internal api. Mine is not.
I then use the official demo as a base, set up a Fiddler to grab the raw data in JSON replace demo data to make it hardcoded for a test to determine if it's problem with own API or something else. Here is the Plunker. Note it's totally based on the official javaScript Demo of Tree Data, Tree Data Example, the first one.
In case you don't want to see Plunker, here is my .js:
var columnDefs = [
{headerName: "Client", field: "Client", cellRenderer: 'group'},
{headerName: "Program", field: "Program"}
/*{headerName: "Group", field: "xgroup", cellRenderer: 'group'}, // cellRenderer: 'group'}, -- this "group" is one of the default value option for built-in cellRenderer function, not field.
//{headerName: "Athlete", field: "athlete"},
//{headerName: "Year", field: "year"},
{headerName: "Country", field: "country"}
*/
];
var myData = [
{
'Client': 'Goodle',
'Program': 'no grid',
'kids': []
},
{
'Client': 'Facebrook',
'Program': 'grids',
'kids': [
{
'Client': 'Facebrook',
'Program': 'ag-Grid'
},
{
'Client': 'Facebrook',
'Program': 'ui-grid'
}
]
}
/*{xgroup: 'Group A',
participants: [
/*{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'},
{athlete: 'Michael Phelps', year: '2008', country: 'United States'}*/
/*]},
{xgroup: 'Group B', athlete: 'Sausage', year: 'Spaceman', country: 'Winklepicker',
participants: [
{athlete: 'Natalie Coughlin', year: '2008', country: 'United States'},
{athlete: 'Missy Franklin ', year: '2012', country: 'United States'},
{athlete: 'Ole Einar Qjorndalen', year: '2002', country: 'Norway'},
{athlete: 'Marit Bjorgen', year: '2010', country: 'Norway'},
{athlete: 'Ian Thorpe', year: '2000', country: 'Australia'}
]},
{xgroup: 'Group C',
participants: [
{athlete: 'Janica Kostelic', year: '2002', country: 'Crotia'},
{athlete: 'An Hyeon-Su', year: '2006', country: 'South Korea'}
]}*/
];
var gridOptions = {
columnDefs: columnDefs,
rowData: myData,
rowSelection: "single",
enableSorting: "true", unSortIcon: "true",
enableColResize: "true",
enableRangeSelection: "true",
suppressCellSelection: "false",
showToolPanel: "true",
supressCopyRowsToClipboard: true,
supressCellSelection: false,
getNodeChildDetails: getNodeChildDetails,
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
function getNodeChildDetails(rowItem) {
if (rowItem.Client) {
return {
group: true,
// open C be default
//expanded: rowItem.ClientName === 'Group C',
// provide ag-Grid with the children of this group
children: rowItem.kids,
// this is not used, however it is available to the cellRenderers,
// if you provide a custom cellRenderer, you might use it. it's more
// relavent if you are doing multi levels of groupings, not just one
// as in this example.
//field: 'group',
// the key is used by the default group cellRenderer
key: rowItem.Client
};
} else {
return null;
}
}
function onFilterChanged(value) {
gridOptions.api.setQuickFilter(value);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
HTML:
<html>
<head>
<!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
<script src="https://ag-grid.com/dist/ag-grid/ag-grid.js"></script>
<script src="script.js"></script>
</head>
<body>
<input placeholder="Filter..." type="text"
onpaste="onFilterChanged(this.value)"
oninput="onFilterChanged(this.value)"
onchange="onFilterChanged(this.value)"
onkeydown="onFilterChanged(this.value)"
onkeyup="onFilterChanged(this.value)"/>
<div id="myGrid" class="ag-fresh" style="height: 450px; margin-top: 4px;"></div>
</body>
</html>
Need some experts!
You need to alter getNodeChildDetails to have this:
function getNodeChildDetails(rowItem) {
if (rowItem.Client && rowItem.kids && rowItem.kids.length > 0) {
As you have it you're telling the grid that any item with Client is a parent node, but what you really mean in your data is any item with Client AND kids is a parent.
Remember that the grid can have multiple levels so a child can be a parent too.

Only single series is shown

I used an example from the demo on highcharts website, and the only modifications are:
changed map to world.js
Commented "allAreas" property
$(function () {
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
spacingBottom: 20
},
title : {
text : 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
//allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
mapData: Highcharts.maps['custom/world'],
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series : [{
name: 'UTC',
id: 'UTC',
data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 1',
data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 2',
data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 3',
data: $.map(['RU'], function (code) {
return { code: code };
})
}]
});
});
Code in JSFiddle
Why only single series is visible?
The line causing the issue is this: //allAreas: false.
This is the explanation and how to fix it (extract from the Highcharts support forum)
According to the API, setting allAreas to true will render all of
the areas so also the one without value (as null value). Another
option is the nullColor which by default is a shade of grey and sets
the color to be used by null values.
Therefore if you set allAreas to true, then each series will draw
all the areas and those with null values will be filled as grey (the
nullColor). Because the later series have a higher z-index these are
on top of the other series, resulting in a grey shape covering the
shapes beneath it.
If you want to set allAreas to true but still see through the
different series, you have to set the nullColor to transparent:
rgba(0,0,0,0)
Working JSFiddle here

Extjs 4, forms with checkboxes and loadRecord

In my Extjs4 application I have a grid and a form.
The user model:
Ext.define('TestApplication.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', useNull: true },
{ name: 'email', type: 'string'},
{ name: 'name', type: 'string'},
{ name: 'surname', type: 'string'}
],
hasMany: { model: 'Agency', name: 'agencies' },
});
And the Agency:
Ext.define('Magellano.model.Agency', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int', useNull: true},
{name: 'name', type: 'string'}
]
});
Then in my form I'm creating the checkboxes:
[...]
initComponent: function() {
var store = Ext.getStore('Agencies');
var checkbox_values = {xtype: 'checkboxfield', name: 'agencies[]'};
var checkboxes = []
store.each(function(record){
var checkbox = {xtype: 'checkboxfield', name: 'agency_ids',
boxLabel: record.get('name'), inputValue: record.get('id')};
checkbox.checked = true;
checkboxes.push(checkbox)
});
this.items = [{
title: 'User',
xtype: 'fieldset',
flex: 1,
margin: '0 5 0 0',
items: [{
{ xtype: 'textfield', name: 'email', fieldLabel: 'Email' },
{ xtype: 'textfield', name: 'name', fieldLabel: 'Nome' },
}, {
title: 'Agencies',
xtype: 'fieldset',
flex: 1,
items: checkboxes
}];
[...]
Everything works well for sending form I am receiving all the data and can save it into database.
When user clicks on the grid the record is loaded in the form with the standard:
form.loadRecord(record);
The problem is that the checkboxes are not checked. Are there any naming conventions for checkbox elements so Extjs can detect what to set? How can I setup the relations so the form will understand what to check? Or should I do everything by hand?
In your form, you can do something like this :
{
xtype: 'checkboxfield',
name: 'test',
boxLabel: 'Test',
inputValue: 'true',
uncheckedValue: 'false'
}
I believe you have to use someCheckbox.setValue(true) to check a checkbox dynamically, or to uncheck someCheckbox.setValue(false)