It is possible to have groups in amcharts axis?
Check the example in highcharts : example
Kind of... it's not an official feature but you can fake it.
You can have a graph for the label, with a valueField which is always zero.
You'll also need to offset the category axis so the labels don't hide each other.
Here's an example : http://jsfiddle.net/amcharts/XY2cD/
// each data provider has a label property
dataProvider :
[{ ... ,
"label": 0
}, ... ],
// the first graph in each 'cluster' is for the label
"graphs": [
{
"type": "column",
"fillAlphas": 0, // hide this column
"lineAlpha": 0, // hide this column
"title": "my sub group name",
"valueField": "label", // this is the field that's always zero
"showAllValueLabels": true, // even though the field is zero - the label will be shown
"labelText": "\n[[title]]" // start this with a newline so it's below the axis
}, ... ],
"categoryAxis": {
"labelOffset": 15
}
(not my fiddle, I just found it online)
Related
I try to learn amCharts and now I stuck with changing tooltip format from date to datetime. There is jsfiddle what I have now: http://jsfiddle.net/m1a45zur/2/ The tooltip label which I want to change from date to only time is in red circle in this screenshot
I think that I should modify this part of code:
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
but I can't find in documentation any options that can change this :/
You can change the category tooltip by setting categoryBalloonDateFormat in your chartCursor. For example:
"chartCursor": {
// ....
"categoryBalloonDateFormat": "JJ:NN:SS",
// ....
},
You can find more information about formatting dates here
Updated fiddle
On an unrelated note, you should remove the duplicate timestamps from your data as the duplicate data is breaking your chart.
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.
I have a line graph with an X axis, with data that doesn't correspond to a dates but are numerical values.
I'd like my x-axis to have it's content appropriately spaced according to it's value on the axis.
However, as you will see in the example, there's equal spacing between each datapoint even though there are unequal jumps in the value on the x axis.
https://jsfiddle.net/shwaydogg/xfxk5gwu/3/
"dataProvider": [
{
x:1,
visits: 1,
}, {
x:1.1,
visits: 2,
}, {
x:1.3,
visits: 3,
}, {
x:5,
visits: 4,
}, {
x:10,
visits: 5,
}, {
x:100,
visits: 6,
}, {
x:10000,
visits: 7,
}, {
x:100000,
visits: 8,
},
],
note: I am aware of equalSpacing, but it's default value is false, it has not changed anything for me yet and seems to be geared towards keeping equal spacing if you are using parseDates which I am not.
An official response from the amCharts support team shows how to use XY Chart as #gerric indicated correctly:
Serial charts are not appropriate if you're using a numeric x-axis as the categoryAxis uses the exact values for each tick like string-based categories. You'll want to use an XY chart instead, which will create a full numeric x-axis with appropriate scaling.
I made some minor modifications to your existing chart here: https://jsfiddle.net/xfxk5gwu/4/
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
...
Instead of using an XY chart that loses some of the features of the serial chart I opted for a bit of a hack. In the dataprovider I added all the missing x-axis values without giving them a y-value (a value that corresponded with one of the lines). e.g.:
"dataProvider": [
{
x:1,
visits: 0,
},{
x:1.25,
visits: 1,
},{
x:1.75,
visits: 2,
},{
x:2.25,
visits: 3,
}
]
changed to =>
"dataProvider": [
{
x:1,
visits: 0,
},{
x:1.25,
visits: 1,
},{
x:1.5 //Added
},{
x:1.75,
visits: 2,
},{
x:2 //Added
},{
x:2.25,
visits: 3,
}
]
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
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.