angularjs - Why isn't my spline chart showing when using combo charts? -


so i'm using highcharts-ng angular create combination chart of spline chart , column chart formatted histogram show trends.

the way works on load of page, see histogram, , not spline. changing order nothing.

it looks though if have spline chart data hard-coded shows, using program add in data after service called in not work. 

(function() {   'use strict';  angular     .module('app.widgets')     .directive('trends', trends);  trends.$inject = ['resultsservice'];  /* @nginject */  function trends() {     var ddo = {         restrict: 'ea',         templateurl: 'app/widgets/trends/trends.directive.html',         link: link,         scope: {             data: '=',             config: '='         },         controller: controller,         controlleras: 'vm',         bindtocontroller: true     };      return ddo;      function link(scope, element, attrs) {      }      function controller($scope, resultsservice) {          var vm = this;         var parent = $scope.widgetcontroller;         var size = {              height: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.height - 20 ,             width: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.width - 20         };          vm.histogram = {             chart: {                 zoomtype: 'xy'             },             title: {                 text: 'average monthly weather data tokyo'             },             subtitle: {                 text: 'source: worldclimate.com'             },             xaxis: {                 categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun',                     'jul', 'aug', 'sep', 'oct', 'nov', 'dec'],                 crosshair: true             },             yaxis: { // primary yaxis                 labels: {                     style: {                         color: highcharts.getoptions().colors[2]                     }                 },                 title: {                     text: 'events',                     style: {                         color: highcharts.getoptions().colors[2]                     }                 }               },             tooltip: {                 shared: true             },             legend: {                 layout: 'vertical',                 align: 'left',                 x: 80,                 verticalalign: 'top',                 y: 55,                 floating: true,                 backgroundcolor: (highcharts.theme && highcharts.theme.legendbackgroundcolor) || '#ffffff'             },                  series: [{                     name: 'average',                     type: 'spline',                     data: [],                     marker: {                         enabled: true                     }                 }],               loading: false,             usehighstocks: false,             size: {                 height: size.height,                 width: size.width             }         };            vm.processchartdata = processchartdata;          vm.data = {             charts: {             }         };            resultsservice.getdata().then(function(res) {             vm.data = {                 charts: {}             };              vm.data.charts = processchartdata(res);              vm.histogram.xaxis.categories = [];             vm.histogram.series.push ({                 name: 'events per month',                 type: 'column',                 data: [],                 marker: {                     enabled: true                 }             });             console.log(vm.histogram.series);             angular.foreach(vm.data.charts.months, function(v,k){                  vm.histogram.xaxis.categories.push(k);                 vm.histogram.series[1].data.push(v);                  });             vm.histogram.options = {                 plotoptions: {                  }             };             vm.histogram.options.plotoptions = {                  column: {                      borderwidth: 0.5,                     grouppadding: 0,                     shadow: true                   },              };             console.log(vm.data.charts.months);             vm.histogram.xaxis.categories.sort();             var average = calculateaverage();             vm.histogram.series[0].data=average;              console.log(vm.histogram.series);               });          function swap(pos1, pos2){             var temp = vm.histogram.series[pos1];             vm.histogram.series[pos1] = vm.histogram.series[pos2];             vm.histogram.series[pos2] = temp;            }          function calculateaverage() {              var averagearray = [];             var total = 0;             angular.foreach(vm.data.charts.months, function(v,k){                 console.log(v);                 total += v;             });             console.log((total/12.0).tofixed(2));             var average = (total/12.0).tofixed(2);              angular.foreach(vm.histogram.xaxis.categories, function(v,k){                 averagearray.push(average);              });             return averagearray;           }            function processchartdata(data) {             var output = {};             var months = {};             var dayofweek = {};             var epoch = {};                angular.foreach(data, function (value, index) {                 // month                 if (!months[value.eventdate.month]) {                     months[value.eventdate.month] = 1;                 }                 months[value.eventdate.month] += 1;                  // day of week                 if (!dayofweek[value.eventdate.dayofweek]) {                     dayofweek[value.eventdate.dayofweek] = 1;                 }                 dayofweek[value.eventdate.dayofweek] += 1;                  // day                 if (!epoch[value.eventdate.epoch]) {                     epoch[value.eventdate.epoch] = 1;                 }                 epoch[value.eventdate.epoch] += 1;               });             output.months = months;             output.dayofweek = dayofweek;             return output;         }         $scope.$on('gridster-item-resized', function(item){               var element = angular.element(item.targetscope.gridsteritem.$element[0]);              vm.histogram.size = {                 height: element.height()-35,                 width: element.width()             };             $scope.$broadcast('highchartsng.reflow');          });         }   }   })();

the chart on webpage looks given code!

as can see, shows legend spline, spline doesn't show up. can't figure out why.

your calculateaverage() function returns array of strings since .tofixed(2) returns string. make sure it's array of numbers. convert average number average = parsefloat(average) example.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more