How to map correctly

ternaryChart(data) {
    var arr = Object.keys(data).map(function(key) { return data[key] });
    console.log(arr);

    const element = this.el.nativeElement
    const formattedData = [{
      type: 'scatterternary',
      mode: 'markers',
      a: arr.map(d => d.rate ),
      marker: {
          symbol: 100,
          color: '#DB7365',
          size: 14,
          line: { width: 2 }
      },
    }]
  }

I first make my object an array cause it need be an array to map it
later in writing chart i fail cause its not showing the marker
I never made this kind o chart before.
But consoloelog i get all @values of the object in an array how to map
like say the third @value [3] and what exactly means d in this case since its only an array
with 4 values i need select the third to show marker on chart
thanks for all help

Can you provide some sample data? It would be easier to explain then.

d represents the item being mapped. So looks like d is an object with a key of rate and that is what you are mapping.

ok i try detail explain first i made @data@ an array @arr@
Array [ “USD”, “United States Dollar”, “8,918.4300”, 8918.43 ]
this is how it looks in console. but then i code
arr.map( d=> ???)
to map the array i want arr.map to hold value arr[3] in it i dont know more explain
but I never mapped before :slight_smile:

You might want to use filter instead or if you just want arr[3], why can’t you just assign a variable to arr[3]?

1 Like

Hi @donjon, I’ve just formatted the code in your post so it’s a bit easier to read.

So let me get this right:

In this case, when you turn the values from data into an array, you are getting [ “USD”, “United States Dollar”, “8,918.4300”, 8918.43 ], right? That is the output from that console.log?

Because if that is the case, there is no need at all for the map, as all it’s doing is removing your ability to select elements by name. But if you’re building a chart, I would have assumed you had more than one data point??

What you’re describing here is that your function is taking an object that looks something like like (I’m making up the names of the keys here) {currency: 'USD', currencyName: 'United States Dollar', rate: '8,918.4300', rateN: 8918.43}, and you can’t make a graph out of that: can you post what the actual expected input is?

The map function is just like an iterating for loop so:

for(i = 0; i > arr.length; i++){
console.log(arr[i]);
}

and Map():

arr.map( d => console.log(d)    )

d is the same as arr[i] as the value d is the position on the array executed.
The function map is giving you arr[d] when you call d because you are executing map ON arr as arr.map()

In resume, d (or any other name you want to call it) is each index (0,1,2,3) on the array and when you execute something on d as =>console(d) you are executing it on each of the indexes of the array.

1 Like

ye im trying make live charts. so its suppose to update, but
First i dont even know if plotly is friends with angular,
also thanks for all input i managed to console log and see if i can make progress tomorrow
:wink:

When you do come back to it, can you please post what the input looks like (data). I think map is completely appropriate here, but I think you’re using it twice when you should be using it once.

2 Likes

I did ask for some data to be provided :roll_eyes:

1 Like
{
  "time": {
    "updated": "Apr 24, 2018 10:57:00 UTC",
    "updatedISO": "2018-04-24T10:57:00+00:00",
    "updateduk": "Apr 24, 2018 at 11:57 BST"
  },
  "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
  "bpi": {
    "USD": {
      "code": "USD",
      "rate": "9,296.3913",
      "description": "United States Dollar",
      "rate_float": 9296.3913
    }
  }
}

this is the api from coindesk and the data is first saved like an object in firebase.
So plan was to live feed the firebase object however
I cant get plotly to work wirh angular. the console log of #d showed the correct object/array
but the markers donnt animate correct. and how to add an array updating data is still
mystery to me. but i never used plotly before they have kind of cool
3d graphs etx too.just problem with poor documentation.
cheers

What you originally posted can’t work unless data is an array of data - at the minute what you have is a single data point, which you can’t plot anything with it would seem.

Caveat - you’re posting a tiny fragment of a thing that uses three different complex things (Angular, Firebase, Plotly) + the integration library (AngularFirebase), so it’s almost impossible to verify this works outside of your particular setup, but:

If data is a stream of those objects (which it should be):

ternaryChart(data) {
    const element = this.el.nativeElement
    const formattedData = [{
      type: 'scatterternary',
      mode: 'markers',
      a: data.map(datum => datum.bpi.USD.rate)
      marker: {
          symbol: 100,
          color: '#DB7365',
          size: 14,
          line: { width: 2 }
      },
    }]
  }

But a ternary plot is designed to show the relationship between three different data properties: you’re pulling out one, so this can’t work. We’re missing some context as to what you’re trying to do with the data here. I assume it should be

ternaryChart(data) {
    const element = this.el.nativeElement
    const formattedData = [{
      type: 'scatterternary',
      mode: 'markers',
      a: data.map(datum => datum.bpi.USD.rate),
      b: data.map(datum => datum.SOMETHING_ELSE),
      c: data.map(datum => datum.SOMETHING_ELSE), 
      marker: {
          symbol: 100,
          color: '#DB7365',
          size: 14,
          line: { width: 2 }
      },
    }]
  }

I assume you’re trying to follow this? https://angularfirebase.com/lessons/realtime-charts-with-plot-ly/

ye part of it i changed to line chart etx
but i understand u need an array for it to draw something but struggle with making
realtime as of now but yes u are right i seen that tutorial too
full of flaws. had to rebuild it all over the place to even see the chart rendering
but the @markers wont show yet probly cause either its not an array even though i coded the object an array or the stream of data must work first i dont know really.
and they charge u 5000$ a year at plotly for support :sunny:

i want basicaly a marker to blink at current value.
it dowenst even need to render a line but i agree its tricky
3 complex things need to work at same time like clockwerk :expressionless: