Am using amcharts plugin to create bar graph. Is there any ways, I can reduce distance/gap between bars both x an y axis in the graph. Here is the fiddle
Code
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [{
"name": "John",
"startTime": 0,
"endTime": 11,
"color": "#FF0F00"
}, {
"name": "Joe",
"startTime": 0,
"endTime": 13,
"color": "#FF9E01"
}, {
"name": "Susan",
"startTime": 0,
"endTime": 18,
"color": "#F8FF01"
}, {
"name": "Eaton",
"startTime": 0,
"endTime": 19,
"color": "#04D215"
}],
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]<br>ends at [[endTime]]",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}],
"rotate": true,
"columnWidth": 0.2,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
},
"export": {
"enabled": true
}
});
To make the graph smaller, and reduce the margin, you have to change the columnWidth and the height in the css:
fiddle
By changing the height of the graph to 200px:
#chartdiv {
width : 100%;
height : 200px;
}
And setting the columnWidth to 0.8, I think you get what you want :)
addendum
To remove the horizontal gray lines you can set the gridAlpha to 0 in the categoryAxis
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
Updated the fiddle
Related
I'm using amchart with react.
I want to change bullet background color from black to red when I hover the bullet.
and is there any way to add bullet mouse over addListener event???
const config = {
"listeners": [
{
"event": "changed",
"method": (e) => {
this.changeChart(e)
}
}
],
"type": "serial",
"addClassNames": true,
"theme": "light",
"marginRight": 80,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": false,
"balloon": {
"adjustBorderColor": true,
"color": "#000000",
"cornerRadius": 3,
"borderColor": "#dddddd",
"borderThickness": 0,
"fillColor": "#FFFFFF",
"drop": true,
"fillAlpha": 0,
"horizontalPadding": 0,
"verticalPadding": 0,
"pointerOrientation": "down"
},
"graphs": [{
"bullet": "round",
"bulletSize": 10,
"customBulletField": "customBullet",
"bulletBorderAlpha": 1,
"bulletHitAreaSize" : 0,
"bulletColor": "#919191",
"bulletBorderThickness": 1,
"fillAlphas": 0,
"fillColorsField": "lineColor",
"legendValueText": "[[value]]",
"lineColorField": "lineColor",
"title": "value",
"valueField": "value",
"balloonText": '',
"balloonFunction": function (item) {
return makeBalloonHtml(item.dataContext.value, item.dataContext.changeValue);
}
}],
"chartCursor": {
"categoryBalloonDateFormat": "YYYY MMM DD",
"cursorAlpha": 0,
"fullWidth": false,
"categoryBalloonEnabled": false,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"gridAlpha": 0,
},
"valueAxes": [{
"dashLength": 3,
"axisAlpha": 0.1,
"minimum": 0,
"maximum": this.state.maxValue + (this.state.maxValue / 4.5)
}],
"dataProvider": this.state.dataProvider
};
I'm using amchart with react.
I want to change bullet background color from black to red when I hover the bullet.
and is there any way to add bullet mouse over addListener event???
I figured it out.
we can use like this event method
{
"event": "rollOverGraphItem",
"method": (e) => {
console.log("rollOverGraphItem");
}
},
{
"event": "rollOutGraphItem",
"method": (e) => {
console.log("rollOutGraphItem")
}
}
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>