Develop Reference

unable to call onchange function on windows load

window.onload = function (){
$("#work_sanctioned_year").change();
};
$(document).ready(function(){
$("#work_sanctioned_year").change();
});
$("#work-sanctioned-year").change(function(){
var work_sanctioned_year = $(this).val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
});
when m selecting something from the dropdown its working. but when what m trying to do is call the function with the first value by default.I have tried both window.onload method and .ready function individually but still function is not getting called.. and also m not getting error in console related to this so this is making it harder to spot what actually is wrong over here

<script>
function work_sanctioned(){
console.log('onchange');
var work_sanctioned_year = $("#work-sanctioned-year").val();
alert(work_sanctioned_year);
$.ajax({
url: 'get_data.php',
type: 'post',
data: {work_sanctioned_year:work_sanctioned_year},
dataType: 'json',
success:function(response){
FusionCharts.ready();
}
});
FusionCharts.ready(function() {
var dataChart = new FusionCharts({
"type": "overlappedBar2d",
"renderAt": "chart-5",
"width": '100%',
"height": '400',
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Major League Baseball - Season Rankings",
"subCaption": "Teams in the Lead",
"xAxisName": "Team",
"yAxisName": "Position",
"theme": "fusion",
"showValues": "0"
},
"categories": [{
"labelFontSize": "13",
"category": [{
"label": "Boston Red Sox"
}, {
"label": "New York Yankees"
}, {
"label": "Tampa Bay Rays"
}, {
"label": "Toronto Blue Jays"
}, {
"label": "Baltimore Orioles"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}, {
"label": "Kansas City Royals"
}, {
"label": "Cleveland Indians"
}, {
"label": "Detroit Tigers"
}, {
"label": "Minnesota Twins"
}, {
"label": "Chicago White Sox"
}]
}],
"dataset": [{
"seriesname": "Matches",
"data": [{
"value": parseInt(document.getElementById("work_sanctioned").value)-4650
}, {
"value": "84"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}, {
"value": "86"
}, {
"value": "85"
}, {
"value": "88"
}, {
"value": "83"
}, {
"value": "86"
}]
}, {
"seriesname": "Wins",
"data": [{
"value": "57"
}, {
"value": "54"
}, {
"value": "42"
}, {
"value": "39"
}, {
"value": "24"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}, {
"value": "46"
}, {
"value": "38"
}, {
"value": "35"
}, {
"value": "29"
}, {
"value": "25"
}]
}]
}
})
.render();
});
}
</script>
and then called this on window.onload as well as on select property onchange
<select id="work-sanctioned-year" onChange="work_sanctioned()" style="max-width:40%;min-width:20%; margin:auto;">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
finally on window.onload
<script>
window.onload = function (){
work_sanctioned();
};
</script>

eCharts -- Simple stacked line chart not showing data

I am new to eCharts and I am trying to get a stacked line chart to work. The tooltip shows the data correctly, but there is no y-axis scale and no lines or area fills. If I remove the "stack: 'a'" options from the 'series' section, a non-stacked version of the chart renders correctly. My options and data are as follows:
var myChart = echarts.init(document.getElementById('main'));
var option = {
"animation": false,
"legend": {
"show": true,
"top": "middle",
"left": "right",
"orient": "vertical"
},
"title": {
"text": "Total Raised by Type, Month and Year",
"left": "center"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
}
},
"dataset": {
"source": [
[
null,
"Gifts",
"In Kind",
"Pledges"
],
[
"Jul 2017",
"2508",
"1",
"2594"
],
[
"Aug 2017",
"3512",
"2",
"3631"
],
[
"Sep 2017",
"7625",
"4",
"7885"
],
[
"Oct 2017",
"8026",
"4",
"8300"
],
[
"Nov 2017",
"9431",
"5",
"9753"
],
[
"Dec 2017",
"15050",
"8",
"15563"
],
[
"Jan 2018",
"9030",
"5",
"9338"
],
[
"Feb 2018",
"7525",
"4",
"7781"
],
[
"Mar 2018",
"6020",
"3",
"6225"
],
[
"Apr 2018",
"8528",
"4",
"8819"
],
[
"May 2018",
"13043",
"7",
"13488"
],
[
"Jun 2018",
"10033",
"5",
"10375"
],
[
"Jul 2018",
"4311",
"4",
"2159"
],
[
"Aug 2018",
"6036",
"5",
"3022"
],
[
"Sep 2018",
"13106",
"11",
"6563"
],
[
"Oct 2018",
"13796",
"12",
"6908"
],
[
"Nov 2018",
"16210",
"14",
"8117"
],
[
"Dec 2018",
"25867",
"23",
"12953"
],
[
"Jan 2019",
"15520",
"14",
"7772"
],
[
"Feb 2019",
"12934",
"11",
"6477"
],
[
"Mar 2019",
"10347",
"9",
"5181"
],
[
"Apr 2019",
"14658",
"13",
"7340"
],
[
"May 2019",
"22418",
"20",
"11226"
],
[
"Jun 2019",
"17245",
"15",
"8636"
],
[
"Jul 2019",
"1847",
"2",
"1696"
],
[
"Aug 2019",
"2586",
"3",
"2374"
],
[
"Sep 2019",
"5616",
"6",
"5155"
],
[
"Oct 2019",
"5911",
"6",
"5426"
],
[
"Nov 2019",
"6946",
"7",
"6375"
],
[
"Dec 2019",
"11084",
"11",
"10173"
],
[
"Jan 2020",
"6650",
"7",
"6104"
],
[
"Feb 2020",
"5542",
"6",
"5087"
],
[
"Mar 2020",
"4433",
"5",
"4069"
],
[
"Apr 2020",
"6281",
"6",
"5765"
],
[
"May 2020",
"9606",
"10",
"8817"
],
[
"Jun 2020",
"7389",
"8",
"6782"
]
]
},
"xAxis": {
"type": "category",
"axisLabel": {
"rotate": 90
}
},
"yAxis": [
{
"type": "value",
"axisLabel": {
"formatter": "${value}"
}
}
],
"series": [
{
"type": "line",
"areaStyle": {},
"stack": "a"
},
{
"type": "line",
"areaStyle": {},
"stack": "a"
},
{
"type": "line",
"areaStyle": {},
"stack": "a"
}
]
};
myChart.setOption(option);
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I've been able to get every other chart type I need to work as expected except this one. What am I missing?

Don't use null as name for your first dimension but some arbitrary string like 'date':
"source": [
[
"date",
"Gifts",
"In Kind",
"Pledges"
], [...]

Ngx-Charts show all x axis values but alternate x-axis labels

I am currently working on ngx charts, for examples i have 12 x-axis every values need to be plotted in graph, but only alternate x-axis label need to be displayed.
html code
<ngx-charts-area-chart [view]="view" [scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
[xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [results]="multi" (select)="onSelect($event)">
</ngx-charts-area-chart>
data.ts
var multi = [ {
"name": "Belarus",
"series": [
{
"value": 5776,
"name": "Jan 19"
},
{
"value": 4299,
"name": "Feb 19"
},
{
"value": 3995,
"name": "Mar 19"
},
{
"value": 6597,
"name": "Apr 19"
},
{
"value": 4954,
"name": "May 19"
},
{
"name": "June 19",
"value": 3865
},
{
"name": "July 19",
"value": 2349
},
{
"name": "Aug 19",
"value": 6910
},
{
"name": "Sept 19",
"value": 6224
},
{
"name": "Oct 19",
"value": 4161
},
{
"name": "Nov 19",
"value": 4825
},
{
"name": "Dec 19",
"value": 3835
}
]},{
"name": "Croatia",
"series": [
{
"value": 2576,
"name": "Jan 19"
},
{
"value": 5427,
"name": "Feb 19"
},
{
"value": 3097,
"name": "Mar 19"
},
{
"value": 4385,
"name": "Apr 19"
},
{
"value": 4849,
"name": "May 19"
},
{
"name": "June 19",
"value": 2867
},
{
"name": "July 19",
"value": 6241
},
{
"name": "Aug 19",
"value": 6517
},
{
"name": "Sept 19",
"value": 3808
},
{
"name": "Oct 19",
"value": 2068
},
{
"name": "Nov 19",
"value": 5121
},
{
"name": "Dec 19",
"value": 3876
}
]}]
In the above data set in x-axis I need to plot all values in the graph but only alternate labels need to displayed. This need to be applied for all types of ngx charts.

Duplicate calls to http in Angular on Subscribe

I'm new to angular and trying to implement a dashboard application. The dashboard contains 50+ different charts so I decided to capture all the data of these charts user one API call, the json file is as follows
{
"site": "bje",
"date": "2018-03-09T00:00:00",
"charts": [
{
"code": "INDK-01",
"dataset": [
{
"name": "Actual",
"data": [
{
"label": "05 Jan 2018",
"value": 351,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 373,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 353,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 379,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 356,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 371,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 371,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 368,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 369,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 371,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Budget",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
},
{
"name": "Target",
"data": [
{
"label": "05 Jan 2018",
"value": 0,
"date": "2018-01-05T00:00:00"
},
{
"label": "12 Jan 2018",
"value": 0,
"date": "2018-01-12T00:00:00"
},
{
"label": "19 Jan 2018",
"value": 0,
"date": "2018-01-19T00:00:00"
},
{
"label": "26 Jan 2018",
"value": 0,
"date": "2018-01-26T00:00:00"
},
{
"label": "02 Feb 2018",
"value": 0,
"date": "2018-02-02T00:00:00"
},
{
"label": "09 Feb 2018",
"value": 0,
"date": "2018-02-09T00:00:00"
},
{
"label": "16 Feb 2018",
"value": 0,
"date": "2018-02-16T00:00:00"
},
{
"label": "23 Feb 2018",
"value": 0,
"date": "2018-02-23T00:00:00"
},
{
"label": "02 Mar 2018",
"value": 0,
"date": "2018-03-02T00:00:00"
},
{
"label": "09 Mar 2018",
"value": 331.02,
"date": "2018-03-09T00:00:00"
}
]
}
]
},..............etc
] }
The service .ts file contain a function that return the data as follows:
getDashboardData(): Observable<ProcessedData>{
return this._http.get<ProcessedData>(this.baseUrl)
.map(res => res);
}
As well I have created one re-usable component which accept an input of chart code (ex. "INDK-01" in above json sample) an in ngOnInit I have this code
ngOnInit() {
this._service.getDashboardData(this.selectedSite, this.selectedDate)
.subscribe(res => {
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
.
.
.
});
in dashboard home component I add multiple
the problem that it makes multiple calls to the API everytime I load dashboard page, is there any way to avoid that? like for example store the data in a global object and from each chart will filter to get the proper data.

You need to first shareReplay(1) your observable something like following to cache the data:
const sharedOb = this._service.getDashboardData(this.selectedSite, this.selectedDate).shareReplay(1)
sharedOb.subscribe(x=>{
// do your work here
})
Now you can subscribe to sharedOb as many as times you want, there will only be one server round-trip.

You could use ".share".
this._service.getDashboardData(this.selectedSite, this.selectedDate).subscribe(res =>
{
this.BudgetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Budget')
.data
.sort();
this.TargetData = res.charts.find(x => x.code == this.chartId)
.dataset.find(x => x.name == 'Target')
.data
.sort();
}).share();

amCharts with AngularJS

I'm still strugling making work other libs with AngularJS because of it's differtent logic from other libs.
I need to visualize data with amCharts Stock, but there is nothing on the internet about these two wroking together.
How can i make this work with angularjs: http://jsfiddle.net/922JW/
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
categoryAxesSettings: {
minPeriod: "mm"
},
dataSets: [{
color: "#b0de09",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData,
categoryField: "date"
}],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
type: "smoothedLine",
lineThickness: 2,
bullet: "round"
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
cornerRadiusTop: 2,
fillAlphas: 1
}],
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
}
],
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
position: "top"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
position: "top",
dateFormat: "YYYY-MM-DD JJ:NN",
inputFieldWidth: 150,
periods: [{
period: "hh",
count: 1,
label: "1 hour",
selected: true
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
},
panelsSettings: {
usePrefixes: true
}
});
Thanks.

I would create some basic directive (isolate scope) that receives chart settings and use as template:
<div id="container"></div>
In addition we can write several watchers to listen on user actions.
Here is working example How to use it:
(Its not based on your settings but you can use the same flow)
Demo Fiddle
Directive
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
scope: {
config: '='
},
template: '<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = new Highcharts.Chart(config);
if(config.loading) {
chart.showLoading();
}
};
initChart();
scope.$watch('config.loading', function (loading) {
if(loading) {
chart.showLoading();
} else {
chart.hideLoading();
}
});
scope.$watch('config.series[0].type', function (type) {
chart.series[0].update({type: type});
});
scope.$watch('config.series[0].dataLabels.enabled', function (enableDataLabels) {
chart.series[0].update({dataLabels: {enabled: enableDataLabels}});
});
}//end watch
}
}) ;
The usage:
<my-elem config="chartConfig"> </my-elem>
[EDIT]
Demo 2 FIddle
HTML
<div>
<my-elem ></my-elem>
</div>
JS
var myapp = angular.module('myModule', []);
myapp.directive('myElem',
function () {
return {
restrict: 'E',
replace:true,
template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
link: function (scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var config = scope.config || {};
chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"marginLeft": 20,
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": [{
"year": "1950",
"value": -0.307
}, {
"year": "1951",
"value": -0.168
}, {
"year": "1952",
"value": -0.073
}, {
"year": "1953",
"value": -0.027
}, {
"year": "1954",
"value": -0.251
}, {
"year": "1955",
"value": -0.281
}, {
"year": "1956",
"value": -0.348
}, {
"year": "1957",
"value": -0.074
}, {
"year": "1958",
"value": -0.011
}, {
"year": "1959",
"value": -0.074
}, {
"year": "1960",
"value": -0.124
}, {
"year": "1961",
"value": -0.024
}, {
"year": "1962",
"value": -0.022
}, {
"year": "1963",
"value": 0
}, {
"year": "1964",
"value": -0.296
}, {
"year": "1965",
"value": -0.217
}, {
"year": "1966",
"value": -0.147
}, {
"year": "1967",
"value": -0.15
}, {
"year": "1968",
"value": -0.16
}, {
"year": "1969",
"value": -0.011
}, {
"year": "1970",
"value": -0.068
}, {
"year": "1971",
"value": -0.19
}, {
"year": "1972",
"value": -0.056
}, {
"year": "1973",
"value": 0.077
}, {
"year": "1974",
"value": -0.213
}, {
"year": "1975",
"value": -0.17
}, {
"year": "1976",
"value": -0.254
}, {
"year": "1977",
"value": 0.019
}, {
"year": "1978",
"value": -0.063
}, {
"year": "1979",
"value": 0.05
}, {
"year": "1980",
"value": 0.077
}, {
"year": "1981",
"value": 0.12
}, {
"year": "1982",
"value": 0.011
}, {
"year": "1983",
"value": 0.177
}, {
"year": "1984",
"value": -0.021
}, {
"year": "1985",
"value": -0.037
}, {
"year": "1986",
"value": 0.03
}, {
"year": "1987",
"value": 0.179
}, {
"year": "1988",
"value": 0.18
}, {
"year": "1989",
"value": 0.104
}, {
"year": "1990",
"value": 0.255
}, {
"year": "1991",
"value": 0.21
}, {
"year": "1992",
"value": 0.065
}, {
"year": "1993",
"value": 0.11
}, {
"year": "1994",
"value": 0.172
}, {
"year": "1995",
"value": 0.269
}, {
"year": "1996",
"value": 0.141
}, {
"year": "1997",
"value": 0.353
}, {
"year": "1998",
"value": 0.548
}, {
"year": "1999",
"value": 0.298
}, {
"year": "2000",
"value": 0.267
}, {
"year": "2001",
"value": 0.411
}, {
"year": "2002",
"value": 0.462
}, {
"year": "2003",
"value": 0.47
}, {
"year": "2004",
"value": 0.445
}, {
"year": "2005",
"value": 0.47
}],
"valueAxes": [{
"axisAlpha": 0,
"inside": true,
"position": "left",
"ignoreAxisWidth": true
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"cursorPosition": "mouse"
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
};
initChart();
}
}
});

Use the module
https://github.com/natanielpaiva/angularAmChart
or
project example
https://github.com/natanielpaiva/angularAmChartSimples
Simple:
<amchart ng-model="objectLiveAmchart"> </amchart>
In Javascript:
$scope.objectLiveAmchart = { type:serial, ... }

I fount that the solution provided wasn't working for me.
In particular, the chart was not showing if the id in the template wasn't hardcoded.
It seemed like a problem with the AmCharts.makeChart() function that was't able to find the chardiv_idin the DOM.
I found that putting the initChart()function inside a scope.$watch('element') (after attaching elementto the scope in the linking function) was the right solution for me.
I think this is because after the element is created (so after the watch is called) is present and visible in the DOM, so the AmChart function can see it and render the chart correctly.
Hope this helped someone!