I'm trying to trying to remove a small gap when I have a pie chart with a 100% slice.
I've tried to give it a outlineThickness of 0 but there is still a very small gap.
Here is an example.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 10
}],
"outlineThickness": 0,
"outlineAlpha": 1,
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
The only way to work around this in current version is to apply the same color to outline as the slice itself. You can use outlineColor for that:
https://jsfiddle.net/s083cdpk/1/
Please note that this should be applies only if there's only one slice, as the same color will be applied to all slices if there are more.
This options should be used:
"outlineThickness": 1,
"outlineAlpha": 1,
"outlineColor": undefined
Example
Related
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
I have a gantt chart with a few minor tweaks but basically a clone of This gantt example with dates.
What I am trying to do is have a number of icons next to the segment based off some info included in the segment data. My case involves having 3 different binary variables and including different icons depending the values.
var chartData = [{
category: task.name,
segments: [
{
start: task.parallel ? lastStart : moment(latestEnd).format(string),
end: task.parallel ? moment(lastStart).add(time,'m').format(string) : moment(latestEnd).add(time,'m').format(string),
color: '#1C7DDB',
time: task.time,
indicator1: task.checkOne== 1 ? '../img/path_to_icon.svg' : '',
indicator2: task.checkTwo== 1 ? '../img/path_to_icon2.svg' : '',
indicator3: task.checkThree== 1 ? '../img/path_to_icon3.svg': ''
}
]
},
...
}]
So far this works OK when I set the customeBullet to one of the variables:
However I want to be able to have the ability to have all 3 (or none) of the icons shown.
I think what I need to do is add the segment data first then add the icons as three graphs to the gantt with no visible line.
My current chart init code is here, I tried changing graph: {} to graphs: [] but that causes an error.
var chart = AmCharts.makeChart( "plannerChart", {
"type": "gantt",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD HH:mm",
"columnWidth": 0.75,
"addClassNames": true,
"valueAxis": {
"type": "date",
"guides": [
{
"value": AmCharts.stringToDate( start, "YYYY-MM-DD HH:NN"),
"toValue": AmCharts.stringToDate( moment(start).add(timeWindow,'h').format('YYYY-MM-DD HH:mm'), "YYYY-MM-DD HH:NN"),
"lineAlpha": 0.2,
"lineColor": guideColor,
"lineThickness": 3,
"fillAlpha": 0.1,
"fillColor": guideColor,
"label": "Available time",
"inside": false
}
]
},
"brightnessStep": 7,
"graph": {
"fillAlphas": 1,
"lineAlpha": 1,
"bulletOffset": 25,
"bulletSize": 20,
"customBulletField": "indicator1",
"lineColor": "#0F238C",
"fillAlphas": 0.85,
"balloonText": "<b>Start</b>: [[start]]<br /><b>Finish</b>: [[end]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": chartData,
"chartCursor": {
"cursorColor": "#0F238C",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": false
},
} );
}
Any help appreciated!
M
This isn't possible in a Gantt chart as it only takes a single graph object, as you noticed when trying to use an array.
You can emulate a Gantt chart by making a multi-segmented floating bar chart, using the graph's openField property to simulate where the column starts. You can extend this to add your additional graph objects for your indicators and use a date-based valueAxis for your values (note that valueAxes require date objects or millisecond timestamps, so strings won't work) or use relative values like in the demo. Note that this is a little clunker than the Gantt chart in that you have to define multiple graph objects to simulate the segments on the same category.
It seems that Amchart is caching the json and it is not drawing the graph nor legend.
First time I open the modal it displays fine, but if I close it and open again it displays all the data in labels (taken from the same JSON), but the chart is not being drawed. Is it a caching issue?
This is the way I am drawing it:
var modelPie = #Html.Raw(jsonPie);
var dataProvider = [];
dataProvider = modelPie.UsefulLifes;
var chartdivdounut = AmCharts.makeChart("chartdivdounut", {
"type": "pie",
"startDuration": 0,
"theme": "light",
"addClassNames": true,
"legend": {
"position": "right",
"marginRight": 0,
"autoMargins": false
},
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
"dataProvider": dataProvider,
"valueField": "Value",
"titleField": "FieldName",
"showZeroSlices": false,
"labelsEnabled": false,
"export": {
"enabled": true
}
});
chartdivdounut.addListener("init", handleInit);
chartdivdounut.addListener("rollOverSlice", function (e) {
handleRollOver(e);
});
function handleInit() {
chartdivdounut.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
enter code here
I realized that the script section in the partial view was being executed just one time.
Seems to be something messed up. I re-wrote that part of the code and it started to work properly.
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.
I 'm trying to generate svg maps from the GEOFLA shapefiles.
Using 'bbox' bounds mode with manually setting the bbox values works well :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "bbox",
"data": [-4.5, 42, 8, 48],
},
"export": {
"width": 600,
"ratio": 0.8
}
}
But when setting the bounds mode to 'polygons', then i get an empty svg map :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "polygons",
"data": {
"layer": "depts"
},
"padding": 0.06
},
"export": {
"width": 600,
"ratio": 0.8
}
}
I had a look in kartograph files and i noticed that the "get_features" method in "map.py" return a Polygon which coordinates doesn't intersect with the features geometry previouly extracted from the shapefile.
Then, each feature are throw away in the "get_features" method of the "maplayer.py" file when checking if feature geometry intersects with the "layer.map.view_poly" property.
I had a similar problem using GEOFLA file projection.
The solution I've found is basically to change my shapefile projection using QGIS. My idea was to use the projection of the shapefile given in installation guide which worked for me.
Get example shape file from kartograph installation page
Load this vector layer in QGIS Add your GEOFLASH layer in QGIS
Right-click on GEOFLASH layer and "Save as..." menu
In the save window, give a new name for your layer (eg : DEPARTEMENT_WGS84.shp)
Click CSR button and select the test layer projection (WGS 84 / EPSG:4326)
Click OK
Check the new shape file has correct projection :
cat DEPARTEMENT_WGS84.prj
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Now your script should work fine using new shape file.