CODEWITHSUNDEEP
javascriptangularjshighcharts
edamerau
edamerau

Reputation: 481

highcharts / Angular databinding with series

I'm not that experienced with highcharts and struggeling with binding my data into the series parameter.

I've got a controller that - besides other logic - offers an array of objects i want to display (console.log offers them all properly)

this.plotData = [];

which is pushed by

this.plotData.push({
                  name: dataport,
                  data: this.plotFromData(this.device.data[dataport]),
                })

with 3 objects in it, that include name "String" and data []. I would like to bind them into my chart controller with 

series: [{
     data: this.plotData[0],
     name: 'this.name'
    },
data: this.data[1],
     name: 'a String name'

        }, ...

for each data provided. But nothing is rendered properly except for the String i added to check the binding. What might be wrong?

Upvotes: 0

Views: 445

Answers (1)

Strahdvonzar
Strahdvonzar

Reputation: 400

In order to render more than one Graph in Highcharts you need to populate the Series Property which is an array of Objects like the following :

series : [
  {name: 'myName1' , data: myDataSet1} , 
  {name: 'myName2' , data: myDataSet2}
]

You do not illustrate something like that in your example.

The myDataSet should be an Array() of Arrays like the following : 

var myDataSet = [ 
  [timestamp , value] , 
  [timestamp , value] , 
  [timestamp , value] 
];

So at the end you should have : 

series : [
  {   
      name: 'myName1' , 
      data: [ 
        [timestamp , value] , 
        [timestamp , value] , 
        [timestamp , value] 
      ]
  } , 
  {
    name: 'myName2' , 
    data: [ 
       [timestamp , value] , 
       [timestamp , value] , 
       [timestamp , value] 
    ]
  }
]

Upvotes: 1

Related Questions