I want to plot a graph between place and time. Y-axis will show 5 countries (USA, UK, Canada, France, Germany) and X-axis will show the time. The data is in pairs of (date, place). I am trying to display it by replacing the numeric values of Y-Y-axis with strings but no luck. Any simple working example will be helpful.
The value axis' labelFunction would be perfect for this task. With it, you can define a custom function that would be called for each label, which in turn could replace the number with a string. I.e.:
"valueAxes": [{
// other value axis settings
// ...
"labelFunction": function(value) {
var labels = {
"1": "USA",
"2": "UK",
"3": "Canada",
"4": "France",
"5": "Germany"
};
return labels[value] || "";
}
}]
Another option that you have is to disable value axis labels altogether ("labelsEnabled": false) and using guides to place country labels at specific values. I.e.:
"valueAxes": [{
"labelsEnabled": false,
"guides": [{
"value": 1,
"label": "USA"
}, {
"value": 2,
"label": "UK"
}, {
"value": 3,
"label": "Canada"
}, {
"value": 4,
"label": "France"
}, {
"value": 5,
"label": "Germany"
}]
}]
Whichever works for your purposes better, or seems easier.
Related
Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
In am Charts, i have users list as category and duration (hh:mm:ss) in value axis graph. I had set grid count to 24 but, its not working as expected (1 hr * 24 steps). Its being set as 2000 secs steps. I tried changing a lot of parameter.
My sample data : https://live.amcharts.com/iMWNh/
Here, the duration split up is not working as expected in 1 hr split ups of 24 grids. My input data is in seconds.
Any advice ?
This helped me ! Hope someone finds it useful.
Hi,
Unfortunately, what you require would be impossible to implement using
Live Editor, due to some of its limitation.
However, it's possible using amCharts.
I have made necessary changes here:
https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Online(secs)",
"type": "column",
"valueField": "Online(sec)"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Offline(secs)",
"type": "column",
"valueField": "Offline(sec)"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 86400000,
"stackType": "regular",
"strictMinMax": true,
"autoGridCount": false,
"autoRotateCount": 0,
"gridCount": 24,
"labelRotation": 50.4,
"title": "",
"titleRotation": 0,
"type": "date",
"minPeriod": "hh",
"boldPeriodBeginning": false,
"markPeriodChange": false
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "Diana",
"Online(sec)": 7200000,
"Offline(sec)": 79200000
},
{
"category": "Clarke",
"Online(sec)": 18000000,
"Offline(sec)": 68400000
},
{
"category": "Bruce",
"Online(sec)": 3600000,
"Offline(sec)": 7200000
}
]
});
There were quite a few changes:
1) Remove the duration from value axis, and set its type: "date;
2) Make values in data non-string (remove quotes around them) and convert
to milliseconds, since JavaScript deals in milliseconds;
3) Similarly convert maximum in valueAxis to milliseconds as well;
4) Set the following two settings for valueAxis: (so that it does not try to
format the first hour differently)
"boldPeriodBeginning": false, "markPeriodChange": false
5) Finally, set AmCharts.useUTC = false before chart code. (this ensures that
timestamps are not being recalculated to local time zone)
I hope you find this useful.
Yours sincerely,
Martynas Majeris
amCharts
While amcharts shows the India map correctly (showing the disputed regions as part of India) when displaying only India (http://jsfiddle.net/zxhseguw/5/)
"dataProvider": {
"map": "indiaLow",
"areas": [ {
"id": "IN-KA",
"value": 4447100,
}, {
"id": "IN-UP",
"value": 38763
}]
},
it shades it differently when rendering it on world map (http://jsfiddle.net/zxhseguw/6/)
"dataProvider": {
"map": "worldLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
I wonder, if there is a way to make it render India correctly, just like its possible in Google Charts by setting origin='India'
I'm assuming you're referring to the region around Kashmir, correct? Try using worldIndiaLow instead of worldLow, which includes more of that disputed area as part of India.
"dataProvider": {
"map": "worldIndiaLow",
"areas": [ {
"id": "IN",
"value": 4447100,
}, {
"id": "AU",
"value": 387633
}]
},
Updated fiddle
Basically, no bubbles are displayed because the group which I use for the chart is empty.
what my data structure looks like :
[{
"site": "Site",
"service": "Long Term Care",
"value": 67.52,
"quarter": "Q1",
"date": "2015-02-13T22:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 67.19,
"quarter": "Q2",
"date": "2015-05-15T21:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 66.87,
"quarter": "Q3",
"date": "2015-08-14T21:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Long Term Care",
"value": 66.57,
"quarter": "Q4",
"date": "2015-11-14T22:00:00.000Z",
"groupId": 1
}, {
"site": "Site",
"service": "Assisted Living",
"value": 75.36,
"quarter": "Q1",
"date": "2015-02-13T22:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 75,
"quarter": "Q2",
"date": "2015-05-15T21:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 74.65,
"quarter": "Q3",
"date": "2015-08-14T21:00:00.000Z",
"groupId": 2
}, {
"site": "Site",
"service": "Assisted Living",
"value": 74.31,
"quarter": "Q4",
"date": "2015-11-14T22:00:00.000Z",
"groupId": 2
}]
I want to display a bubble for each row in my data source. I created a dimension based on the quarters (I've also tried using the date field but with the same result) and a group based on the value field (each value is a unique float number). But when printing the resulting group in the console, it returns an empty array. Now I'm not sure if it is even possible to do what I have in mind.
Rest of the code:
ndx = crossfilter(myData);
dateDimension = ndx.dimension(dc.pluck('quarter'));
print_filter(dateDimension);
valueGroup = dateDimension.group(dc.pluck('value'));
print_filter(valueGroup);
minValue = dateDimension.bottom(1)[0].value;
maxValue = dateDimension.top(1)[0].value;
testChart = dc.bubbleChart("#test-chart");
testChart.width(850).height(350).dimension(dateDimension).group(valueGroup)
.renderLabel(false)
.maxBubbleRelativeSize(0.3)
.radiusValueAccessor(function (p) {
return p.value.value;
})
.x(d3.scale.ordinal().domain(["Q1", "Q2", "Q3", "Q4"]))
.xUnits(dc.units.ordinal)
.y(d3.scale.linear().domain([0, maxValue + 10])).yAxisLabel("", 20);
dc.renderAll();
Here is the JsFiddle
Here is a picture of what I expected the chart be like.
Lots of issues here, but the main thing is getting your groups properly defined for the visualization you want to do. Here's an update to your JSFiddle that may get you started: https://jsfiddle.net/yewk7c0r/15/
Basic idea for groups is to define your dimension at the level of granularity you need for your visualization and then define your group using reduceSum (or a custom grouping if you want to do average or something like that):
ndx = crossfilter(myData);
dateDimension = ndx.dimension(function(d) {
return [d.quarter, d.service];
});
valueGroup = dateDimension.group().reduceSum(dc.pluck('value'));