We Keep Coding

Amcharts.js disabling my ammap's legend

so im using both ammap and amcharts in one page. the problem is, the amcharts.js always disabling my ammap's legend and make it invisible.
how do i solve this?
amcharts legend settings :
"legend": {
"width" : "100%",
"maxRows": 1,
"position": "bottom",
// "useGraphSettings": true,
"markerSize": 10,
"align" : "center",
},
ammap legend settings :
"legend" : {
"width": "30%",
"useGraphSettings": true,
"marginRight": 27,
"marginLeft": 27,
"equalWidths": false,
"backgroundAlpha": 0.2,
"backgroundColor": "#000000",
"borderColor": "#ffffff",
"top": 450,
"left": 0,
"horizontalGap": 10,
"data": [ {
"title": "Negeri",
"color": "#BF55EC",
// "customMarker": "https://www.amcharts.com/lib/3/images/car.png"
}, {
"title": "Swasta",
"color": "#32C5D2",
"border" : "#000000"
} ],
}
but i dont think the problem lies in my codes. whenever i commented out amcharts.js it's working again.

Lines Graph are rendering as straight Lines in AM Charts

I am trying to draw Line Graph but these are rendering as a straight line in the bottom of graph area.I have added columns graphs too in it. they are showing properly but Lines Graph are not showing correct just a straight line. I have added the screenshot in the end. Please help.
This is my graph header
var header_graph = [{"balloonText":"[[title]] of [[category]]:[[value]]",
"fillAlphas":"1",
"id":"ProductA",
"title":"Produc A ",
"type":"SmoothedLine",
"valueField":"column2"}];
This is my graph data values
var data_graph = [{"category":"Jan",
"column1":"85", "column2":"24", "column3":"343",
"column4":"85", "column5":"31", "column6":"267",
"column7":"85", "column8":"19", "column9":"439"},......]
This is the whole script to generate the chart
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"depth3D": 2,
"startDuration": 1,
"theme": "light",
"precision": 2,
"valueAxes": [{
"id": "v1",
"title": "",
"position": "left",
"autoGridCount": false,
}, {
"id": "v2",
"title": "",
"gridAlpha": 0,
"position": "right",
"autoGridCount": false
}],
"graphs": header_graph ,
"chartScrollbar": {
"graph": "column2",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "category",
"categoryAxis": {
"parseDates": false,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start"
},
"legend": {
"useGraphSettings": true,
"position": "bottom"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": false
},
"dataProvider": data_graph
});

The chart is drawing your line at scale with respect to your chart's range of values and it looks like your values for the line are very small compared to the rest of your columns. It will look like a straight line near the bottom as a result of this.
You can use a valueScrollbar and let your users zoom in on the valueAxis/Y-axis so they can see the line better. It takes the same properties as a chartScrollbar as you can see in this demo from AmCharts:
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
Outside of that or making your valueAxis maximum smaller, there's not much else you can do.
(Off topic, you should make your values numbers, not strings.)
Edit
You can dynamically set the chart's maximum and minimum using addInitHandler to have the chart determine these value upon chart initialization like so:
//get the maximum and minimum values from the dataProvider
AmCharts.addInitHandler(function(chart) {
var maximum = Number.MIN_VALUE;
var minimum = Number.MAX_VALUE;
chart.dataProvider.forEach(function(data) {
//for each dataProvider element, check the properties that correspond to the chart graphs' valueFields.
chart.graphs.forEach(function(graph) {
if (data[graph.valueField] != null) {
maximum = Math.max(maximum, data[graph.valueField]);
minimum = Math.min(minimum, data[graph.valueField]);
}
});
});
chart.valueAxes[0].maximum = maximum;
chart.valueAxes[0].minimum = minimum;
chart.valueAxes[0].strictMinMax = true;
}, ["serial"]);
Demo

Retrieving data to show in amcharts

I'm trying to show data in a chart, this time, using amchart and angular to consume REST Service.
this is the code to consume service and call amchart:
function GetData($scope, $http){
$http.get('http://localhost/api/v1/index.php/data').
success(function(data){
//$scope.dados = data;
var json = data;
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": data,
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
});
}
this is my html
<body ng-controller="GetData">
<div id="chartdiv" style="width: 100%; height: 500px"></div>
</body>
It is not showing anything

Do you have a completely blank output in your browser? if so check for javascript errors in your browser. this should point you in the right direction.
are you including the amcharts libraries somewhere? I cannot see this in your html or js.
if you are seeing a blank chart, then it is likely that there is a problem with your json, check or post here for help with that.

AmCharts - Line Chart Overflowing graph container

I am trying to get a line graph to display correctly on my site, but for some reason it wants to overflow the graph container. I have tried reset the box-sizing to initial, setting overflow hidden on all child elements of the graph and nothing seems to be working. I have no idea why this is happening and was wondering if anyone had come across this issue before themselves?
I've added an image below of what I am currently getting and underneath that, the object that is being used to set up the line graph.
{
"type": "serial",
"theme": "light",
"marginRight": 80,
"autoMarginOffset": 20,
"marginTop": 7,
"dataProvider": queryData.data.result,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left"
}],
"mouseWheelZoomEnabled": true,
"graphs": [{
"id": "g1",
"balloonText": "[[value]]",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "value",
"useLineColorForBulletBorder": true,
"balloon": {
"drop": true
}
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"limitToGraph": "g1"
},
"categoryField": "name",
"dataDateFormat": "DD/MM/YYYY HH:NN:SS",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
}
}

This might be happening if you are using <base href> directive on your web page. In those cases references to masking filters in SVG do not work properly, hence lines protruding from plot area.
To avoid that simply add the global baseHref setting line to your code:
AmCharts.baseHref = true;
Please note that this must be a standalone line (not a part of chart config) and go before any of the code that creates charts.

How to add labels to pie charts in amCharts?

The following is the function used to generate a pie chart. Everything is working fine, except for the addLabel parameter.
graphSentiChart:function(graphData) {
if(graphData.length < 1){
$('.dataContentStatsPie').html('No data available')
}
// $(".dataContentAllPie").empty();
var piechart = AmCharts.makeChart("chartPie", {
"type": "pie",
"theme": "light",
"autoMargins": true,
"marginTop": 0,
"marginBottom": 10,
"marginLeft": 0,
"marginRight": 0,
"dataProvider": graphData,
"titleField":"key",
"valueField": "value",
"addLabel": (0, 25, 'Total Tweets= 360'),
"startDuration":0,
"responsive": {
"enabled":true
},
"legend":{
"autoMargins":false,
"marginLeft":20,
"enabled": true,
"spacing":20,
"markerType":"circle",
"horizontalGap" :20,
},
"labelsEnabled":false,
//"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"colorField": "color",
"innerRadius": "60%",
"export": {
"enabled": true,
"libs": {
"path": "http://amcharts.com/lib/3/plugins/export/libs/"
}
}
});
What I have given in the addLabel parameter is not being taken and the label is also not getting shown. Can anybody help me on this?

There is no such property in amCharts addLabel. There is a method, which can be used to add labels to an already existing chart object.
To specify labels in the JSON config of the chart, use allLabels:
"allLabels": [{
"x": 0,
"y": 25,
"text": "Total Tweets= 360"
}]