I'm creating a bubble chart using AMCHARTS and would like each bubble to be labeled, but it's seeming like a bit of trouble!
The label's reference point is lost on me (seems to be the top left?) and I can't seem to get it to move to where I want it to.
My javascript is as below, and a wee fiddle is attached.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 14,
"value": 59
}],
"allLabels": [{
"text": "Label",
"bold": true,
"y": 10,
"x": 14
}],
"graphs": [{
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}],
"marginLeft": 46,
"marginBottom": 35
});
JSFiddle
You are using the global labels. I guess you want to label each bubble.
You have to do this in the "graphs" segment, like this:
"graphs": [{
"labelText": "[[value]]",
"labelPosition": "middle"
}],
See docs here
Reworked JSFiddle
Related
I am using AMCharts and I'm trying to call another function on clickGraphItem event with parameters.
The parameters and their values that I need are:
Year: 2017 (which is my category in the graph)
Gender: Men/Women (which is available in title or valueField. So getting an output from either of them works for me.)
On using event.item.category I do get my desired output but the event.item.valueField and event.item.title gives me undefined. I even tried using all other options but the output I get is undefined. Please suggest a way I can get the output I am looking for?
var chart = AmCharts.makeChart("chartYearlydiv", {
"type": "serial",
"theme": "light",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": chartYearlyData,
"valueAxes": [{
"stackType": "3d",
"position": "left",
//"axisAlpha": 0.3,
//"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Men",
"type": "column",
"color": "#000000",
"valueField": "Men"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Women",
"type": "column",
"color": "#000000",
"valueField": "Women"
}],
"categoryField": "Year",
"plotAreaFillAlphas": 0.1,
"depth3D": 60,
"angle": 30,
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
alert(event.item.category + event.item.title);
LoadMonthly(event.item.category);
}
}],
"export": {
"enabled": true
}
});
You can get the value in the event by using event.item.values.value. See the docs for graphDataItem which is the object you're pulling your category from in the clickGraphItem event as the values property contains that and more. The clickGraphItem event also gives you access to the graph object the item belongs to, allowing you to pull the title property directly from it through event.graph.title.
I'm trying to put a label inside the bars in an AmChart graph. If the label is to long it does not show. Pleas look at the JsFiddle, https://jsfiddle.net/o3518u19/4/,
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"categoryField": "year",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start",
"position": "left"
},
"columnSpacing": 0,
"columnWidth": 0.6,
"graphs": [ {
"balloonText": "Income:[[value]]",
"labelText": "HEJ",
"labelPosition": "inside",
"labelRotation": 270,
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
},
{
"balloonText": "Income:[[value]]",
"labelRotation": 270,
"labelText": "HEJA",
"labelPosition": "inside",
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
}],
"valueAxes": [ {
"stackType": "regular",
"position": "top",
"axisAlpha": 0
} ],
"dataProvider": [ {
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}]
} );
where "HEJ" is shown but not "HEJA". I don't want to make the columns wider than 25.
Use "showAllValueLabels":true, this will show the longer labels and override the checking if they fit.
{
"balloonText": "Income:[[value]]",
"labelRotation": 270,
"labelText": "HEJA",
"showAllValueLabels":true, /// add this line
"labelPosition": "inside",
"color": "#fff",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Income",
"type": "column",
"valueField": "income",
"fixedColumnWidth": 25
}
Additionaly, you can use "labelOffset" to further adjust the position of the label (in your case verticaly)
I'm trying to create an amCharts chart, based on three values but the result is completely messed up: the chart goes completely to the left, doesn't pin all the node results or shows all the data.
Please Help
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id":"v1",
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id": "g1",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "Tweets"
},
{
"id": "g2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#00FF00",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "green line",
"useLineColorForBulletBorder": true,
"valueField": "Retweets"
}],
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 30
},
"chartCursor": {
"cursorPosition": "mouse",
"pan": true,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"position": "top"
},
exportConfig:{
menuRight: '20px',
menuBottom: '50px',
menuItems: [{
icon: 'http://www.amcharts.com/lib/3/images/export.png',
format: 'png'
}]
},
"dataProvider":
[{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73},{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70}]
}
);
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart(){
//chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
chart.zoomToIndexes(0, 10);
}
http://jsfiddle.net/srp8313j/52/
The order of data points is important. For date-based charts, the data points need to come in ascending order, from oldest to the newest. While in your data they are running backwards. To fix this, simply change the order of the data points:
"dataProvider": [
{"date":"2016-03-02","Tweets":39,"Exposure":541723,"Retweets":70},
{"date":"2016-03-03","Tweets":35,"Exposure":477493,"Retweets":17},
{"date":"2016-03-04","Tweets":40,"Exposure":263687,"Retweets":60},
{"date":"2016-03-05","Tweets":22,"Exposure":134128,"Retweets":13},
{"date":"2016-03-06","Tweets":20,"Exposure":56490,"Retweets":6},
{"date":"2016-03-07","Tweets":91,"Exposure":930904,"Retweets":58},
{"date":"2016-03-08","Tweets":98,"Exposure":510558,"Retweets":129},
{"date":"2016-03-09","Tweets":116,"Exposure":657912,"Retweets":30},
{"date":"2016-03-10","Tweets":235,"Exposure":1637137,"Retweets":48},
{"date":"2016-03-11","Tweets":96,"Exposure":633286,"Retweets":73}
]
Updated fiddle.
I have a chart that shows percentages, so I don't want to go past 100 on the valueAxis. For some reason, valueAxis.maximum isn't working for me. Here's a copy of my chart function. The chart ends up showing with 110 maximum in the valueAxis. Am I missing a property somewhere?
Here's a link to a jsFiddle. Any help is appreciated.
var chart = AmCharts.makeChart(chartDiv, {
"theme": "light",
"type": "serial",
"dataProvider": nflDailyData,
"graphs": [{
"balloonText": "[[value]]% for [[category]]",
"fillAlphas": 0.5,
"lineAlpha": 0.2,
"title": "Percent Accuracy",
"type": "column",
"valueField": "value",
"legendValueText": "",
"fillColorsField": "color"
}],
"titles": [
{
"text": "NFL Daily Past 7-Day Evaluation",
"size": 26,
"color": "#3333cc"
}
],
"startDuration": 1,
"depth3D": 20,
"angle": 30,
"rotate": false,
"categoryField": "category",
"valueAxis": {
"minimum": 0,
"maximum": 100,
"unit": "%",
"unitPosition": "right"
},
"categoryAxis": {
"gridPosition": "start",
"fillAlpha": 0.05,
"position": "left",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
Since the chart supports multiple value axes, there's no single "valueAxis" parameter. It's an array of objects, and it's in plural: valueAxes. So in your chart configuration, you need to specify it as such, event if you have just one value axis:
"valueAxes": [{
"minimum": 0,
"maximum": 100,
"unit": "%",
"unitPosition": "right"
}]
The way you have it now is simply ignored by the chart, hence maximum not being taken into account.
I am trying to replicate the following chart
The problem I have is how to make the legend in the left and in the middle of every box that stacks (Series word in each box). I have searched amCharts but no luck. Is there a way to do it or how to override or extend amCharts in order to achieve this behavior?
Thanks a lot.
For displaying value labels, use labelText proeprty.
Just set it to "[[value]]" in your graphs. I.e.:
"graphs": [{
...
"labelText": "[[value]]"
}]
For the "legend" on the left, you will need to use guides. It allows placing lines (optional) and labels at some preset values. You will need to pre-calculate the values at which to place them, though.
Here's a complete working example:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"year": 2011,
"value1": 13,
"value2": 5,
"value3": 4
}, {
"year": 2012,
"value1": 22,
"value2": 4,
"value3": 5
}, {
"year": 2013,
"value1": 35,
"value2": 7,
"value3": 4
}],
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"tickLength": 0,
"totalText": "[[total]]",
"guides": [{
"value": 6.5,
"label": "Series #1",
"fontSize": 15
}, {
"value": 15.5,
"label": "Series #2",
"fontSize": 15
}, {
"value": 20,
"label": "Series #3",
"fontSize": 15
}]
}],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#a0b1cf",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value1"
}, {
"fillAlphas": 1,
"fillColors": "#c5cde0",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value2"
}, {
"fillAlphas": 1,
"fillColors": "#dde6eb",
"labelText": "[[value]]",
"lineAlpha": 1,
"lineColor": "#000",
"title": "value1",
"type": "column",
"color": "#000000",
"valueField": "value3"
}],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
});
#chartdiv {
width: 400px;
height: 400px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>