CODEWITHSUNDEEP
javascriptangularjsapexcharts
Sajeev Zacharias
Sajeev Zacharias

Reputation: 167

Apexchart with Angularjs 1

I am trying to generate charts in angularjs 1 using apexchart. I want to use either ng-apexchart if possible. I have the code below:

I used code from javascript but seems to be not inline with angularjs.

 //app.js

angular.module('plunker', ['angularCharts']);

function MainCtrl($scope) {

var chart;

$scope.showchart=function(type){

var options = {
  chart: {
  height: 380,
  width: "100%",
  type: type
 },
   series: [
   {
     name: "Series 1",
     data: [[1, 34], [3.8, 43], [5, 31] , [10, 43], [13, 33], [15, 43], [18, 33] , [20, 52]]
   }
  ],
 tooltip: {
  x: {
    formatter: function(val) {
       return val.toFixed(1);
     }
    }
 }
 };

  chart = new ApexCharts( document.querySelector("#chart"), options);

 chart.render();

 };

 $scope.hihi=function(){
  console.log("hihi");
  var dataURL = chart.dataURI().then((uri) => {
  var pdf = new jsPDF();
   pdf.addImage(uri, 'PNG', 0, 0);
  pdf.save("download.pdf");
   })
 };

 }



  //index.html

  <!DOCTYPE html>
  <html ng-app="plunker">

   <head>
    <meta charset="utf-8" />
    <title>Angular-charts</title>
    <link rel="stylesheet" href="style.css" />
   </head>

  <body ng-controller="MainCtrl">


   <script data-require="[email protected]" 
      src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"> 
   </script>

  <script type="text/javascript" 
  src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular- 
  charts.min.js"></script>
     <script  src = 
"https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.3/apexcharts.min.js"></script>
         <script 
 src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"> 
      </script>
  <script src="app.js"></script>



      <button ng-click="showchart('bar');" > Show Chart bar</button>
    <button ng-click="showchart('line');" > Show Chart line</button>
    <button ng-click="hihi();" > Submit</button>
 <div id="chart">
     </div>

   </body>

       </html>


      //style.css

      /* Put your css in here */

        #chart {
         max-width: 650px;
        margin: 35px auto;
       }

I could see implementation of apex chart with angular 2 versions and other technologies such as Vue, react. But I need the way apex charts are generated in angularJS 1 version.

Upvotes: 1

Views: 1699

Answers (1)

svarog
svarog

Reputation: 9839

Late to answer because I just had the same requirement, but if anyone is still interested I've written a small directive that wraps an ApexCharts instance

function apex() {
    return {
        template: '<div></div>',
        scope: {
            data: "=",
            options: "="
        },
        link: function (scope, elem) {

            // init ApexCharts and call render
            var chart = new ApexCharts(
                    elem[0],
                    scope.options
                    );
            chart.render().then(function(resolved) {
                // Once the chart is drawn on the page, a promise is returned 
            });

            scope.$watch('data', function (newData, oldOptions) {
                // newData is set of series that Apex can process
                // you will have to validate it somewhere
                chart.updateSeries(newData, true);
            });

            scope.$watch('options', function (newOptions, oldOptions) {
                // newOptions is an updated set of options
                if (angular.isObject(newOptions)) {
                    chart.updateOptions(newOptions);
                }
            });

            scope.$on('$destroy', function () {
                if (angular.isObject(chart)) {
                    chart.destroy();
                }
            });
        }
    };
}

A few things to notice are

  1. I assign an ApexCharts object as soon as the directive is initialized and I give it the first element in the template, this way I don't need to assign an id

  2. I immediately call the render method chart.render()

The render() method is responsible for drawing the chart on the page. It is the primary method which has to be called after configuring the options.

  1. I assign a watcher and watch for new data or options, I call chart.updateOptions(newOptions) to update the chart without destroying it, chart.updateSeries(newData, true) to update the data series and force redraw.

  2. I placed the chart.destroy() inside the scope $destroy event handler to clean everything up

Upvotes: 2

Related Questions