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>
Related
What is the best way to reduce this array of objects to get the desired result?
const arr = [
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "-1",
"month": 8
},
{
"id": "561",
"count": "1",
"month": 9
},
{
"id": "561",
"count": "-1",
"month": 9
}
]
As you can see the id matches and some of the months match. What I would like to achieve is something along the lines of:
[
{
"id": "561",
"count": 2
"month": 7
},
{
"id": "561",
"count": -1,
"month": 8
},
{
"id": "561",
"count": 0,
"month": 9
}
]
I'm basically trying to get the total count by month per id.
You can use Array.prototype.reduce to group and evaluate your array based on id and month
const arr = [
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "-1",
"month": 8
},
{
"id": "561",
"count": "1",
"month": 9
},
{
"id": "561",
"count": "-1",
"month": 9
}
];
const res = Object.values(arr.reduce((acc, item) => {
if (acc[`${item.id}-${item.month}`]) {
acc[`${item.id}-${item.month}`] = {
...acc[`${item.id}-${item.month}`],
count: `${parseInt(acc[`${item.id}-${item.month}`].count) + parseInt(item.count)}`
}
} else {
acc[`${item.id}-${item.month}`] = item;
}
return acc;
}, {}));
console.log(res);
Here's an example using Array.prototype.reduce to create a new array and Array.prototype.find to check if the current value is already present in the new array
const arr = [
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "1",
"month": 7
},
{
"id": "561",
"count": "-1",
"month": 8
},
{
"id": "561",
"count": "1",
"month": 9
},
{
"id": "561",
"count": "-1",
"month": 9
}
]
const result = arr.reduce((acc, value) => {
const index = acc.findIndex(({id, month}) => id === value.id && month === value.month);
if( index > -1 ) {
acc[index]['count'] += Number(value.count);
}
else {
acc.push({...value, count: Number(value.count)});
}
return acc;
}, [])
console.log(result)
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>
How can I create Scrollable X-axis using Fusioncharts? I'm trying to create a scrollbar like this for stacked bar and line graph combination.
Can I add scrollbar by using any inbuilt functions provided by Fusioncharts library?
Can someone please help me with a solution?
/StackOverflow didn't accepted my question, so I added this comment to the increase question length/
const dataSource = {
"chart": {
"subcaption": "2016 - 2021",
"syaxisname": "YoY growth in %",
"formatnumberscale": "0",
"numberprefix": "$",
"numbersuffix": "M",
"snumbersuffix": "%",
"showvalues": "0",
"plottooltext": "Market size for $seriesName in $label is <b>$dataValue</b>",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "2016"
},
{
"label": "2017"
},
{
"label": "2018"
},
{
"label": "2019"
},
{
"label": "2020"
}
]
}
],
"dataset": [
{
"seriesname": "RPA Software",
"data": [
{
"value": "73"
},
{
"value": "113"
},
{
"value": "153"
},
{
"value": "192"
},
{
"value": "232"
}
]
},
{
"seriesname": "RPA Services",
"data": [
{
"value": "198"
},
{
"value": "330"
},
{
"value": "476"
},
{
"value": "630"
},
{
"value": "790"
}
]
},
{
"seriesname": "YoY Growth",
"parentyaxis": "S",
"plottooltext": "$dataValue growth expected in $label",
"renderas": "line",
"data": [
{
"value": "73"
},
{
"value": "63"
},
{
"value": "42"
},
{
"value": "31"
},
{
"value": "24"
},
{
"value": "20"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "stackedcolumn3dlinedy",
renderAt: "chart-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
The chart which you are looking for is scrollcombidy2d
Here is a demo - http://jsfiddle.net/nqt410Lk/
const dataSource = {
"chart": {
"caption": "Analysing Subsidies by Youth Population",
"subcaption": "By province",
"yaxisname": "Population Count",
"syaxisname": "Subsidies % of Income",
"labeldisplay": "rotate",
"snumbersuffix": "%",
"scrollheight": "10",
"numvisibleplot": "10",
"drawcrossline": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Matzikama"
},
{
"label": "Cederberg"
},
{
"label": "Bergrivier"
},
{
"label": "Saldanha Bay"
},
{
"label": "Swartland"
},
{
"label": "Witzenberg"
},
{
"label": "Drakenstein"
},
{
"label": "Stellenbosch"
},
{
"label": "Breede Valley"
},
{
"label": "Langeberg"
},
{
"label": "Swellendam"
},
{
"label": "Theewaterskloof"
},
{
"label": "Overstrand"
},
{
"label": "Cape Agulhas"
},
{
"label": "Kannaland"
},
{
"label": "Hessequa"
},
{
"label": "Mossel Bay"
},
{
"label": "George"
},
{
"label": "Oudtshoorn"
},
{
"label": "Bitou"
},
{
"label": "Knysna"
},
{
"label": "Laingsburg"
},
{
"label": "Prince Albert"
},
{
"label": "Beaufort West"
}
]
}],
"dataset": [{
"seriesname": "Total Population",
"plottooltext": "Population: $dataValue",
"data": [{
"value": "71045"
},
{
"value": "52949"
},
{
"value": "67474"
},
{
"value": "111173"
},
{
"value": "133762"
},
{
"value": "130548"
},
{
"value": "280195"
},
{
"value": "173419"
},
{
"value": "176578"
},
{
"value": "105483"
},
{
"value": "40211"
},
{
"value": "117109"
},
{
"value": "93466"
},
{
"value": "36000"
},
{
"value": "24168"
},
{
"value": "54237"
},
{
"value": "94135"
},
{
"value": "208237"
},
{
"value": "97509"
},
{
"value": "59157"
},
{
"value": "73835"
},
{
"value": "8895"
},
{
"value": "14272"
},
{
"value": "51080"
}
]
},
{
"seriesname": "Youth",
"renderas": "area",
"showanchors": "0",
"plottooltext": "Youth: $dataValue",
"data": [{
"value": "24598"
},
{
"value": "18302"
},
{
"value": "22162"
},
{
"value": "40696"
},
{
"value": "47420"
},
{
"value": "49981"
},
{
"value": "97230"
},
{
"value": "73162"
},
{
"value": "60668"
},
{
"value": "34594"
},
{
"value": "12567"
},
{
"value": "39907"
},
{
"value": "30681"
},
{
"value": "11323"
},
{
"value": "7801"
},
{
"value": "15785"
},
{
"value": "31478"
},
{
"value": "72762"
},
{
"value": "32301"
},
{
"value": "21401"
},
{
"value": "27863"
},
{
"value": "3254"
},
{
"value": "5562"
},
{
"value": "19047"
}
]
},
{
"seriesname": "Subsidies received %",
"parentyaxis": "S",
"renderas": "line",
"plottooltext": "$dataValue subsidies received",
"showvalues": "0",
"data": [{
"value": "28.0"
},
{
"value": "35.2"
},
{
"value": "23.9"
},
{
"value": "11.8"
},
{
"value": "18.0"
},
{
"value": "26.9"
},
{
"value": "11.1"
},
{
"value": "11.2"
},
{
"value": "24.0"
},
{
"value": "18.9"
},
{
"value": "35.6"
},
{
"value": "37.9"
},
{
"value": "12.9"
},
{
"value": "27.6"
},
{
"value": "40.5"
},
{
"value": "19.9"
},
{
"value": "15.6"
},
{
"value": "28.2"
},
{
"value": "23.3"
},
{
"value": "26.2"
},
{
"value": "16.9"
},
{
"value": "41.9"
},
{
"value": "62.1"
},
{
"value": "31.2"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "scrollcombidy2d",
renderAt: "chart-container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource
}).render();
});
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; }
I am relatively new to both MVC and FusionCharts. I Have a View where the Model contains all the data I need, I need to pass this(or rather specific data from the model) to the FusionChart.
I have a FusionChart that I got from their site(FusionCharts), which has hard coded values, but have no idea how to replace this with the data from my model. Below is my FusionChart :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Week of Year",
"showvalues": "0",
"numvdivlines": "2",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"captionFontSize": "13",
"subcaptionFontSize": "13",
"subcaptionFontBold": "0",
"showBorder": "0",
"showPlotBorder": "0",
"showXAxisLine": "1",
"showShadow": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"showalternatevgridcolor": "1",
"usePlotGradientColor": "0",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"legendBorderAlpha": "0",
"legendShadow": "0",
"alignCaptionWithCanvas": "0"
},
"categories": [
{
"category": [
{ "label": "0" },
{ "label": "5000.00" },
{ "label": "4000.00" },
{ "label": "6000.00" },
{ "label": "8000.00" },
{ "label": "10000.00" },
{ "label": "12000.00" },
{ "label": "14000.00" },
{ "label": "16000.00" }
]
}
],
"axis": [
{
"title": "Revenue",
"titlepos": "left",
"tickwidth": "10",
"numberPrefix": "$",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Revenue",
"linethickness": "3",
"data": [
{ "value": "137500" },
{ "value": "124350" },
{ "value": "156700" },
{ "value": "131450" },
{ "value": "208300" },
{ "value": "219900" },
{ "value": "227500" },
{ "value": "254300" },
{ "value": "155900" },
{ "value": "105650" },
{ "value": "120950" },
{ "value": "127500" }
]
}
]
}, {
"title": "Orders",
"axisonleft": "0",
"titlepos": "right",
"numdivlines": "8",
"tickwidth": "10",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Orders",
"data": [
{ "value": "22567" },
{ "value": "21348" },
{ "value": "24846" },
{ "value": "19237" },
{ "value": "20672" },
{ "value": "23403" },
{ "value": "30278" },
{ "value": "26719" },
{ "value": "21940" },
{ "value": "24396" },
{ "value": "22340" },
{ "value": "25439" }
]
}
]
},
{
"title": "Footfalls",
"titlepos": "RIGHT",
"axisonleft": "0",
"numdivlines": "5",
"tickwidth": "10",
"numberSuffix": "",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Footfalls",
"data": [
{ "value": "68473" },
{ "value": "57934" },
{ "value": "78925" },
{ "value": "69213" },
{ "value": "74892" },
{ "value": "81123" },
{ "value": "90086" },
{ "value": "91174" },
{ "value": "68934" },
{ "value": "80934" },
{ "value": "73634" },
{ "value": "84453" }
]
}
]
}
]
}
}).render();
});
I have also tried populating a string with the XML data and then did the following :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350'
});
hourlySalesChart.setXMLData(#Model.strChartData); // - This gives an error : Incorrect Syntax
hourlySalesChart.render();
If anyone could help point me to the right direction, I would greatly appreciate it.
Thanks!