jQuery MapSvg binding data to regions parameter - javascript

In my MVC application, I am trying to create a SVG Map with data that comes from a database. Using jQuery, I call an action in the controller which returns data in the format that is expected in the MapSvg region's parameter.
The format that is expected goes as follows:
regions : {
'Yemen': {disabled: true},
'USA': {tooltip: 'USA: Click to go to Google.com', attr: {fill: '#ff0000', href: 'http://google.com', 'cursor': 'help'}}},
'France': {tooltip: 'This is France!', attr: {'cursor': 'help'}},
'Kazakhstan': {tooltip: 'Kazakhstan - the ninth largest country in the world.'}
},
In my controller, I have an action that will be called in the view by a jQuery ajax request
public ActionResult GetCountries()
{
List<ScratchMap> allitems = this.Worker.GetAllItems();
var allItemsAsArray = allitems.Select(x => string.Format("'{0}': {{ tooltip: 'Test', attr: {{ fill: '{1}' }} }}", x.PluginCountryName, x.Color)).ToArray();
return Json(allItemsAsArray, JsonRequestBehavior.AllowGet);
}
In the View, the following code is executed after the jQuery plugins and the MapSvg plugins are loaded:
$.get('/ScratchMap/GetCountries', {},
function (data) {
var regionsData = '{' + data + '}';
$('#map').mapSvg(
{
source: '#Url.Content("~/Content/Maps/world_high.svg")',
loadingText: 'Loading map...',
tooltipsMode: 'names',
responsive: true,
zoom: true,
pan: true,
zoomButtons: {
'show': true,
'location': 'right'
},
regions: regionsData
});
}), 'json';
When the page is rendered, the map does not fill any countries that were retrieved from the database. However, when I copy and assign the output of the regionsData variable directly to the regions parameter, the map loads everything correctly.
The following article teaches me that this could have something to do with the input data type. However, if I parse the regionsData to JSON, it tells me it is in a wrong format. But the given example by the creators of MapSvg is also in a wrong format.
Does anybody have any ideas for a workaround?
Thanks.

The problem is that even if the regions variable is edited the map plugin doesnt watch the change in its object contents so you must either wait till the data is returned before graphing the contents. Or re-graph with the method below.
If you wish to wait to graph till the data has been returned from your database call you can use a promise to delay the graphing of the object. Also important to know is the format in which the OPTS variables needs to have here is a sample.
var OPTS = {
source: sourcepath, // Path to SVG map
colors: {background: '#fff',base: '#0066FF', stroke: '#fff', selected: 10, disabled: '#ff0000'},
tooltipsMode: 'combined',
zoom: true,
pan: true,
responsive: true,
width: 1170,
zoomLimit: [0,100],
onClick: function (e, m) {
//do something here on each map click
},
regions:{
id_of_svg_path(the actual region you want to add data for):{
disabled:true,/*or whatever you need*/
tooltip:'<h4>Something to say</h4>'
}
}
}
In-order to re-graph I used the return object:
OPTS are just your specific chart options.
A variable javascript object that contains a regions variable.
var chartObj = $('#chart_container').mapSvg(OPTS);
chartObj.destroy();
This call will destroy then you re-graph it with OPTS that you have passed in.
Once you have destroyed it and passed in the new data you can just call.
var chartObj = $('#chart_container').mapSvg(OPTS);
Re-graphing it with the new data.

It turns out that it was an issue with the way I created the javascript output. The answer to this question can be found in this article.

Related

Fullcalendar - extraParams in events and eventsources not being read from element.value

The Setup
I'm using Fullcalendar v4, and I'm having some trouble with extraParams and sending them to server via AJAX.
What I'm trying to do (and failing) is to use this:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
eventSources: [{
url: 'ajax/fc.php?dropdown='+$("#dropdown").val(),
method: 'POST',
cache: false,
extraParams: {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
},
}],
......
});
Values for month, dropdown, person, phone are picked up from a form.
The Problem
Dumping both the GET and the POST variables (sever-side), just to check what I've received gives back 0 / empty strings for everything other than the month parameter - it's shown correctly.
The GET parameter is there just for testing purposes, and so is document.getElementById bit - I wanted to see if anything would show up if I used them (nothing did).
The issue persists even if I change the code to use events instead of eventSources.
Upon further experimenting, it seems that the calendar is affected by the element values present upon its initialization - if I hardcode the values for dropdown, person, and other inputs / select elements, they, and only they get sent (any change in values is ignored). The same thing happens if I just set the initial value (ie <input id="person" name="person" value="Joe">).
The question
How can I force the calendar (short of destroying and recreating it) to actually notice changes in the input values I want to use as extraParams?
If I'm misunderstanding the use of extraParams, what are my alternatives? I need to be able to send various data to the server, in order to get a specific set of events.
Figured it out in the meantime, thanks to this SO answer. Since the parameters are dynamic, they need to be sent as stated in the documentation (part Dynamic extraParams parameter):
var calendar = new Calendar(calendarEl, {
events: {
url: '/myfeed.php',
extraParams: function() { // a function that returns an object
return {
dynamic_value: Math.random()
};
}
}
});
Which, in my case, would become:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction','dayGrid'],
defaultView: 'dayGridMonth',
selectable: true,
selectMirror:true,
.......
event: {
url: 'ajax/fc.php',
method: 'POST',
cache: false,
extraParams: function() {
return {
month: $("#monthPicker").val(),
dropdown: $("#dropdown").val(),
person: $("#person").val(),
phone: document.getElementById("phone").value,
testtext: 'hardcoded text'
}
},
},
......
});

How to get data from xml by using URL

I have a grid where I am loading the data from the data store. Bu using some url. Code is something like that.
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
method: 'GET',
url: SomeURL
}),
remoteSort:true,
method: 'GET',
baseParams: {start: 0, limit: 25},
sortInfo:{
field: 'UPDATEDON',
direction: 'DESC'
},
reader: new Ext.data.XmlReader({
totalProperty:'#Total',
record: 'ITEM'
}, [ {name:'name',type:'string', mapping:'#name',SortType:"asUCString"},
{name:'value', mapping:'#value'}
]),
grid:this,
listener : {
load:function(){
}
}
This is loading correctly. No problem in grid. I need to access grid data at some other place in my code. so for that I am call
`var xyz = new MyGrid({val:1,newval:2});`
val and newVal are the two para for grid. But I am not getting store and store value here. Is there anyway I can get store here or get the xml value by using the same url again.
You can set in your store autoLoad: true - if it is already binded/set with this new Grid.
Or just say xyz.store.reload();
Reloads the store using the last options passed to the load method.
You can get the data form xyz.store.
How to get the information from a store depends on you and what you have there stored. You can use 'find', 'findBy', 'each' and so on (senscha doc extjs V3.4)

ECharts - Set options to externally loaded arrays

So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.
The jSON that is returned is this
When I am trying to set the data for xAxis, I am doing it as shown
xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}
}],
However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined
If I do not use my method of trying to load the external data and I predefine the data like so
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]
Then there are no errors and it works just fine
Can anyone see the problem?
Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.
If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *
Line + Bar
Scatter + Candlestick
Pie + Radar
Helpful tip
If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,
Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
Removing commas (,) from objects.
Changing Semi-colon's (;) into Colon's (:) or even removing them.
complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});

setActiveItem() passing data sencha touch

I would like to send data with setActiveItem() when doing view change from this store:
Ext.define('SkSe.store.Places',{
extend:'Ext.data.Store',
config:{
autoDestroy: true,
model:'SkSe.model.Places',
//hardcoded data
data: [
{
name: 'Caffe Bar XS', //naziv objekta
icon: 'Icon.png', //tu bi trebala ići ikona kategorije kojoj pripada
stamps: 'stamps1' //broj "stampova" koje je korisnik prikupio
},
{
name: 'Caffe Bar Mali medo',
icon: 'Icon.png',
stamps: 'stamps2'
},
{
name: 'Caffe Bar VIP',
icon: 'Icon.png',
stamps: 'stamps3'
}
]
//dynamic data (Matija)
//remember to change the icon path in "Akcije.js -> itemTpl"
/*proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
//name of array where the results are stored
rootProperty:'results'
}
}*/
}
});
This is my my details controller that should get data from places store:
Ext.define('SkSe.controller.Details', {
extend: 'Ext.app.Controller',
config: {
refs: {
placesContainer:'placesContainer',
Details: 'details'
},
control: {
//get me the list inside the places which is inside placesContainer
'placesContainer places list':{
itemsingletap:'onItemTap'
//itemtap:'onItemTap'
}
}
},
onItemTap:function(list,index,target,record){
console.log('omg');
var addcontact= Ext.create('SkSe.view.Details',
{
xtype:'details',
title:record.data.name,
data:record.data
});
var panelsArray = Ext.ComponentQuery.query('details');
console.log(panelsArray);
Ext.Viewport.add(addcontact);
addcontact.update(record.data.name);
Ext.Viewport.setActiveItem(addcontact);
console.log(record.data.name);
}
});
I would like to send name record from the places.js model above. I heard that you can't pass data with setActiveItem but should create a function that updates view(No I can't use pop and push here).
I'm not very familiar with sencha touch syntax and I'm not sure what functions to use to do that, clearly update function is not that.
I switched up your logic slightly but have provided a working example of what I think you are trying to do.
SenchaFiddle is a little different from what I get running on my machine but you should be able to get the idea.
The initial list loaded gets the data from your store, and on itemtap will push a new view onto the viewport.
You will need to add a navigation button to get back to the list from view.View as well as a better layout for the details. I would suggest nested containers or panels with custom styles to get the details just right. Alternatively you can just drop a full html snippet in there with all the data laid out like you want.
Would be happy to help more.
Fiddle: http://www.senchafiddle.com/#XQNA8

Saving the whole EditorGrid with a single Ajax request

I would like to save an ExtJS (3.3.1) editorgrid with a single Ajax request.
I've created an editorgrid, based on an ArrayStore.
var store = new Ext.data.ArrayStore({
data: arrayData,
fields: [ 'id', 'qty', 'idService', 'idSubscription',
'description', 'vat', 'amount' ]
});
[...]
var grid = {
xtype: 'editorgrid',
store: store,
view: gridView,
colModel: colModel,
selModel: selModel,
stripeRows: true,
tbar: tbar,
autoHeight: true,
width: 872,
clicksToEdit: 1
};
I've created a Save button with the following handler:
app.inv.saveButtonHandler = function () {
var myForm = Ext.getCmp("formHeader").getForm();
if (!myForm.isValid()) {
Ext.MessageBox.alert('Form Not Submitted',
'Please complete the form and try again.');
return;
}
myForm.el.mask('Please wait', 'x-mask-loading');
Ext.Ajax.request({
params: {
idCustomer: myForm.findField("idCustomer").getValue(),
issueDate: myForm.findField("issueDate").getValue(),
documentType: myForm.findField("documentType").getValue(),
documentNumber: myForm.findField("documentNumber").getValue()
},
url: 'save-sales-document-action',
method: 'POST',
success: function (response, request) {
myForm.el.unmask();
Ext.MessageBox.alert('Success', 'Returned: ' + response.responseText);
},
failure: function (response, request) {
myForm.el.unmask();
Ext.MessageBox.alert('Failed', 'Returned: ' + response.responseText);
}
});
};
In other words, I can send form elements with a simple value, but I don't know how to send the whole data grid. I would like to send the whole data grid with a single Ajax request.
I've already used before the cell-by-cell saving method, but in this case I would prefer to save the whole grid in one go. I don't need help for the server-side part, that I will do in Java, only for the client-side JavaScript.
Can someone help? Thanks!
After a night sleep and still no answers, I made further tries and I can answer my own question. I will leave the question open anyway, in case someone knows a better way.
To solve my problem, I added the property "storeId: 'gridStore'" to the ArrayStore, so I could locate the store later with Ext.StoreMgr.lookup(), then, at saving time, I proceed to re-build an Array record by record in the following way:
var gridData = new Array();
Ext.storeMgr.lookup('gridStore').each(function (record) {
gridData.push(record.data);
});
The essential part is that I don't get the whole Record, but only the data field of it.
After I've an array with the data, the easy part is add it to the params of Ajax.request:
params: {
...
gridData: Ext.encode(gridData)
},
This finally works. All the data is encoded in a single field. Of course on the server it will have to be decoded.

Categories