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!
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>
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; }
If I have multiple charts, say a stacked bar and a pie chart on my page. I would like to interact (e.g. click) on one of it and see some visual update on the other chart.
I tried creating them using FusionCharts in the following manner:
FusionCharts.ready(function() {
var pieChart = new FusionCharts({
type: 'pie2d',
renderAt: 'pieContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"enableMultiSlicing": "0",
"bgcolor": "FFFFFF",
"showvalues": "1",
"showpercentvalues": "1",
"showborder": "0",
"showplotborder": "0",
"showlegend": "1",
"legendborder": "0",
"legendposition": "bottom",
"enablesmartlabels": "1",
"use3dlighting": "0",
"showshadow": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78"
},
"data": [{
"label": "Services",
"value": "26"
}, {
"label": "Hardware",
"value": "32"
}, {
"label": "Software",
"value": "42"
}]
}
}).render();
var stackedBar = new FusionCharts({
type: 'stackedBar2D',
renderAt: 'barContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"xaxisname": "Month",
"yaxisname": "Revenue",
"bgcolor": "FFFFFF",
"outcnvbasefontcolor": "666666",
"numberprefix": "$",
"showvalues": "0",
"numvdivlines": "10",
"showalternatevgridcolor": "1",
"alternatevgridcolor": "e1f5ff",
"divlinecolor": "e1f5ff",
"vdivlinecolor": "e1f5ff",
"basefontcolor": "666666",
"tooltipbgcolor": "F3F3F3",
"tooltipbordercolor": "666666",
"canvasbordercolor": "666666",
"canvasborderthickness": "1",
"showplotborder": "1",
"plotfillalpha": "80",
"showborder": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Product A",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "Product B",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "42000",
"color": "91C728",
"displayvalue": "Target",
"showontop": "1"
}]
}],
"styles": {
"definition": [{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "Canvas",
"styles": "CanvasAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div>
<span id="barContainer">FusionCharts XT will load here!</span>
<span id="pieContainer">FusionCharts XT will load here!</span>
</div>
Now how to update the other chart on interacting one of the chart? Say by clicking or hovering plots on one of the chart, has its visual update in another chart.
**Note: ** The data is not relevant in this case. Only the chart to chart interactivity needs to be established. There is no restriction on JS library being used and can be entirely based on the responder choice.Any help is highly appreciable.
With highcharts, you could override the click function, then update whichever properties you want.
See: http://api.highcharts.com/highcharts#chart.events
I do not know how it is with FusionCharts, although I think syncing data between different type of charts should be possible, but I was using a lot amCharts and if you have no restriction on library then I put this quick tips link to show you what you can fairly quickly implement there.
http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/
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!