Retrieving data to show in amcharts - javascript

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.

Related

Amchart Dont show data where value =0

Im working in a graph where data comes from server like Object's Array.
I dont need some data to show in my graph, data where number=0, and i want to know if amchart have some function to dont show this.
Here is an example of the code:
var data =[
{'number':1, 'date':'11:00-11:59', 'duration': 3},
{'number':2, 'date':'12:00-12:59', 'duration':6},
{'number':4, 'date':'13:00-13:59', 'duration':12},
{'number':8, 'date':'14:00-14:59', 'duration':8},
{'number':0, 'date':'14:00-14:59', 'duration':0}
];
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"dataProvider": data,
"valueAxes": [{
"id": "number",
"position": "left",
"title": "N Llamadas"
},{
"id": "durationAxis",
"position": "right",
"title": "duration"
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"valueField": "number"
},{
"bullet": "square",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 1,
"dashLengthField": "dashLength",
"legendValueText": "[[value]]",
"title": "duration",
"fillAlphas": 0,
"valueField": "duration",
"valueAxis": "durationAxis"
}],
"depth3D": 20,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 0
},
"export": {
"enabled": true
}
});
In this case i dont want to show the last item of the array because number is 0, i shouldnt create a new array for reasons project.
Thanks in advance
Not showing a graph object when a value is 0 is pretty much impossible without modifying the array due to the bullets of the line chart (you can hide a column using alphaField, but you can't remove the bullet). You can write an init handler that nulls out zero values so that the chart doesn't show the point or column at all upon chart initialization:
//Nulls out any field that contains a zero, effectively hiding the point/column from the chart.
//Note that the category will still be visible if both points are null unless you null out that category as well.
AmCharts.addInitHandler(function(chart) {
var valueFields = chart.graphs.map(function(graph) {
return graph.valueField;
});
chart.dataProvider.forEach(function(dataItem) {
valueFields.forEach(function(valueField) {
if (dataItem[valueField] === 0) {
dataItem[valueField] = null;
}
})
})
}, ["serial"]);
Note that this will effect the data export (csv, xlsx, json) as well. If you want to re-add those zero values to the data export, you can use the processData callback in the export plugin to modify your data to re-add the zeroes:
"export": {
"enabled": true,
//re-add nulled out values as zeroes for data export:
"processData": function(data, cfg) {
var valueFields = this.setup.chart.graphs.map(function(graph) {
return graph.valueField;
});
data.forEach(function(dataItem) {
valueFields.forEach(function(valueField) {
if (dataItem[valueField] == null) {
dataItem[valueField] = 0;
}
});
});
return data;
}
}
Demo

MongoDB & AMCharts

I am trying to create an AMchart with some values from my mongoDB using mongoose and Node.js. Since Node.js is asynchronous I can't pass my values from the query to the chart, If I put the chart creation inside the same function scope as the query when I do the calling in the handlebars I get nothing since the chart creation is inside the query, but this is the onñy way I have been able to retrieve the data. My code is as follows:
<script>
var Edad = require('../models/edad');
var data = [];
Edad.find().lean().exec(function(err, docs) {
if (err) throw err;
data = docs;
for (var i in data) {
delete data[i]._id;
delete data[i].__v;
}
});
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "patterns",
"dataProvider": data,
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "Edad: [[category]]: <b> Numero Vacunas: [[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "vacunas"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "edad",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
</script>
<div id="main-wrapper">
<div class="container">
<article class="box post">
<header>
<h2>Vacunas Por Edad</h2>
<p>Estadisticas para el numero de vacunas aplicadas por cada grupo de edad de los pacientes</p>
</header>
<div id="chartdiv"></div>
</article>
</div>
</div>
I Need the data from the JSON "data" to be the value for "data provider" in the chart creation, any help would be much appreciated
You could try to build the chart and then add the data later using validateNow:
<script>
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "patterns",
"dataProvider": [],
"valueAxes": [ {
"gridColor": "#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "Edad: [[category]]: <b> Numero Vacunas: [[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "vacunas"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "edad",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
var Edad = require('../models/edad');
Edad.find().lean().exec(function(err, data) {
if (err) throw err;
for (var i in data) {
delete data[i]._id;
delete data[i].__v;
}
chart.validateNow(data, false);
});
</script>

Trouble with loading AmCharts: ERR FILE NOT FOUND

I'm making a Chrome Extension where I use AmCharts.
The chart does not load and I get the following errors.
imglens.svg:1 GET chrome-extension://cdjjnkkllgppipkdeobjempdfnafkjcm/charts/imglens.svg net::ERR_FILE_NOT_FOUND
imgdragIconRoundBig.svg:1 GET chrome-extension://cdjjnkkllgppipkdeobjempdfnafkjcm/charts/imgdragIconRoundBig.svg net::ERR_FILE_NOT_FOUND
However I looked through the AmCharts folder . No such files exist.
What should do I do?
Code Snippet
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"proCandlesticks": pro,
"closeField": "close",
"fillColors": "#117e1a",
"highField": "high",
"lineColor": "#117e1a",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#7b1111",
"negativeLineColor": "#7b1111",
"openField": "open",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true
},
"dataProvider": data,/*
"responsive": {
"enabled": true
},*/
"pathToImages": "/charts/img"
},2000);
Try re-downloading the amcharts zip file. All those files exist in the amcharts/images/ folder. pathToImages needs to point to the folder where the chart icons and images are stored if you moved those files to a different folder (by default it looks in the images folder). You'll need the trailing slash as well if you're using a different path (i.e. /charts/img/)

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"
}]

Categories