How to load HighChart dynamically in angular UI Accorion (uib-Accordion)?

Question

I get the data, but I need to bind it to the highchart based on the identifier, if I click on the accordion, it should display the highchart and the table based on the identifier, as follows

Here is my code

<uib-accordion close-others="oneAtATime"> <uib-accordion-group is-open="isopen" ng-init="isOpen = $first" class="acc-group" style="margin-bottom:0"> <uib-accordion-heading ng-click="isopen=!isopen" class="header"> <div><p class="boardRateHeading"><span style="color:#009688">{{board.city}}&nbsp;&nbsp;</span><span style="color:#607D8B;text-transform:uppercase;">{{board.name}}</span>&nbsp;&nbsp;<span>{{board.date | date:'MM/dd/yyyy'}}</span><span class="pull-right">₹{{board.price}}(<span ng-style="{{changeColor(board.change)}}"><i class="{{getIcon(board.change)}}" aria-hidden="true"></i>{{board.change}}</span>)</span></p></div> </uib-accordion-heading> <div class="row" style="margin-top:15px;" ng-repeat="data in boardData"> <div class="col-md-8"> <div id="container{{data.id}}"> <img class="img-responsive mrg-auto" src="/Content/images/loading.gif" /> </div> </div> <div class="col-md-4"> <table class="table table-bordered table-condesed"> <thead> <tr> <td>Date</td> <td>In ₹</td> </tr> </thead> <tbody> <tr> <td>{{data.date | date:'MM/dd/yyyy'}}</td> <td>₹{{data.price}}({{board.change}})</td> </tr> </tbody> </table> </div> </div> </uib-accordion-group> </uib-accordion> 

And the controller

  $http({ method: "GET", url: "/api/Board/getMapdataOnId", params: { id: parseInt(id) } }).then(function (response) { var boardData = response.data; var dateData = [], rateData = []; for (var i = 0; i < boardData.gData.length; i++) { dateData.push(Date.parse(boardData.gData[i].date)); rateData.push(boardData.gData[i].maxRate); } Highcharts.chart('container' + parseInt(id), { chart: { zoomType: 'x' }, title: { text: '' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' }, credits: { enabled: false }, xAxis: { categories: dateData, type: 'datetime', labels: { autoRotation: [-90], formatter: function () { return Highcharts.dateFormat('%b', this.value) + ', ' + Highcharts.dateFormat('%d', this.value); } }, title: { text: 'Date' } }, yAxis: { allowDecimals: true, gridLineWidth: 1, labels: { formatter: function () { return this.value; } }, // minorTickInterval: 1, title: { text: 'Price in ' + boardData.gData[0].currency } }, tooltip: { formatter: function () { return '<b>Rates on </b><br/>' + Highcharts.dateFormat('%b', this.x) + ', ' + Highcharts.dateFormat('%d', this.x) + ' <br/>' + boardData.gData[0].currency + '' + this.y; } }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, marker: { radius: 2 }, lineWidth: 1, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ data: rateData, type: 'area', showInLegend: false }] }); }, function (response) { console.log(response.statusText); }); 

Answer 1

Do not ng-click transfer data like this

 <uib-accordion-heading ng-click="open({{data.id}})" class="header"> 

Then in the open function

 function open(id) { $http({ ..... }); } 

Answer 2

How to create a new directive for a chart in which you create a chart parameter and chart container.

 <example-highchart></example-highchart> 

exampleHighchart.js

 (function() { 'use strict'; angular .module('yourModule') .directive('exampleHighchart', exampleHighchart); function exampleHighchart() { return { templateUrl: 'example-highchart.template.html', restrict: 'E', scope: { id: '=' }, replace: 'true', link: linkFn }; function linkFn(scope, element) { element.find('.highchart-element').highcharts(createOptions()); function createOptions() { // your chart option goes here } function updateChartData() { // you can start the loading animation here // and then hide it in the the then block // get the highchart element reference to update the properties. var chart = element.find('.highchart-element').highcharts(); $http({ method: "GET", url: "/api/Board/getMapdataOnId", params: { id: parseInt(id) } }).then(function (response) { var boardData = response.data; var dateData = [], rateData = []; for (var i = 0; i < boardData.gData.length; i++) { dateData.push(Date.parse(boardData.gData[i].date)); rateData.push(boardData.gData[i].maxRate); } // update the categories info and the series data chart.xAxis[0].setCategories(dateData); chart.series[0].setData(rateData); }); } } } })(); 

highchart-example.template.html:

  <div> <!-- you can add your loading gif here and display it while it loading --> <div class="example-highchart" /> <div> 

Answer 3

Do not call ng-click as

 <uib-accordion-heading ng-click="open({{data.id}})" class="header"> 

he should be like

 <uib-accordion-heading ng-click="open(data.id)" class="header">