month wise dataset dynamically - javascript

I am trying to create month wise data array for my chart. Combining all the sales and purchase value of each month
It will be really helpful who can help me in getting my expected output. I have attached the fiddle which I tried with my expected output to create chart
If possible, guide me with some java script functions which can be useful to me
http://jsfiddle.net/qjsgy6a6/2/
var mainData = [
{
"date": "2017-01-03",
"month": "JAN",
"sales": "200",
"purchase": "1000"
},
{
"date": "2017-01-18",
"month": "JAN",
"sales": "800",
"purchase": "2500"
},
{
"date": "2017-01-22",
"month": "JAN",
"sales": "400",
"purchase": "2100"
},
{
"date": "2017-02-20",
"month": "FEB",
"sales": "40",
"purchase": "90"
},
{
"date": "2017-02-28",
"month": "FEB",
"sales": "970",
"purchase": "2100"
},
{
"date": "2017-02-29",
"month": "FEB",
"sales": "3300",
"purchase": "2900"
},
{
"date": "2017-03-20",
"month": "MAR",
"sales": "600",
"purchase": "900"
}
]
// Expected Output - how can I achieve this
{
"data": [
{
"data": [
{
"event": "sales",
"inventory": [
{
"value": "200" //Jan
},
{
"value": "40" //Feb
},
{
"value": "600" //Mar
}
]
},
{
"event": "purchase",
"inventory": [
{
"value": "1000"
},
{
"value": "90"
},
{
"value": "900"
}
]
}
]
},
{
"data": [
{
"event": "sales",
"inventory": [
{
"value": "800"
},
{
"value": "970"
}
]
},
{
"event": "purchase",
"inventory": [
{
"value": "2500"
},
{
"value": "2100"
}
]
}
]
},
{
"data": [
{
"event": "sales",
"inventory": [
{
"value": "400"
},
{
"value": "3300"
}
]
},
{
"event": "purchase",
"inventory": [
{
"value": "2100"
},
{
"value": "2900"
}
]
}
]
}
]
}


You could use this function:
function transformData(data) {
return {
data: data.reduce ( (acc, item) => {
let i = acc.months.get(item.month) || 0;
acc.data[i] = acc.data[i] || {
data: [{
event: "sales",
inventory: []
}, {
event: "purchase",
inventory: []
}]
};
acc.data[i].data[0].inventory.push({ value: item.sales });
acc.data[i].data[1].inventory.push({ value: item.purchase });
acc.months.set(item.month, i+1);
return acc;
}, { months: new Map, data: [] } ).data
};
}
// Input
var data = [
{
"date": "2017-01-03",
"month": "JAN",
"sales": "200",
"purchase": "1000"
},
{
"date": "2017-01-18",
"month": "JAN",
"sales": "800",
"purchase": "2500"
},
{
"date": "2017-01-22",
"month": "JAN",
"sales": "400",
"purchase": "2100"
},
{
"date": "2017-02-20",
"month": "FEB",
"sales": "40",
"purchase": "90"
},
{
"date": "2017-02-28",
"month": "FEB",
"sales": "970",
"purchase": "2100"
},
{
"date": "2017-02-29",
"month": "FEB",
"sales": "3300",
"purchase": "2900"
},
{
"date": "2017-03-20",
"month": "MAR",
"sales": "600",
"purchase": "900"
}
];
// Conversion
var result = transformData(data);
// Output
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Related

How to convert nested object to array of object in javascript? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a JSON response from the server, "IN01", "IN02" and "2021", "2022" these are dynamic object keys. I want to covert this structure to some other format. How to do with javascript?
{
"holidayCalendar": [
{
"IN01": [
{
"2021": [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"2022": [
{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
},
{
"month": "6",
"value": "1111101111110111111011111101111"
}
]
}
]
},
{
"IN02": [
{
"2021": [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"2022": [
{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
}
]
}
]
}
]
}
Here key can be any value instead of "IN01", "IN02" etc also "2021" ,
"2021"
I want to convert the above JSON data to below-mentioned format
{
"holidayCalendar" : [
{
"location" : "IN01",
"year" : "2021",
"holidays" : [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"location" : "IN01",
"year" : "2022",
"holidays" : [{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
},
{
"month": "6",
"value": "1111101111110111111011111101111"
}
]
},
{
"location" : "IN02",
"year" : "2021",
"holidays" : [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"location" : "IN02",
"year" : "2022",
"holidays" : [
{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
}
]
}
]
}
Really appreciated your help. Thank You !

You can easily achieve the result using flatMap, Object.entries
const obj = {
holidayCalendar: [
{
IN01: [
{
"2021": [
{
month: "1",
value: "0101111110111011011111101011110",
},
{
month: "2",
value: "1111110111111011111101111110",
},
{
month: "3",
value: "1111110111111011111101111110011",
},
],
},
{
"2022": [
{
month: "4",
value: "0011111101111110111111011011101",
},
{
month: "5",
value: "1111101111110111111011111101",
},
{
month: "6",
value: "1111101111110111111011111101111",
},
],
},
],
},
{
IN02: [
{
"2021": [
{
month: "1",
value: "0101111110111011011111101011110",
},
{
month: "2",
value: "1111110111111011111101111110",
},
{
month: "3",
value: "1111110111111011111101111110011",
},
],
},
{
"2022": [
{
month: "4",
value: "0011111101111110111111011011101",
},
{
month: "5",
value: "1111101111110111111011111101",
},
],
},
],
},
],
};
const result = {
...obj,
holidayCalendar: obj.holidayCalendar.flatMap((obj) =>
Object.entries(obj).flatMap(([location, v]) =>
v.flatMap((o) =>
Object.entries(o).map(([year, holidays]) => ({
location,
year,
holidays,
}))
)
)
),
};
console.log(result);
/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }
If you want to use days instead of value then you can do as:
const obj = {
holidayCalendar: [
{
IN01: [
{
"2021": [
{
month: "1",
value: "0101111110111011011111101011110",
},
{
month: "2",
value: "1111110111111011111101111110",
},
{
month: "3",
value: "1111110111111011111101111110011",
},
],
},
{
"2022": [
{
month: "4",
value: "0011111101111110111111011011101",
},
{
month: "5",
value: "1111101111110111111011111101",
},
{
month: "6",
value: "1111101111110111111011111101111",
},
],
},
],
},
{
IN02: [
{
"2021": [
{
month: "1",
value: "0101111110111011011111101011110",
},
{
month: "2",
value: "1111110111111011111101111110",
},
{
month: "3",
value: "1111110111111011111101111110011",
},
],
},
{
"2022": [
{
month: "4",
value: "0011111101111110111111011011101",
},
{
month: "5",
value: "1111101111110111111011111101",
},
],
},
],
},
],
};
const result = {
...obj,
holidayCalendar: obj.holidayCalendar.flatMap((obj) =>
Object.entries(obj).flatMap(([location, v]) =>
v.flatMap((o) =>
Object.entries(o).map(([year, holidays]) => ({
location,
year,
holidays: holidays.map(({ value, ...rest }) => ({
...rest,
days: value,
})),
}))
)
)
),
};
console.log(result);
/* This is not a part of answer. It is just to give the output full height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Use Object.keys to get all the keys of the object. Usage example
var json = document.getElementById("json").value;
var jsonObject = JSON.parse(json);
jsonObject.holidayCalendar.forEach(function(x) {
Object.keys(x).forEach(function(key) {
console.log(key, x[key]);
});
})
<textarea id="json">
{
"holidayCalendar": [
{
"IN01": [
{
"2021": [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"2022": [
{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
},
{
"month": "6",
"value": "1111101111110111111011111101111"
}
]
}
]
},
{
"IN02": [
{
"2021": [
{
"month": "1",
"value": "0101111110111011011111101011110"
},
{
"month": "2",
"value": "1111110111111011111101111110"
},
{
"month": "3",
"value": "1111110111111011111101111110011"
}
]
},
{
"2022": [
{
"month": "4",
"value": "0011111101111110111111011011101"
},
{
"month": "5",
"value": "1111101111110111111011111101"
}
]
}
]
}
]
}
</textarea>

unable to call onchange function on windows load

window.onload = function (){
$("#work_sanctioned_year").change();
};
$(document).ready(function(){
$("#work_sanctioned_year").change();
});
$("#work-sanctioned-year").change(function(){
var work_sanctioned_year = $(this).val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
});
when m selecting something from the dropdown its working. but when what m trying to do is call the function with the first value by default.I have tried both window.onload method and .ready function individually but still function is not getting called.. and also m not getting error in console related to this so this is making it harder to spot what actually is wrong over here

<script>
function work_sanctioned(){
console.log('onchange');
var work_sanctioned_year = $("#work-sanctioned-year").val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
}
</script>
and then called this on window.onload as well as on select property onchange
<select id="work-sanctioned-year" onChange="work_sanctioned()" style="max-width:40%;min-width:20%; margin:auto;">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
finally on window.onload
<script>
window.onload = function (){
work_sanctioned();
};
</script>

Javascript: Updating the property of a nested object in an array updates the same property for all similar objects

I came across this weird behavior in my code, where i am updating a single property of a nested object within an array of objects. Weirdness is that the same property for all similar objects is getting updated.
Code:
let financials = {
qr: {
controlData: [
{
"year": "2013",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": true
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2014",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": true
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2015",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": true
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
}
]
}
};
$('.checkbox.quarterly').click(function (e) {
try {
// var selectedYear = $('.dropdown.quarterly').dropdown('get value');
// var month = $(this).find('.checkbox-input').data('month');
// var prop = $(this).find('.checkbox-input').prop('checked');
// var targetObj = _.findWhere(financials.qr.controlData, { year: selectedYear });
// Values assumed
var selectedYear = '2013';
var month = 'Mar';
var prop = false;
var targetObj = _.findWhere(financials.qr.controlData, { year: selectedYear });
$.each(targetObj.quarters, function (key, quarter) {
if (quarter.month === month) {
quarter.isChecked = prop;
}
});
} catch (ex) {
console.log(ex);
}
});
Actual Output:
controlData: [
{
"year": "2013",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": false
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2014",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": false
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2015",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": false
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
}
]
Expected Output:
controlData: [
{
"year": "2013",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": false
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2014",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": true
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
},
{
"year": "2015",
"quarters": [
{
"month": "Mar",
"name": "first",
"alias": "Q1",
"isChecked": true
},
{
"month": "Jun",
"name": "second",
"alias": "Q2",
"isChecked": true
},
{
"month": "Sep",
"name": "third",
"alias": "Q3",
"isChecked": true
},
{
"month": "Dec",
"name": "fourth",
"alias": "Q4",
"isChecked": true
}
]
}
]
Basically what i was trying to do is, to update the property 'isChecked' of a particular month whenever I click on the corresponding checkbox. My project is running on Laravel Mix with Webpack.
UPDATE:
This is how the controlData is being created:
let years = ['2013', '2014', '2015'];
let quarters = [
{
month: 'Mar',
name: 'first',
alias: 'Q1',
isChecked: true
},
{
month: 'Jun',
name: 'second',
alias: 'Q2',
isChecked: true
},
{
month: 'Sep',
name: 'third',
alias: 'Q3',
isChecked: true
},
{
month: 'Dec',
name: 'fourth',
alias: 'Q4',
isChecked: true
}
];
for(let x in years) {
let obj = {
year: years[x],
quarters: quarters
};
financials.qr.controlData.push(obj);
}

For me it seems to works just fine. Only the value for Mar 2013 is getting set to false.
Underscore v1.8.3
jQuery v3.3.2
https://jsfiddle.net/7o1tx49d/4/

You create independent arrays with independent objects by mapping copies of the objects.
financials.qr.controlData = years.map(year => ({
year,
quarters: quarters.map(o => Object.assign({}, o))
}));
var financials = { qr: {} },
quarters = [{ month: 'Mar', name: 'first', alias: 'Q1', isChecked: true }, { month: 'Jun', name: 'second', alias: 'Q2', isChecked: true }, { month: 'Sep', name: 'third', alias: 'Q3', isChecked: true }, { month: 'Dec', name: 'fourth', alias: 'Q4', isChecked: true }],
years = ['2013', '2014', '2015'];
financials.qr.controlData = years.map(year => ({
year,
quarters: quarters.map(o => Object.assign({}, o))
}));
var selectedYear = '2013',
month = 'Mar',
prop = false,
targetObj = _.findWhere(financials.qr.controlData, { year: selectedYear });
$.each(targetObj.quarters, function (key, quarter) {
if (quarter.month === month) {
quarter.isChecked = prop;
}
});
console.log(financials);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Create Nested JSON object Javascript

Hello I want to create a JSON Object for storage resources in a post request in java script I have an input array value disk sizes for example below:
request1
input = [10, 20, 30]
"storageResources": [
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 10
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 20
},
{
"name": "diskIopsConsumed",
"value": 1
},
{
"name": "diskConsumedFactor",
"value": "NaN"
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 30
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
],
request2:
input [10,20]
"storageResources": [
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 10
},
{
"name": "diskIopsConsumed",
"value": 0
},
{
"name": "diskConsumedFactor",
"value": 1
}
]
},
{
"stats": [
{
"name": "diskSize",
"units": "GB",
"value": 20
},
{
"name": "diskIopsConsumed",
"value": 1
},
{
"name": "diskConsumedFactor",
"value": "NaN"
}
]
}
],
Is the best way to do this with a function or can you send it by properties?

Use Array.prototype.map to return a modified response
$$text.oninput = evt => {
let json = JSON.parse($$text.value)
let result = json.storageResources.map(resource =>
resource.stats.find(e => e.name == 'diskSize').value
)
console.log(result)
}
$$text.oninput()
<textarea id="$$text">{"storageResources":[{"stats":[{"name":"diskSize","units":"GB","value":10},{"name":"diskIopsConsumed","value":0},{"name":"diskConsumedFactor","value":1}]},{"stats":[{"name":"diskSize","units":"GB","value":20},{"name":"diskIopsConsumed","value":1},{"name":"diskConsumedFactor","value":"NaN"}]},{"stats":[{"name":"diskSize","units":"GB","value":30},{"name":"diskIopsConsumed","value":0},{"name":"diskConsumedFactor","value":1}]}]}</textarea>

amCharts with AngularJS

I'm still strugling making work other libs with AngularJS because of it's differtent logic from other libs.
I need to visualize data with amCharts Stock, but there is nothing on the internet about these two wroking together.
How can i make this work with angularjs: http://jsfiddle.net/922JW/
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
categoryAxesSettings: {
minPeriod: "mm"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
cornerRadiusTop: 2,
fillAlphas: 1
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}
],
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
position: "top"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "top",
dateFormat: "YYYY-MM-DD JJ:NN",
inputFieldWidth: 150,
periods: [{
period: "hh",
count: 1,
label: "1 hour",
selected: true
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
usePrefixes: true
}
});
Thanks.

I would create some basic directive (isolate scope) that receives chart settings and use as template:
<div id="container"></div>
In addition we can write several watchers to listen on user actions.
Here is working example How to use it:
(Its not based on your settings but you can use the same flow)
Demo Fiddle
Directive
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
scope: {
config: '='
},
template: '<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = new Highcharts.Chart(config);
if(config.loading) {
chart.showLoading();
}
};
initChart();
scope.$watch('config.loading', function (loading) {
if(loading) {
chart.showLoading();
} else {
chart.hideLoading();
}
});
scope.$watch('config.series[0].type', function (type) {
chart.series[0].update({type: type});
});
scope.$watch('config.series[0].dataLabels.enabled', function (enableDataLabels) {
chart.series[0].update({dataLabels: {enabled: enableDataLabels}});
});
}//end watch
}
}) ;
The usage:
<my-elem config="chartConfig"> </my-elem>
[EDIT]
Demo 2 FIddle
HTML
<div>
<my-elem ></my-elem>
</div>
JS
var myapp = angular.module('myModule', []);
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"marginLeft": 20,
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": [{
"year": "1950",
"value": -0.307
}, {
"year": "1951",
"value": -0.168
}, {
"year": "1952",
"value": -0.073
}, {
"year": "1953",
"value": -0.027
}, {
"year": "1954",
"value": -0.251
}, {
"year": "1955",
"value": -0.281
}, {
"year": "1956",
"value": -0.348
}, {
"year": "1957",
"value": -0.074
}, {
"year": "1958",
"value": -0.011
}, {
"year": "1959",
"value": -0.074
}, {
"year": "1960",
"value": -0.124
}, {
"year": "1961",
"value": -0.024
}, {
"year": "1962",
"value": -0.022
}, {
"year": "1963",
"value": 0
}, {
"year": "1964",
"value": -0.296
}, {
"year": "1965",
"value": -0.217
}, {
"year": "1966",
"value": -0.147
}, {
"year": "1967",
"value": -0.15
}, {
"year": "1968",
"value": -0.16
}, {
"year": "1969",
"value": -0.011
}, {
"year": "1970",
"value": -0.068
}, {
"year": "1971",
"value": -0.19
}, {
"year": "1972",
"value": -0.056
}, {
"year": "1973",
"value": 0.077
}, {
"year": "1974",
"value": -0.213
}, {
"year": "1975",
"value": -0.17
}, {
"year": "1976",
"value": -0.254
}, {
"year": "1977",
"value": 0.019
}, {
"year": "1978",
"value": -0.063
}, {
"year": "1979",
"value": 0.05
}, {
"year": "1980",
"value": 0.077
}, {
"year": "1981",
"value": 0.12
}, {
"year": "1982",
"value": 0.011
}, {
"year": "1983",
"value": 0.177
}, {
"year": "1984",
"value": -0.021
}, {
"year": "1985",
"value": -0.037
}, {
"year": "1986",
"value": 0.03
}, {
"year": "1987",
"value": 0.179
}, {
"year": "1988",
"value": 0.18
}, {
"year": "1989",
"value": 0.104
}, {
"year": "1990",
"value": 0.255
}, {
"year": "1991",
"value": 0.21
}, {
"year": "1992",
"value": 0.065
}, {
"year": "1993",
"value": 0.11
}, {
"year": "1994",
"value": 0.172
}, {
"year": "1995",
"value": 0.269
}, {
"year": "1996",
"value": 0.141
}, {
"year": "1997",
"value": 0.353
}, {
"year": "1998",
"value": 0.548
}, {
"year": "1999",
"value": 0.298
}, {
"year": "2000",
"value": 0.267
}, {
"year": "2001",
"value": 0.411
}, {
"year": "2002",
"value": 0.462
}, {
"year": "2003",
"value": 0.47
}, {
"year": "2004",
"value": 0.445
}, {
"year": "2005",
"value": 0.47
}],
"valueAxes": [{
"axisAlpha": 0,
"inside": true,
"position": "left",
"ignoreAxisWidth": true
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"cursorPosition": "mouse"
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
};
initChart();
}
}
});

Use the module
https://github.com/natanielpaiva/angularAmChart
or
project example
https://github.com/natanielpaiva/angularAmChartSimples
Simple:
<amchart ng-model="objectLiveAmchart"> </amchart>
In Javascript:
$scope.objectLiveAmchart = { type:serial, ... }

I fount that the solution provided wasn't working for me.
In particular, the chart was not showing if the id in the template wasn't hardcoded.
It seemed like a problem with the AmCharts.makeChart() function that was't able to find the chardiv_idin the DOM.
I found that putting the initChart()function inside a scope.$watch('element') (after attaching elementto the scope in the linking function) was the right solution for me.
I think this is because after the element is created (so after the watch is called) is present and visible in the DOM, so the AmChart function can see it and render the chart correctly.
Hope this helped someone!

Categories

Resources