Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
93
rated 0 times [  96] [ 3]  / answers: 1 / hits: 19170  / 10 Years ago, fri, april 11, 2014, 12:00:00

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.


More From » angularjs

 Answers
79

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();

}
}
});

[#71504] Thursday, April 10, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
matteo

Total Points: 81
Total Questions: 100
Total Answers: 96

Location: Honduras
Member since Sat, Jul 24, 2021
3 Years ago
;