Adjusting axis ranges in Amcharts - javascript

I would like to make bubble chart like the following using amcharts and I have come across a bubble chart example in amcharts (1). I would like to get some help/guidance on how to make axis range like the sample which I have given below. Any help would be appreciated.
/**
* Plugin: Arrange data pints into separate value "bands"
* Relies on `bandValueScope` being there in the chart config
*/
AmCharts.addInitHandler( function( chart ) {
// check if bandValueScope is set
if ( chart.bandValueScope === undefined )
return;
// iterate through data points and apply step value
for ( var i = 0; i < chart.dataProvider.length; i++ ) {
var add = chart.bandValueScope * i;
for ( var x = 0; x < chart.graphs.length; x++ ) {
chart.dataProvider[ i ][ chart.graphs[ x ].yField ] += add;
}
}
// set up Y axis labelFunction to recalculate those values as well
for ( var i = 0; i < chart.valueAxes.length; i++ ) {
var axis = chart.valueAxes[ i ];
if ( axis.applyBandValues ) {
// set up labelFunction to recalculate labels
axis.labelFunction = function( value, a, b ) {
var newValue = value - Math.floor( value / chart.bandValueScope ) * chart.bandValueScope;
if ( newValue === 0 )
return "";
newValue = newValue.toString();
if ( axis.unit )
newValue += axis.unit;
return newValue;
}
// go through guides and recalculate their values as well
if ( axis.guides && axis.guides.length ) {
for ( var x = 0; x < axis.guides.length; x++ ) {
var add = chart.bandValueScope * x;
var guide = axis.guides[ x ];
if ( guide.value !== undefined )
guide.value += add;
if ( guide.toValue !== undefined )
guide.toValue += add;
}
}
}
}
}, [ "xy" ] );
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 70,
"balloon": {
"fixedPosition": true,
},
/**
* `bandValueScope` is a custom paramater which will be used by a plugin
* to restructure data so that each data point is recalculated into a new
* band
*/
"bandValueScope": 50,
"dataProvider": [ {
// North America
// Home
"x1": 35,
"y1": 30,
"v1": 35,
// Health
"x2": 31,
"y2": 26,
"v2": 35,
// Life
"x3": 21,
"y3": 32,
"v3": 20,
// Long term
"x4": 23,
"y4": 35,
"v4": 29,
// Auto
"x5": 11,
"y5": 33,
"v5": 25,
// Theft
"x6": 10,
"y6": 38,
"v6": 15
}, {
// Asia
// Home
"x1": 50,
"y1": 28,
"v1": 20,
// Health
"x2": 55,
"y2": 25,
"v2": 20,
// Life
"x3": 38,
"y3": 28,
"v3": 20,
// Long term
"x4": 42,
"y4": 32,
"v4": 20,
// Auto
"x5": 25,
"y5": 31,
"v5": 20,
// Theft
"x6": 20,
"y6": 39,
"v6": 20
}, {
// Europe
// Home
"x1": 90,
"y1": 18,
"v1": 100,
// Health
"x2": 85,
"y2": 14,
"v2": 85,
// Life
"x3": 70,
"y3": 29,
"v3": 50,
// Long term
"x4": 80,
"y4": 22,
"v4": 40,
// Auto
"x5": 50,
"y5": 25,
"v5": 40,
// Theft
"x6": 40,
"y6": 35,
"v6": 20
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"title": "Number of Policies Issued",
"titleColor": "#ff7f27",
"titleFontSize": 18,
}, {
"axisAlpha": 0,
"position": "left",
"minimum": 0,
"minVerticalGap": 20,
"unit": "%",
"title": "Avg. Normalized Premiums",
"titleFontSize": 18,
"applyBandValues": true,
"guides": [ {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#00c",
"fillAlpha": 0.1,
"label": "North\nAmerica",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#c00",
"fillAlpha": 0.1,
"label": "Asia",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#0c0",
"fillAlpha": 0.1,
"label": "Europe",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
} ]
} ],
"startDuration": 1.5,
"sequencedAnimation": false,
"legend": {
"position": "right",
"markerType": "circle"
},
"graphs": [ {
"balloonText": "[[title]]: [[value]]",
"title": "Home",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v1",
"xField": "x1",
"yField": "y1",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#a6cf28"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Health",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v2",
"xField": "x2",
"yField": "y2",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#7fadd1"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Life",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v3",
"xField": "x3",
"yField": "y3",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#f9c900"
}, {
"title": "Long term",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v4",
"xField": "x4",
"yField": "y4",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff8a00"
}, {
"title": "Auto",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v5",
"xField": "x5",
"yField": "y5",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff1568"
}, {
"title": "Theft",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v6",
"xField": "x6",
"yField": "y6",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#689494"
} ]
} );
(1.) https://codepen.io/team/amcharts/pen/05584b0b6afd661337b3ce5c8d6a14e3


You could offset both value axes of your bubble chart to center them. However, the offset values are defined in pixels, so unfortunately the axes will not keep their position when the chart is zoomed or panned. So you'll probably have to disable these features in this case.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
// ...
"valueAxes": [{
"position": "bottom",
"offset": -200,
"minimum": 0,
"maximum": 100
}, {
"position": "left",
"offset": -200,
"minimum": 0,
"maximum": 100
}]
});
Here's a Codepen demo: https://codepen.io/team/amcharts/pen/137ecc09f89b5303b66944e4cf278b14?editors=0010.
You could also use minimum and maximum values for both value axes to make it easier to center your axes.
ValueAxis offset: https://docs.amcharts.com/3/javascriptcharts/ValueAxis#offset

Related

ClickMarker is not working in XY Amcharts

I have a requirement where I need to use customlegends in XY Amcharts.
I have implemented them, but When I have added event listeners to those legends, the function wasnt triggered. I dont know the reason, can anyone correct me what I have made a mistake.
You can check the following link for the output:
jsfiddle.net/u371jyjs/3/

clickMarker is a legend-specific event, not a top-level chart event. Put the listener for it inside the legend object:
legend: {
// ...
listeners: [{
"event": "clickMarker",
"method": function(event) {
// toggle the marker state
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow();
}
}]
}
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"path": "https://www.amcharts.com/lib/3/",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 2,
"value": 59,
"y2": 5,
"x2": 3,
"value2": 44,
"label": "Hello",
"category": "0",
"column-1": 32
}, {
"y": 5,
"x": 8,
"value": 50,
"y2": 15,
"x2": 8,
"value2": 12,
"label": "Hi",
"category": "1000",
"column-1": 14
}, {
"y": 10,
"x": 8,
"value": 19,
"y2": 4,
"x2": 6,
"value2": 35,
"label": "Yo"
}, {
"y": 6,
"x": 5,
"value": 65,
"y2": 5,
"x2": 6,
"value2": 168,
"label": "Howdy"
}, {
"y": 15,
"x": 4,
"value": 92,
"y2": 13,
"x2": 8,
"value2": 102,
"label": "Hi there"
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": 2,
"x2": 0,
"value2": 41,
"label": "Morning"
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 3,
"value2": 16,
"label": "Afternoon"
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0,
"integersOnly": true,
//"labelRotation": 45,
"labelFunction": function(value) {
// define categories
var cats = [
"Nick",
"Sarah",
"Kevin",
"Dominick",
"Christy",
"Kate",
"Julian",
"Anita",
"Mike",
"Kyle",
"Tyrese"
];
return cats[value];
}
}, {
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "[[label]]",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "[[label]]",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
}],
"legend": {
"switchable": true,
"textClickEnabled": true,
"data": [{
title: "One",
color: "#3366CC",
hidden: true
}, {
title: "Two",
color: "#FFCC33"
}],
"listeners": [{
"event": "clickMarker",
"method": function(event) {
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow()
}
}]
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="clicked">
</div>

Amcharts: Put dots without line in serial graphs

i am working with amcharts and i need to put some dots on specific date but not join them together. I tried with guides but i couldn't.
My chart has category field: date max zoom is hourly.
This is my chart with the red dots i drew to show you.
I want them in different date but with the same height
This is my code:
var weatherChart = AmCharts.makeChart("weatherChart", {
"type": "serial",
"theme": "light",
"language": "es",
"marginRight": 80,
"mouseWheelZoomEnabled": true,
"zoomOutText": "Mostrar todo",
"autoMarginOffset": 20,
"gridAboveGraphs": false,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"axisColor": "#969696",
"axisAlpha": 1,
"axisThickness": 2,
"offset": 10,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
"title": "Temperatura y velocidad del viento"
}, {
"id": "v2",
"axisColor": "#969696",
"axisThickness": 2,
"axisAlpha": 1,
"offset": 10,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "right",
"title": "Humedad"
},{
"id": "v3",
"axisColor": "#969696",
"axisThickness": 0,
"axisAlpha": 0,
"labelsEnabled": false,
"offset": 50,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
}],
"graphs": [{
"id": "g4",
"valueAxis": "v3",
//"fillColorsField": "color",
"fillColors": "#40f947",
"lineColor": "#40f947",
"balloonText": "[[value]]ha",
"fillAlphas": .6,
"lineAlpha": 0.2,
"type": "column",
"title": "Hectareas fumigadas",
"showBalloon": true,
"valueField": "hectares",
"dashLengthField": "hectares_dash"
}, {
"id": "g1",
"valueAxis": "v1",
"balloonText": "[[value]]°",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#ffb014",
"hideBulletsCount": 50,
"title": "Temperatura",
"bulletSize": 5,
"valueField": "temperature",
"dashLengthField": "temperature_dash",
"lineColor": "#ffb014",
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"valueAxis": "v2",
"balloonText": "[[value]]%",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#245be5",
"hideBulletsCount": 50,
"title": "Humedad",
"bulletSize": 5,
"valueField": "humidity",
"dashLengthField": "humidity_dash",
"lineColor": "#245be5",
"useLineColorForBulletBorder": true
}, {
"id": "g3",
"valueAxis": "v1",
"balloonText": "[[value]]km/h",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#63c2f2",
"hideBulletsCount": 50,
"title": "Velocidad del viento",
"valueField": "wind",
"dashLengthField": "wind_dash",
"bulletSize": 5,
"lineColor": "#63c2f2",
"useLineColorForBulletBorder": true
}],
"chartScrollbar": {
"oppositeAxis": false,
"scrollbarHeight": 30,
"dragIcon": "dragIconRectBig"
},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
"pan": true
},
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryAxis": {
"minPeriod": "hh",
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": false
},
"export": {
"enabled": true
}
});

Your best bet is to create a graph specifically for those red dots. You just have to set lineColor to a red color for the bullets, set lineAlpha to 0 so that the lines aren't visible and then add data points for them. You can also set visibleInLegend to false if you don't want a marker for this graph.
var chartData = [{
"date": "2017-06-05 15:47:00",
"hectares": 10,
"temperature": 50,
"wind": 11,
"humidity": 35,
"reddot": 50 //data point for red dot graph
},
{
"date": "2017-06-05 16:47:00",
"hectares": 12,
"temperature": 41,
"wind": 11,
"humidity": 35
},
{
"date": "2017-06-05 17:47:00",
"hectares": 13,
"temperature": 47,
"wind": 12,
"humidity": 31,
"reddot": 50 //data point for red dot graph
},
// ... etc
]
var weatherChart = AmCharts.makeChart("weatherChart", {
// ...
"graphs": [
// ... other graphs omitted
{
"id": "g5",
"bullet": "round",
"valueField": "reddot",
"bulletColor": "#800",
"lineColor": "#800",
"visibleInLegend": false, //optional: hide from legend
"lineAlpha": 0
}
],
// ...
});
Demo:
var chartData = [{
"date": "2017-06-05 15:47:00",
"hectares": 10,
"temperature": 50,
"wind": 11,
"humidity": 35,
"reddot": 55
},
{
"date": "2017-06-05 16:47:00",
"hectares": 12,
"temperature": 41,
"wind": 11,
"humidity": 35,
"reddot": 55
},
{
"date": "2017-06-05 17:47:00",
"hectares": 13,
"temperature": 47,
"wind": 12,
"humidity": 31
},
{
"date": "2017-06-05 18:47:00",
"hectares": 12,
"temperature": 44,
"wind": 8,
"humidity": 37,
"reddot": 55
},
{
"date": "2017-06-05 19:47:00",
"hectares": 12,
"temperature": 43,
"wind": 12,
"humidity": 38
},
{
"date": "2017-06-05 20:47:00",
"hectares": 11,
"temperature": 48,
"wind": 9,
"humidity": 37
},
{
"date": "2017-06-05 21:47:00",
"hectares": 11,
"temperature": 40,
"wind": 12,
"humidity": 32,
"reddot": 55
},
{
"date": "2017-06-05 22:47:00",
"hectares": 15,
"temperature": 44,
"wind": 8,
"humidity": 32
},
{
"date": "2017-06-05 23:47:00",
"hectares": 15,
"temperature": 44,
"wind": 9,
"humidity": 32
},
{
"date": "2017-06-06 00:47:00",
"hectares": 13,
"temperature": 50,
"wind": 10,
"humidity": 32
},
{
"date": "2017-06-06 01:47:00",
"hectares": 11,
"temperature": 41,
"wind": 12,
"humidity": 31
},
{
"date": "2017-06-06 02:47:00",
"hectares": 10,
"temperature": 48,
"wind": 12,
"humidity": 38
},
{
"date": "2017-06-06 03:47:00",
"hectares": 12,
"temperature": 46,
"wind": 12,
"humidity": 36
},
{
"date": "2017-06-06 04:47:00",
"hectares": 15,
"temperature": 48,
"wind": 11,
"humidity": 37
},
{
"date": "2017-06-06 05:47:00",
"hectares": 11,
"temperature": 47,
"wind": 9,
"humidity": 36
},
{
"date": "2017-06-06 06:47:00",
"hectares": 13,
"temperature": 40,
"wind": 9,
"humidity": 36,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 07:47:00",
"hectares": 14,
"temperature": 49,
"wind": 12,
"humidity": 32,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 08:47:00",
"hectares": 10,
"temperature": 47,
"wind": 9,
"humidity": 37,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 09:47:00",
"hectares": 10,
"temperature": 46,
"wind": 10,
"humidity": 33,
"hectares_dash": 0, //reset the dash by setting it to 0
"temperature_dash": 0,
"humidity_dash": 0,
"wind_dash": 0
},
{
"date": "2017-06-06 10:47:00",
"hectares": 13,
"temperature": 47,
"wind": 10,
"humidity": 34,
"reddot": 55
}
]
var weatherChart = AmCharts.makeChart("weatherChart", {
"type": "serial",
"theme": "light",
"language": "es",
"marginRight": 80,
"mouseWheelZoomEnabled": true,
"zoomOutText": "Mostrar todo",
"autoMarginOffset": 20,
"gridAboveGraphs": false,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"axisColor": "#969696",
"axisAlpha": 1,
"axisThickness": 2,
"offset": 10,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
"title": "Temperatura y velocidad del viento"
}, {
"id": "v2",
"axisColor": "#969696",
"axisThickness": 2,
"axisAlpha": 1,
"offset": 10,
"minorGridEnabled": false,
"position": "right",
"title": "Humedad"
}, {
"id": "v3",
"axisColor": "#969696",
"axisThickness": 0,
"axisAlpha": 0,
"labelsEnabled": false,
"offset": 50,
"minorGridEnabled": false,
"position": "left",
}],
"graphs": [{
"id": "g4",
"valueAxis": "v3",
"fillColorsField": "color",
"balloonText": "[[value]]ha",
"fillAlphas": .6,
"lineAlpha": 0.2,
"type": "column",
"title": "Hectareas fumigadas",
"showBalloon": true,
"valueField": "hectares",
"dashLengthField": "hectares_dash",
}, {
"id": "g1",
"valueAxis": "v1",
"balloonText": "[[value]]°",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#ffb014",
"hideBulletsCount": 50,
"title": "Temperatura",
"bulletSize": 5,
"valueField": "temperature",
"dashLengthField": "temperature_dash",
"lineColor": "#ffb014",
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"valueAxis": "v2",
"balloonText": "[[value]]%",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#245be5",
"hideBulletsCount": 50,
"title": "Humedad",
"bulletSize": 5,
"valueField": "humidity",
"dashLengthField": "humidity_dash",
"lineColor": "#245be5",
"useLineColorForBulletBorder": true
}, {
"id": "g3",
"valueAxis": "v1",
"balloonText": "[[value]]km/h",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#63c2f2",
"hideBulletsCount": 50,
"title": "Velocidad del viento",
"valueField": "wind",
"dashLengthField": "wind_dash",
"bulletSize": 5,
"lineColor": "#63c2f2",
"useLineColorForBulletBorder": true
}, {
"id": "g5",
"bullet": "round",
//if this needs to be on a particular value axis, set that here as well
//"valueAxis": "v2",
"valueField": "reddot",
"bulletColor": "#800",
"lineColor": "#800",
"visibleInLegend": false, //optional: hide from legend
"lineAlpha": 0
}],
"chartScrollbar": {
"oppositeAxis": false,
"scrollbarHeight": 30,
"dragIcon": "dragIconRectBig"
},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
"pan": true
},
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryAxis": {
"minPeriod": "hh",
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": false
},
"export": {
"enabled": true
}
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="weatherChart" style="width: 100%; height: 300px;"></div>

amCharts group by Date

I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"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>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?

According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"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>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>

Reduce gap between bars in amcharts serial bar graph

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

how to make graph section of amcharts dynamic

I am creating amcharts from database fields.Here is my code
function Categoriesline(data) {
debugger;
var databind = JSON.parse(data);
var chart = AmCharts.makeChart("chartdiv2", {
"theme": "light",
"type": "serial",
"legend": {
"position": "right",
"fontSize": 9
},
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 20,
"dataProvider": databind,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0.1
}],
"graphs": [{
"balloonText": "[[category]]<br><b>value: [[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 1,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "section1",
"valueField": "section1"
}, {
"balloonText": "[[category]]<br><b>value: [[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 1,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "section2",
"valueField": "section2"
}, {
"balloonText": "[[category]]<br><b>value: [[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 1,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "section3",
"valueField": "section3"
}],
"categoryField": "categorydescription",
"categoryAxis": {
"axisAlpha": 0,
"minHorizontalGap": 60
},
"export": {
"enabled": true
}
});
}
All required data from database i am fetching JSON format.
I want to specify the value axis from json itself.Here in above code instead of hardcoding "section1", "section2","section3" i want to assign it from databind object which is having json key name section.
How can i do this ?
I need to add something like
var graph = [];
var v;
for (var j = 0; j < 6; j++) {
graph[j] = new AmCharts.AmGraph();
graph[j].valueAxis =databind['section'] ; // we have to indicate which value axis should be used
graph[j].title = "Value" + j;
v = j.toString();
graph[j].valueField = databind['value'];
graph[j].bullet = "round";
chart.addGraph(graph[j]);
}
Json format
In above pic foreach section i need different lines to draw(multiple line chart).
[
{
"Section": "Section1",
"duration": "1MCount",
"value": 15},
{
"Section": "Section2",
"duration": "1MCount",
"value": 20},
{
"Section": "Section1",
"duration": "3MCount",
"value": 10},
{
"Section": "Section2",
"duration": "3MCount",
"value": 7},
{
"Section": "Section3",
"duration": "3MCount",
"value": 12}
]
i have added the json details.

Categories