Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gauge Chart does not appear #82

Open
Sadi-1992 opened this issue May 11, 2017 · 6 comments
Open

Gauge Chart does not appear #82

Sadi-1992 opened this issue May 11, 2017 · 6 comments

Comments

@Sadi-1992
Copy link

Sadi-1992 commented May 11, 2017

i'am trying to build an gauge chart, but it does'nt appear...

In my Ctrl:

    $scope.amChartOptions = {
      type: "gauge",
      theme: "light",
      axes: [ {
        axisThickness: 1,
        axisAlpha: 0.2,
        tickAlpha: 0.2,
        valueInterval: 20,
        bands: [ {
          color: "#84b761",
          endValue: 90,
          startValue: 0
        }, {
          color: "#fdd400",
          endValue: 130,
          startValue: 90
        }, {
          color: "#cc4748",
          endValue: 220,
          innerRadius: "95%",
          startValue: 130
        } ],
        bottomText: "0 km/h",
        bottomTextYOffset: -20,
        endValue: 220
      } ],
      arrows: [ {} ],
      export: {
        enabled: true
      }
    };
    setInterval( randomValue, 2000 );
    function randomValue() {
      var value = Math.round( Math.random() * 200 );
      if ( $scope.amChartOptions ) {
        if ( $scope.amChartOptions.arrows ) {
          if ( $scope.amChartOptions.arrows[ 0 ] ) {
            if ( $scope.amChartOptions.arrows[ 0 ].setValue ) {
              $scope.amChartOptions.arrows[ 0 ].setValue( value );
              $scope.amChartOptions.axes[ 0 ].setBottomText( value + " km/h" );
            }
          }
        }
      }
    }

in my html:

<div>
  <div style="height: 400px; width: 600px;">
    <am-chart options="amChartOptions"></am-chart>
  </div>
</div>

amcharts and the directive were installed using bower. The serial-chart from the example is working...

@Sadi-1992
Copy link
Author

the problem seems to be, that i dont get the new version including the gauge feature using bower install.

@GrantMStevens
Copy link
Owner

Sending me messages telling me to look at this immediately is not the way to go bud. People who donate their time to write and release open source software don't always have time to reply immediately You need to understand that.

Now, I just tested the bower install, from which i can verify I am getting the correct version with the gauge chart. I havent actually used the gauge chart, so I don't know what all amCharts is expecting. Try clearing your bower cache bower cache clear and see if that solves your versioning issues. I also just pushed a new tag and version to bring in better NPM support.

@Sadi-1992
Copy link
Author

now ive got the right version, too. thanks.
but the gauge-chart is still not showing up.

@GrantMStevens
Copy link
Owner

create a fiddle and I'll do my best to troubleshoot it

@Sadi-1992
Copy link
Author

Here's the fiddle: http://jsfiddle.net/w3vpc35o/441/
thanks a lot.

@anupsahu
Copy link

anupsahu commented Nov 3, 2017

You just need to add data= [] to the amChartOptions so that it will render it because while the directive is getting rendered it checks whether data property is set or not... If not it does not render the chart it and nothing comes up.

I hope that cleared the issue

            $q.when($scope.options).then(function(options) {
                // we can't render a chart without any data
                if (options.data) {
                    var renderChart = function(amChartOptions) {
                        var o = amChartOptions || options;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants