0

I'm still fairly new to angularjs and highcharts, what i'm trying to do is instead of declaring each chart in javascript manually, i want to send a few parameters to an angularjs function and that function returns a chart object and be rendered onto the div.

When i try the code with angularjs, it doesn't work, i create the charts main and chart1 by 'hand', using the function i created to make chart2 it's not rendering.

here is just the angularjs code:

var App = angular.module('App', []).factory('Chart', function() {
  return {
    crearGrafica: function(chartName, percent, estado, localidad) {
      return new Highcharts.Chart({
        exporting: {
          enabled: false
        },
        credits: {
          enabled: false
        },
        chart: {
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
          plotBackgroundColor: null,
          plotBorderWidth: 0,
          plotShadow: false,
          renderTo: chartName,
          polar: true,

          type: 'line'
        },
        title: {

        },
        subtitle: {

          text: percent + '%',
          align: 'center',
          verticalAlign: 'middle',
          y: 40

        },
        tooltip: {
          enabled: false,
        },
        plotOptions: {

          series: {
            states: {
              hover: {
                enabled: false
              }
            }
          },
          pie: {
            dataLabels: {
              enabled: false,
            },
            startAngle: -90,
            endAngle: 90,
            center: ['50%', '75%']
          }
        },
        series: [{
          type: 'pie',
          name: '',
          innerSize: '40%',
          data: [

            ['', indice], {
              name: 'Referencia100%',
              y: (100 - percent),
              sliced: false,
              selected: true,
              visible: true,
              color: 'rgba(255, 255, 255, 0.9)'

            },

          ]
        }]


      });
    }
  }
});


function chartController($scope, crearChart) {



  //not working
      chart2 = Chart.crearGrafica('chart2', 66, '', '');

    }

App.controller('appCtrl', function($scope, $http) {
  var chartMain;
  var chart1;
  var chart2;
  var chart3;
  var chart4;

 //not working either
  chart2 = Chart.crearGrafica('chart2', 66, '', '');

});

here is a punkler i made, i tried to make it the most simple as posible. http://plnkr.co/edit/lfGoc39zJhMp695fGIyO?p=preview

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.