Use JavaScript object to create a new object for Google charts

Question

I'm trying to chart some data using Google's charting resources. It wants the data in a certain format such as:

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
]);

From what I can tell it wants the first series to contain the 'x' axis followed by any number of items representing the 'y' axis data points.

My data is coming from my back-end as follows:

Update (code to get chart data):

function GetChartData(ni, dn, cn) {
    $.ajax({
        url: '/Dashboard?handler=QualityTests' + '&NodeId=' + ni + '&DomainName=' + dn + '&ComputerName=' + cn,
        success: function (json) {
            google.charts.setOnLoadCallback(drawChart(json))
        }
    })
}

I want to plot just the averageJitterInMs for the 'x' axis and dateTime for the 'y' axis for now (I'll eventually use the rest of the data elsewhere on the page; possibly for other charts).

So is there an elegant way to pull just these values from my array (of potentially hundreds of array items) so it can feed the Google chart data requirements? By this I mean how do I get my two key/value pairs out of a JavaScript array so I can put it in the right format the charting resource wants (see the attached image)?

I've tried looping the array on the client side to pull out these two key/value pairs however the Google charting api is giving me an error:

Not an array

Is this even necessary or can I somehow grab the key/value pairs programmatically to feed the arrayToDataTable method?

Could you clarify your question a bit? What do you mean "pull these values from my array"? Actually you could just access any value from array via index like myArray[0]. Show us the code you are trying to use — Sergey
– Sergey, Commented Oct 14, 2018 at 14:29
Sure thing...I updated the question a bit as well. From what I can tell I need to have an array built in a completely different format from my source array. Have a look at the image showing the array of key/values and the expected format for the chart. I'll update the question to include how I'm trying this as well....give me a few. — Jason Shave
– Jason Shave, Commented Oct 14, 2018 at 14:40
Please do use a snippet so that we could reuse this to make an answer. — Sergey
– Sergey, Commented Oct 14, 2018 at 14:43
I hope this one is what you need codepen.io/CrUsH20/pen/GYMyBG?editors=1010 (check console for results) — Sergey
– Sergey, Commented Oct 14, 2018 at 14:45
That explains the err Not an array it's an object, you have to either loop through it's values Object.values or convert it to and array — user7148391
– user7148391, Commented Oct 14, 2018 at 15:03

Sergey · Accepted Answer · 2018-10-14 15:06:39Z

2

You can build any array out of what you have. I've made a dummy data to show you how you could achieve what you want.

Here we have array with two options we want to pick (value1, value2).

Then we do a map over an array and assign the result to resultArray.

In map we do extract value1 and value2 from each element using ES6 destructuring.

Now we have an array of arrays.

const array = [
	{
		value1: 'sadfsadf',
		value2: 'asdasdas',
		extra: 123123
	},
	{
		value1: 'sadfasfsadsadf',
		value2: 'asdasdas',
		extra: 123123123
	},
	{
		value1: 'eg',
		value2: 'asdssdas',
		extra: 124
	},
	{
		value1: 'sadfsadf',
		value2: 'sd',
		extra: 123123
	},
	{
		value1: 'sf',
		value2: 'sf',
		extra: 123123
	}
];

let resultArray = array.map(e => {
	let {value1, value2} = e;
	return [value1, value2];
});

console.log(resultArray);

answered Oct 14, 2018 at 15:06

Sergey

7,69214 gold badges49 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jason Shave Over a year ago

This looks good. One question though, if my source data (one of the numeric values) is showing up as a string, can this be converted to a number? Given your example, imagine if '123123' was literally "123123" can you convert the type as you build the array?

Sergey Over a year ago

In JS converting to a number is happening by prepending with +. I.e. +'123' === 123.

Sergey Over a year ago

You can make values inside a map callback and then return them in array

Jason Shave Over a year ago

Excellent. This worked! I had to also use arr.unshift(["DateTime","AverageJitterInMs"]) to define my columns as well but I have a graph!! :)

Sergey Over a year ago

@JasonShave-MSFT it's better to avoid unshift since it's much harder to operate than push for example. You could firstly create an array with initial columns then just push new values to it. Or, you could use array destructuring to unshift, however it should be more optimal as I know. Would be like newArr = [newValue, ...oldArr]

Collectives™ on Stack Overflow

Use JavaScript object to create a new object for Google charts

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related