I have a div of a map and a div of pie chart on the web page. There are several pins on the map, and I want to refresh the chart div based on different click.
Here is the click function of leaflet.js:
var country = "";
map.on('click', function(e) {
country = "Worldwide";
alert("Set map to worldwide");
});
markerUS.on('click', function(e) {
country = "U.S.";
alert('U.S');
});
in the chart.js (pie chart):
AmCharts.makeChart("chartdiv1", {
"type": "pie",
"angle": 12,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 15,
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle"
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Number of Projects distribution of " + country
}],
"dataProvider": [{
"category": "a",
"column-1": 8
},
{
"category": "b",
"column-1": 6
},
{
"category": "c",
"column-1": 2
},
{
"category": "d",
"column-1": "3"
},
{
"category": "e",
"column-1": "4"
},
{
"category": "f",
"column-1": "2"
}
]
});
inside "titles" I make country as variable based on the pin I clicked.
But I got country is undefined and the value country from leaflet.js seems didn't pass to chart.js. Why? How to correct this and realize the function?
You got undefined country because its value only be initialized when user click on map or on a maker. You could try to update your code like this
map.on('click', function(e) {
var country = "Worldwide";
makeChart(country);
});
markerUS.on('click', function(e) {
var country = "U.S.";
makeChart(country);
});
function makeChart(country) {
AmCharts.makeChart("chartdiv1", {
// your chart option ....
});
}
As Trung said you need to call a function that refrech the chart on each click event
var country = "";
map.on('click', function(e) {
country = "Worldwide";
refrechChart(country);
});
markerUS.on('click', function(e) {
country = "U.S.";
refrechChart(country);
});
and then make the refrechChart function
function refrechChart(country) {
AmCharts.makeChart("chartdiv1", {
"type": "pie",
"angle": 12,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 15,
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle"
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Number of Projects distribution of " + country
}],
"dataProvider": [{
"category": "a",
"column-1": 8
},
{
"category": "b",
"column-1": 6
},
{
"category": "c",
"column-1": 2
},
{
"category": "d",
"column-1": "3"
},
{
"category": "e",
"column-1": "4"
},
{
"category": "f",
"column-1": "2"
}
]
});
}
you can also pass more parameter to use in your chart like
function refrechChart(country,value1,value2) {
//...
}
Related
im currently struggling to create a trend line to a line chart. found some old solutions and those things didn't work for me.
Current code:
{
"key": "003",
"title": "Detections",
"type": "chart",
"chartData": {
"chart": {
"type": "line",
"renderTo": "container"
},
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"categories": ["Jan 7", "Jan 14", "Jan 21", "Jan 28",
"Feb 4","Feb 11","Feb 18","Feb 25",
"Mar 4","Mar 11","Mar 18","Mar 28",
"Apr 1","Apr 8","Apr 15","Apr 22","Apr 29",
"May 6","May 13","May 20","May 27"
]
},
"colors": [ "#f89c1b"],
"yAxis": {
"title": {
"text": "Number of Exits"
}
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": false
}
},
"series": [{
"name": "Week",
"data": [60,12,29,48,
24,31,15,37,
32,16,22,29,
21,13,9,14,15,
10,12,13,7]
}
]
},
"index": 2,
"defaultWidth": "100%"
}
Current chart:
enter image description here
How do i add trend line to this line chart? is there any built in parameter to add trend line?
First, load and initialize indicators and trendline modules. Then add new trendline series. For example:
series: [{
id: "mainSeries",
name: "Week",
data: [...]
}, {
type: 'trendline',
linkedTo: "mainSeries"
}]
Live demo: https://codesandbox.io/s/highcharts-react-demo-fork-wubgnd?file=/demo.jsx
API Reference: https://api.highcharts.com/highstock/series.trendline
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
I'm working on a data intensive IOT project, and we are using many different AmCharts to display our data to the user. I just implemented a line chart with a legend and it's working very well. I have about 20 different assets being displayed, and they are different colors. The way AmCharts implements their legend is, when you click a color it is disabled.
My question is can these be reversed easily? I want it so, when you click a assets color on the legend all the others on the chart are disabled, and the one you clicked is the only one being displayed.
Thanks for the help in advance.
You can use the showItem and hideItem events in the legend to force the clicked on marker to maintain its visibility by setting the graph's hidden property to false and hide the other graphs by setting hidden to true:
// in makeChart:
"legend": {
"enabled": true,
// ...
"listeners": [{
"event": "showItem",
"method": hideOthers
}, {
"event": "hideItem",
"method": hideOthers
}]
},
// ...
function hideOthers(e) {
var currentGraph = e.dataItem;
currentGraph.hidden = false; //force clicked graph to stay visible
e.chart.graphs.forEach(function(graph) {
if (graph.id !== currentGraph.id) {
graph.hidden = true; //hide the others
}
});
// update the chart with newly set hidden values
e.chart.validateNow();
}
Demo below:
function hideOthers(e) {
var currentGraph = e.dataItem;
currentGraph.hidden = false; //force clicked graph to stay visible
e.chart.graphs.forEach(function(graph) {
if (graph.id !== currentGraph.id) {
graph.hidden = true; //hide the others
}
});
// update the chart with newly set hidden values
e.chart.validateNow();
}
AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "column-2",
"hidden": true
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"stackType": "regular",
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true,
"listeners": [{
"event": "showItem",
"method": hideOthers
}, {
"event": "hideItem",
"method": hideOthers
}]
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
},
{
"category": "category 4",
"column-1": 1,
"column-2": 3
},
{
"category": "category 5",
"column-1": 2,
"column-2": 1
},
{
"category": "category 6",
"column-1": 3,
"column-2": 2
},
{
"category": "category 7",
"column-1": 6,
"column-2": 8
}
]
});
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
Edit
To make it so that clicking on the same marker toggles the visibility of the other charts back on, you can store a couple of flags in the chart instance itself through the event handler and use those flags to determine whether to hide all other charts or make them all visible:
function hideOthers(e) {
var currentGraph = e.dataItem;
var hidden = true;
//check if we clicked on this graph before and if all the other graphs are visible.
// if we clicked on this graph before and the other graphs are invisible,
// make them visible, otherwise default to previous behavior
if (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
hidden = false;
e.chart.allVisible = true;
}
else {
e.chart.allVisible = false;
}
e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked
currentGraph.hidden = false; //force clicked graph to stay visible
e.chart.graphs.forEach(function(graph) {
if (graph.id !== currentGraph.id) {
graph.hidden = hidden; //set the other graph's visibility based on the rules above
}
});
// update the chart with newly set hidden values
e.chart.validateNow();
}
AmCharts.makeChart("chartdiv", {
// .. custom flags to make the above code work
"lastClicked": null,
"allVisible": true, //if you're only showing one graph by default, set this to false
// ...
})
Demo:
function hideOthers(e) {
var currentGraph = e.dataItem;
var hidden = true;
//check if we clicked on this graph before and if all the other graphs are visible.
// if we clicked on this graph before and the other graphs are invisible,
// make them visible, otherwise default to previous behavior
if (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
hidden = false;
e.chart.allVisible = true;
}
else {
e.chart.allVisible = false;
}
e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked
currentGraph.hidden = false; //force clicked graph to stay visible
e.chart.graphs.forEach(function(graph) {
if (graph.id !== currentGraph.id) {
graph.hidden = hidden; //set the other graph's visibility based on the rules above
}
});
// update the chart with newly set hidden values
e.chart.validateData();
}
AmCharts.makeChart("chartdiv", {
"type": "serial",
"lastClicked": null,
"allVisible": true, //if you're only showing one graph by default, set this to false
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
//"includeHidden": true,
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true,
"listeners": [{
"event": "showItem",
"method": hideOthers
}, {
"event": "hideItem",
"method": hideOthers
}]
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
},
{
"category": "category 4",
"column-1": 1,
"column-2": 3
},
{
"category": "category 5",
"column-1": 2,
"column-2": 1
},
{
"category": "category 6",
"column-1": 3,
"column-2": 2
},
{
"category": "category 7",
"column-1": 6,
"column-2": 8
}
]
});
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"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": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.
The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"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": "2006",
"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": "2005",
"renderas": "Area",
"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"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.