javascript - Highcharts graph series multiplies -


i'm using knockout.js towards otrs rest api generate graphs in highcharts, of odd reason series i'm adding highcharts seems multiplies itself.

this knockout.js model:

function otrsviewmodel() {     var self = this;     self.api_url = 'https://localhost/otrs/nph-genericinterface.pl/webservice/rest-api';     self.username = 'api_user';     self.password = '';      self.priorities = [         'white',         'green',         'amber',         'orange',         'red'     ];       self.queues = [         ‘queue1’,         ‘queue2’,         'queue3'     ];      self.selectedqueues = ko.observablearray();     self.selectedpriorities = ko.observablearray();      self.statsbyqueueandpriority = function() {         var endpoint = '/ticket/search';         chart.xaxis[0].setcategories(self.selectedqueues());          // iterate on every queue         async.each(self.selectedpriorities(), function(priority){             var tmp = {};             tmp.name = priority;             tmp.data = [];              // iterate on each priority             async.each(self.selectedqueues(), function(queue){                 // otrs search parameters                 var api_data = {                     'userlogin': self.username,                     'password': self.password,                     'queues': queue,                     'limit': 10000,                     'priority': priority                 };                   // otrs request                  $.ajax({                     'url': self.api_url + endpoint,                     'type': 'post',                     'datatype': 'json',                     'data': json.stringify(api_data)                 })                     .success(function(data) {                         tmp.data.push(data.ticketid.length);                         chart.addseries(tmp);                     });             });         });     }; }; 

this html code:

<div id="graph-input" class="top-container">     <form class="form-inline">         <div class="form-group">             <h4>queue</h4>             <select class="form-control" data-bind="options: queues, selectedoptions: selectedqueues" size="5" multiple="true">               </select>         </div>         <div class="form-group">             <h4>priority</h4>             <select class="form-control" data-bind="options: priorities, selectedoptions: selectedpriorities" size="5" multiple="true"></select>         </div>         <button class="btn btn-primary" data-bind="enable: selectedqueues, click: statsbyqueueandpriority">generate statistics</button>     </form> </div> <hr/>  <div id="graph" style="min-width: 310px; height: 800px; margin: 0 auto"></div> <script type="text/javascript">     var chart;     var highchart_options = {         chart: {             renderto: 'graph',             type: 'bar'     },         title: {             text: 'queues - priority'         },     };     chart = new highcharts.chart(highchart_options);      ko.applybindings(new otrsviewmodel(), $('graph-input')[0]);  </script> 

this results in following graph:

generated highcharts graphs

as can see series seems multiplying themselves, know how can fix this?


Comments

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

routes - Laravel 4 Wildcard Routing to Different Controllers -

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -