I would like to change the valueAxes title from a hardcoded string to a value from a JSON property via dataprovider.
thanks
You can use the init event to set your valueAxes title then call validateNow(true) (or validateData()). Here's a contrived example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"valueAxisTitle": "Number of visits", //can be whatever property you want
"country": "USA",
"visits": 2025
}, // ...
]
// ...
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.valueAxes[0].title = e.chart.dataProvider[0].valueAxisTitle;
e.chart.validateNow(true);
}
}]
});
Demo
Related
{
"data": [
{
"id": "52fb62dc-a446-4fbb-9c7e-e75d8c90f6d9",
"name": "abx",
"address": {
"address1": "New Address 1",
"address2": "New Address 2",
"Pin":"800001"
}
},
{
"id": "52fb62dc-a446-4fbb-9c7e-e75d8c90f6d9",
"name": "xyz",
"address": {
"address1": "New Address 1",
"address2": "New Address 2",
"Pin":"800002"
}
},
{
"id": "52fb62dc-a446-4fbb-9c7e-e75d8c90f6d9",
"name": "ijk",
"address": {
"address1": "New Address 1",
"address2": "New Address 2",
"Pin":"800003"
}
}
]
}
Out put json should be like this
[
{
"name": "abx",
"Pin": "800001"
},
{
"name": "xyz",
"Pin": "800002"
},
{
"name": "ijk",
"Pin": "800003"
}
]
From the input json, I want to extract all values using
jpath
Name Path = "data.name"
Pin Path = "data.address.pin"
I need all values, I will create an output json.
If both json and jpath are dynamic then try using the below code, here i have used the same input json and output json in my code block.
$(document).ready(function () {
var outputArr = [];
//Assume that these jpaths are dynamic.
var name = "data.name", pin = "data.address.Pin";
//Assigned input json object to sampleData variable.
$.each(sampleData.data, function (item, value) {
//Replacing 'data.' with empty('') as we are looping through data array.
var nameValue = extractValue(value, name.replace('data.', ''));
var pinValue = extractValue(value, pin.replace('data.', ''));
outputArr.push({ 'name': nameValue, 'Pin': pinValue });
});
//logging into console for testing purpose.
console.log(outputArr);
--to do with outputArr --
//Recursive function that returns the required value from the json
function extractValue(value, jPathKey) {
if (jPathKey.split(".").length > 1) {
//Here use of replace function is must as we need to get the object with the mentioned jPathKey to loop further.
return extractValue(value[jPathKey.replace('.', '$').split('$')[0]], jPathKey.replace('.', '$').split('$')[1])
}
else {
return value[jPathKey];
}
}
});
Note: Here only thing that need to take care is the case of jpath should match with case of input json
I have a JSON data in the format
[{
"Heading1": [{
"questionID": "q1",
"questionTitle": "Question 1",
"question": "This is question1",
"status": 0,
"files": [],
"uploadType": "none"
}, {
"questionID": "q2",
"questionTitle": "Question 2",
"question": "This is question2",
"status": 0,
"files": [],
"uploadType": "none"
}]
}, {
"Heading2": [{
"questionID": "q3",
"questionTitle": "Question 11",
"question": "This is a question11",
"status": 0,
"files": [],
"uploadType": "none"
}]
}, {
"Heading3": [{
"questionID": "q4",
"questionTitle": "Question 1",
"question": "This is a question",
"status": 0,
"files": [],
"uploadType": "none"
}]
}]
I'm trying to get all the titles in a format like [{"Title":"Heading1"},{"Title":"Heading2"},{"Title":"Heading3"}]
How should I go about it?
First, if you really have JSON (e.g., your starting point is a string, such as from an ajax response), you parse it via JSON.parse to get an array of objects. Then you loop the array and get the only key from each of those top-level objects via Object.keys(x)[0] and map that to an array of objects in the form you want:
const json = '[{"Heading1":[{"questionID":"q1","questionTitle":"Question 1","question":"This is question1","status":0,"files":[],"uploadType":"none"},{"questionID":"q2","questionTitle":"Question 2","question":"This is question2","status":0,"files":[],"uploadType":"none"}]},{"Heading2":[{"questionID":"q3","questionTitle":"Question 11","question":"This is a question11","status":0,"files":[],"uploadType":"none"}]},{"Heading3":[{"questionID":"q4","questionTitle":"Question 1","question":"This is a question","status":0,"files":[],"uploadType":"none"}]}]';
const parsed = JSON.parse(json);
const result = parsed.map(entry => {
return {Title: Object.keys(entry)[0]};
});
console.log(result);
The map callback can be a concise arrow function, but I thought using the verbose form above would be clearer. The concise form would be:
const result = parsed.map(entry => ({Title: Object.keys(entry)[0]}));
Note that using Object.keys in this way is only reliable if the objects really have just one property, as in your question. If they have more than one property, the order the properties are listed in the array from Object.keys is not defined (even in ES2015+, where properties do have an order — Object.keys is not required to follow that order [although it does on every modern engine I've tested]).
how can I bind my local JSON model to my MultiComboBox.
The XML code for the combobox is looking as followed:
<MultiComboBox id="multiBox" selectionFinish="onBoxFinish"/>
The model looks like this:
var exampleData = {
"data": [{
"name": "Example1",
"value": "16.505406"
},
{
"name": "Example2",
"value": "6.65465"
},
{
"name": "Example3",
"value": "89.56456"
}]
};
I want to display the 3 names in the ComboBox.
Can someone help me with this?
Thanks.
Firstly, instantiate a JSONModel with your data. Secondly, set the JSONModel to your view. Thirdly, bind the model to your MultiComboBox.
var oData = {
"data": [
{
"name": "Example1",
"value": "16.505406"
},
{
"name": "Example2",
"value": "6.65465"
},
{
"name": "Example3",
"value": "89.56456"
}
]
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel);
<MultiComboBox
selectionFinish="onBoxFinish"
items="{/data}">
<core:Item
key="{name}"
text="{value}">
</core:Item>
</MultiComboBox>
I am using polymer paper-tree element in my code.Its displays the tree perfectly with static data,however when I try to add an item dynamically it doesn't work. I am attaching a screenshot here.enter image description here
//Array
this.itemArray = {"name": "Project",
"icon": "theaters",
"open": true,
"children": [{
"name": "Quotes",
"icon": "theaters",
"open": true,
"children": [{
"name": "Breaking Bad",
"icon": "theaters"
}]
}, {
"name": "Templates",
"icon": "theaters",
"open": true,
"children": [{
"name": "Breaking Bad",
"icon": "theaters"
}, {
"name": "Game of Thrones",
"icon": "theaters"
}]
}]
}
//Js code which accepts value from a text box and adds it to the array.
this.$.additem.addEventListener("click", function(){
enter code herevar data = self.$.txtData.value;
self.itemArray.children[1].children.push(
{'name':data,
'icon':'theaters'});
self.addData(self.itemArray,data);
self.$.txtData.value = " ";
});
// addData function
addData:function(itemsarr){
console.log("calling items array function",this.tree);
var tempArr = [];
tempArr = itemsarr;
if(this.tree){
this.$.temp.removeChild(this.tree);
//tempArr = itemsarr; //= this.itemArray2;
}
this.tree = document.createElement('paper-tree-node');
this.tree.setAttribute('id','treemenu');
this.$.temp.appendChild(this.tree);
this.tree.data = tempArr;
console.log(tempArr);
}
Polymer paper-tree have a data property. You just need to update it.
Help link: https://github.com/vpusher/paper-tree/blob/master/paper-tree.html
I am trying to hook select2 when an element has class "select2picker" i am also customising if the source of the dropdown list is an array. My code below
$('.select2picker').each(function() {
var settings = {};
if ($(this).attr('data-json')) {
var jsonValue = JSON.parse($(this).attr('data-json')).val());
settings = {
placeholder: $(this).attr('data-placeholder'),
minimumInputLength: $(this).attr('data-minimumInputLength'),
allowClear: true,
data: jsonValue
}
}
$(this).select2(settings);
});
but the result is horrible it fails to hook all the select2 dropdownlist
but when I comment out the data property, the output shows perfect (but the data binding goes missing)
My array looks like the following
[ { "id": "2015-0152", "text": "2015-0152" }, { "id": "2015-0153", "text": "2015-0153" }, { "id": "2016-0001", "text": "2016-0001" }, { "id": "2016-0002", "text": "2016-0002" }, { "id": "2016-0003", "text": "2016-0003" }, { "id": "2016-0004", "text": "2016-0004" }, { "id": "2016-0005", "text": "2016-0005" }, { "id": "2016-0006", "text": "2016-0006" }, { "id": "2016-0007", "text": "2016-0007" }, { ... }, { "id": "2015-0100", "text": "2015-0100" }, { "id": "2015-0101", "text": "2015-0101" }, { "id": "2015-0080", "text": "2015-0080" }, { "id": "2015-0081", "text": "2015-0081" }, { "id": "2015-0090", "text": "2015-0090" }, { "id": "2015-0102", "text": "2015-0102" }, { "id": "2015-0112", "text": "2015-0112" }, { "id": "2015-0128", "text": "2015-0128" }, { "id": "2015-0136", "text": "2015-0136" } ]
I am really confused about what is going wrong. Any idea?
Select2 version: 3.4.8
This line gives an error: var jsonValue = JSON.parse($(this).attr('data-json')).val());
Should be: var jsonValue = JSON.parse($(this).attr('data-json'));.
Also this line in your question:
i am also customising if the source of the dropdown list is an array
Indicates to me that it might also not be an array. In that cause you should check if it is an array before you pass the data to select2.
EDITED: Another thing that came to my mind was the following.
If you're using data properties for the placeholder I don't think you need to pass the values of those properties to select2 a second time like you do here
placeholder: $(this).attr('data-placeholder'),
minimumInputLength: $(this).attr('data-minimumInputLength'),
Might be that you need to pick one of the two (either pass it along in your settings, or use an attribute). As select2 looks at the data attributes to get a value.
I checked if the above was correct turns out it isn't. It works fine in this fiddle: https://jsfiddle.net/wL7oxbpv/
I think there is something wrong with your array data. Please check that.