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:
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: '', 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:
[EDIT]
Demo 2 FIddle
HTML
JS
var myapp = angular.module('myModule', []); myapp.directive('myElem', function () { return { restrict: 'E', replace:true, template: '', 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]]
[[value]]", "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(); } } });
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!
