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();
});
Related
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>
I was working on something but stuck at a point where I have inputs as -
var definition = [
{
"name": "objA",
"type": "object",
"items": [
{
"value": "",
"name": "A"
},
{
"value": "",
"name": "B"
},
{
"value": "",
"name": "C"
}
]
},
{
"name": "objX",
"type": "object",
"items": [
{
"value": "",
"name": "X"
},
{
"value": "",
"name": "Y"
},
{
"value": "",
"name": "Z"
}
]
}
];
var data = {
"objA": {
"A": "ValA",
"B": "ValB",
"C": "ValC"
},
"objX": {
"X": "ValX",
"Y": "ValY",
"Z": "ValZ"
}
};
const updateSchema = (data, definition) => {
definition.forEach((subDef) => {
var node = data[subDef.name];
subDef.items.forEach((sub)=> {
sub.value = node[sub.name]
});
});
return definition;
}
console.log(updateSchema(data,definition))
The output I need is
[
{
"name": "objA",
"type": "object",
"items": [
{
"value": "valA",
"name": "A"
},
{
"value": "valB",
"name": "B"
},
{
"value": "valC",
"name": "C"
}
]
},
{
"name": "objX",
"type": "object",
"items": [
{
"value": "valX",
"name": "X"
},
{
"value": "valY",
"name": "Y"
},
{
"value": "valZ",
"name": "Z"
}
]
}
]
But it gives the output as -
[
{
"name": "objA",
"type": "object",
"items": [
{
"value": "ValX",
"name": "A"
},
{
"value": "ValY",
"name": "B"
},
{
"value": "ValY",
"name": "C"
}
]
},
{
"name": "objX",
"type": "object",
"items": [
{
"value": "ValX",
"name": "X"
},
{
"value": "ValY",
"name": "Y"
},
{
"value": "ValZ",
"name": "Z"
}
]
}
]
I am not able to know where I am doing wrong.
I am using React with typescript. I need to perform the above operation based on some API response.
I am prepopulating some value in the form based on the API response.
Try:
subDef.items.forEach((sub)=> {
sub.value = node[sub.name].charAt(0).toLowerCase() + node[sub.name].slice(1);
});
https://jsfiddle.net/j8nwpf6m/
I have a JSON as below
{
"Header": {
"Time": "2020-06-09T07:03:20-07:00",
"ReportName": "JournalReport",
"StartPeriod": "2020-06-09",
"EndPeriod": "2020-06-09",
"Currency": "USD",
"Option": [
{
"Name": "NoReportData",
"Value": "false"
}
]
},
"Columns": {
"Column": [
{
"ColTitle": "Date",
"ColType": "Date",
"MetaData": [
{
"Name": "ColKey",
"Value": "tx_date"
}
]
},
{
"ColTitle": "Transaction Type",
"ColType": "String",
"MetaData": [
{
"Name": "ColKey",
"Value": "txn_type"
}
]
},
{
"ColTitle": "Num",
"ColType": "String",
"MetaData": [
{
"Name": "ColKey",
"Value": "doc_num"
}
]
},
{
"ColTitle": "Name",
"ColType": "String",
"MetaData": [
{
"Name": "ColKey",
"Value": "name"
}
]
},
{
"ColTitle": "Memo/Description",
"ColType": "String",
"MetaData": [
{
"Name": "ColKey",
"Value": "memo"
}
]
},
{
"ColTitle": "Account",
"ColType": "String",
"MetaData": [
{
"Name": "ColKey",
"Value": "account_name"
}
]
},
{
"ColTitle": "Debit",
"ColType": "Money",
"MetaData": [
{
"Name": "ColKey",
"Value": "debt_home_amt"
}
]
},
{
"ColTitle": "Credit",
"ColType": "Money",
"MetaData": [
{
"Name": "ColKey",
"Value": "credit_home_amt"
}
]
}
]
},
"Rows": {
"Row": [
{
"ColData": [
{
"value": "0-00-00"
},
{
"value": "",
"id": "559"
},
{
"value": ""
},
{
"value": "",
"id": ""
},
{
"value": ""
},
{
"value": "California Department of Tax and Fee Administration Payable",
"id": "678"
},
{
"value": ""
},
{
"value": "1.25"
}
],
"type": "Data"
},
{
"ColData": [
{
"value": "0-00-00"
},
{
"value": "",
"id": "559"
},
{
"value": ""
},
{
"value": "",
"id": ""
},
{
"value": ""
},
{
"value": "California Department of Tax and Fee Administration Payable",
"id": "678"
},
{
"value": ""
},
{
"value": ".10"
}
],
"type": "Data"
},
{
"Summary": {
"ColData": [
{
"value": ""
},
{
"value": ""
},
{
"value": ""
},
{
"value": ""
},
{
"value": ""
},
{
"value": ""
},
{
"value": "31.75"
},
{
"value": "31.75"
}
]
},
"type": "Section"
},
{
"ColData": [
{
"value": "0-00-00"
},
{
"value": "",
"id": "567"
},
{
"value": ""
},
{
"value": "",
"id": ""
},
{
"value": ""
},
{
"value": "Accounts Payable (A/P)",
"id": "676"
},
{
"value": "232.00"
},
{
"value": ""
}
],
"type": "Data"
}
]
}
}
I want to filter this array which matches Rows.Row[someindex].ColData[1].id == 567. Here id should match with second object of ColData array.
But after filtering i don't want to skip the records from resulting array those have Summary as Rows.Row[someindex].Summary. Summary records should be included in resulting array.
I have tried below code but it does not work because In Row.Row array Summary can be there instead of ColData at some indexs & also i want include Summary records in resulting array even if i have found the desired object.
function getResult(filterbY, objList) {
return objList.Rows.Row.filter(function(obj) {
return obj.ColData.some(function(item){
return item.id == filterbY;
});
});
}
Please help with the same ?
you need to include your summary in your filter function then,
function getResult(filterbY, objList) {
return objList.Rows.Row.filter(function(obj) {
if(obj.Summary){return true;}
return obj.ColData.some(function(item){
return item.id == filterbY;
});
});
}
I'm use amChartSerialChart.
"categoryField": "ymd",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "WW",
"dataProvider": [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}
If there are multiple data of the same date, I would like to obtain the total result.
i hope result value is 10.
What kind of solution is there?
Reduce
Map
dataProvider= [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
var result=dataProvider.map(function(arr){return arr.value;
}).reduce((a, b) => a + b, 0);;
console.log(result);
The chart doesn't automatically sum up values of the same date, nor does it support duplicate dates. You need to pre-process your data before assigning it to the chart's dataProvider.
var rawData = [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var rawData = [{
"date": "2016-11-15",
"value": 4
}, {
"date": "2016-11-15",
"value": 1
}, {
"date": "2016-11-16",
"value": 3
}, {
"date": "2016-11-16",
"value": 4
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-18",
"value": 5
}, {
"date": "2016-11-18",
"value": 1
}, {
"date": "2016-11-19",
"value": 4
}, {
"date": "2016-11-19",
"value": 1
}, {
"date": "2016-11-20",
"value": 4
}, {
"date": "2016-11-20",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-22",
"value": 5
}, {
"date": "2016-11-22",
"value": 3
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-24",
"value": 4
}, {
"date": "2016-11-24",
"value": 2
}, {
"date": "2016-11-25",
"value": 5
}, {
"date": "2016-11-25",
"value": 4
}, {
"date": "2016-11-26",
"value": 5
}, {
"date": "2016-11-26",
"value": 1
}, {
"date": "2016-11-27",
"value": 5
}, {
"date": "2016-11-27",
"value": 3
}, {
"date": "2016-11-28",
"value": 5
}, {
"date": "2016-11-28",
"value": 1
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-30",
"value": 4
}, {
"date": "2016-11-30",
"value": 3
}, {
"date": "2016-12-01",
"value": 4
}, {
"date": "2016-12-01",
"value": 2
}, {
"date": "2016-12-02",
"value": 4
}, {
"date": "2016-12-02",
"value": 1
}, {
"date": "2016-12-03",
"value": 4
}, {
"date": "2016-12-03",
"value": 3
}, {
"date": "2016-12-04",
"value": 3
}, {
"date": "2016-12-04",
"value": 1
}, {
"date": "2016-12-05",
"value": 5
}, {
"date": "2016-12-05",
"value": 2
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-07",
"value": 5
}, {
"date": "2016-12-07",
"value": 1
}, {
"date": "2016-12-08",
"value": 4
}, {
"date": "2016-12-08",
"value": 1
}, {
"date": "2016-12-09",
"value": 3
}, {
"date": "2016-12-09",
"value": 4
}, {
"date": "2016-12-10",
"value": 5
}, {
"date": "2016-12-10",
"value": 2
}, {
"date": "2016-12-11",
"value": 5
}, {
"date": "2016-12-11",
"value": 1
}, {
"date": "2016-12-12",
"value": 3
}, {
"date": "2016-12-12",
"value": 2
}];
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"graphs": [{
"bullet": "round",
"valueField": "value"
}],
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "7DD",
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Note that WW is an invalid minPeriod. If you want to group your data in weeks, use 7DD instead. API documentation for minPeriod
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!