Rendering Google charts based on a generated array
1
The problem:
I am trying to present this:
As a Google Chart. This is my array:
[
[
"3600000",
21,
9,
12
],
[
"18000000",
33,
5,
28
],
[
"86400000",
211,
14,
197
],
[
"172800000",
230,
7,
223
],
[
"259200000",
145,
1,
144
],
[
"345600000",
150,
2,
148
],
[
"432000000",
266,
5,
261
],
[
"518400000",
350,
2,
348
],
[
"604800000",
398,
3,
395
],
[
"1209600000",
2544,
19,
2525
],
[
"2592000000",
3758,
45,
3713
],
[
"5184000000",
5306,
28,
5278
]
]
So what I tried to do was this:
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
this.state.sortedForChart.map(ch => {
console.log(ch);
// This logs arrays like this:
// ["259200000", 144, 1, 143]
return ch;
})
// These are the examples provided by Google.
// [1, 37.8, 80.8, 41.8],
// [2, 30.9, 69.5, 32.4],
// [3, 25.4, 57, 25.7],
// [4, 11.7, 18.8, 10.5],
// [5, 11.9, 17.6, 10.4],
// [6, 8.8, 13.6, 7.7],
// [7, 7.6, 12.3, 9.6],
// [8, 12.3, 29.2, 10.6],
// [9, 16.9, 42.9, 14.8],
// [10, 12.8, 30.9, 11.6],
// [11, 5.3, 7.9, 4.7],
// [12, 6.6, 8.4, 5.2],
// [13, 4.8, 6.3, 3.6],
// [14, 4.2, 6.2, 3.4],
]}
options={{
chart: {
title: 'Czestotliwosc logowania',
},
}}
/>
But this failed. The error says:
Error: Row 0 has 13 columns, but must have 4 jsapi_compiled_default_module.js:129:153
So I'm assuming it's not actually returning the value, because if I do this:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
],
[
"3600000",
20,
9,
11
],
[
"5184000000",
5306,
28,
5278
]
]}
This produces a nice and accurate chart. But I cannot think of a way to make it work so that I don't have to type in each part of the array. Any ideas?
Edit: This works as well:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
// return this.state.sortedForChart.map(ch => ch);
this.state.sortedForChart[0],
this.state.sortedForChart[1],
]}
javascript arrays google-visualization
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
add a comment |
1
The problem:
I am trying to present this:
As a Google Chart. This is my array:
[
[
"3600000",
21,
9,
12
],
[
"18000000",
33,
5,
28
],
[
"86400000",
211,
14,
197
],
[
"172800000",
230,
7,
223
],
[
"259200000",
145,
1,
144
],
[
"345600000",
150,
2,
148
],
[
"432000000",
266,
5,
261
],
[
"518400000",
350,
2,
348
],
[
"604800000",
398,
3,
395
],
[
"1209600000",
2544,
19,
2525
],
[
"2592000000",
3758,
45,
3713
],
[
"5184000000",
5306,
28,
5278
]
]
So what I tried to do was this:
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
this.state.sortedForChart.map(ch => {
console.log(ch);
// This logs arrays like this:
// ["259200000", 144, 1, 143]
return ch;
})
// These are the examples provided by Google.
// [1, 37.8, 80.8, 41.8],
// [2, 30.9, 69.5, 32.4],
// [3, 25.4, 57, 25.7],
// [4, 11.7, 18.8, 10.5],
// [5, 11.9, 17.6, 10.4],
// [6, 8.8, 13.6, 7.7],
// [7, 7.6, 12.3, 9.6],
// [8, 12.3, 29.2, 10.6],
// [9, 16.9, 42.9, 14.8],
// [10, 12.8, 30.9, 11.6],
// [11, 5.3, 7.9, 4.7],
// [12, 6.6, 8.4, 5.2],
// [13, 4.8, 6.3, 3.6],
// [14, 4.2, 6.2, 3.4],
]}
options={{
chart: {
title: 'Czestotliwosc logowania',
},
}}
/>
But this failed. The error says:
Error: Row 0 has 13 columns, but must have 4 jsapi_compiled_default_module.js:129:153
So I'm assuming it's not actually returning the value, because if I do this:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
],
[
"3600000",
20,
9,
11
],
[
"5184000000",
5306,
28,
5278
]
]}
This produces a nice and accurate chart. But I cannot think of a way to make it work so that I don't have to type in each part of the array. Any ideas?
Edit: This works as well:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
// return this.state.sortedForChart.map(ch => ch);
this.state.sortedForChart[0],
this.state.sortedForChart[1],
]}
javascript arrays google-visualization
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
add a comment |
1
1
1
The problem:
I am trying to present this:
As a Google Chart. This is my array:
[
[
"3600000",
21,
9,
12
],
[
"18000000",
33,
5,
28
],
[
"86400000",
211,
14,
197
],
[
"172800000",
230,
7,
223
],
[
"259200000",
145,
1,
144
],
[
"345600000",
150,
2,
148
],
[
"432000000",
266,
5,
261
],
[
"518400000",
350,
2,
348
],
[
"604800000",
398,
3,
395
],
[
"1209600000",
2544,
19,
2525
],
[
"2592000000",
3758,
45,
3713
],
[
"5184000000",
5306,
28,
5278
]
]
So what I tried to do was this:
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
this.state.sortedForChart.map(ch => {
console.log(ch);
// This logs arrays like this:
// ["259200000", 144, 1, 143]
return ch;
})
// These are the examples provided by Google.
// [1, 37.8, 80.8, 41.8],
// [2, 30.9, 69.5, 32.4],
// [3, 25.4, 57, 25.7],
// [4, 11.7, 18.8, 10.5],
// [5, 11.9, 17.6, 10.4],
// [6, 8.8, 13.6, 7.7],
// [7, 7.6, 12.3, 9.6],
// [8, 12.3, 29.2, 10.6],
// [9, 16.9, 42.9, 14.8],
// [10, 12.8, 30.9, 11.6],
// [11, 5.3, 7.9, 4.7],
// [12, 6.6, 8.4, 5.2],
// [13, 4.8, 6.3, 3.6],
// [14, 4.2, 6.2, 3.4],
]}
options={{
chart: {
title: 'Czestotliwosc logowania',
},
}}
/>
But this failed. The error says:
Error: Row 0 has 13 columns, but must have 4 jsapi_compiled_default_module.js:129:153
So I'm assuming it's not actually returning the value, because if I do this:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
],
[
"3600000",
20,
9,
11
],
[
"5184000000",
5306,
28,
5278
]
]}
This produces a nice and accurate chart. But I cannot think of a way to make it work so that I don't have to type in each part of the array. Any ideas?
Edit: This works as well:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
// return this.state.sortedForChart.map(ch => ch);
this.state.sortedForChart[0],
this.state.sortedForChart[1],
]}
javascript arrays google-visualization
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
The problem:
I am trying to present this:
As a Google Chart. This is my array:
[
[
"3600000",
21,
9,
12
],
[
"18000000",
33,
5,
28
],
[
"86400000",
211,
14,
197
],
[
"172800000",
230,
7,
223
],
[
"259200000",
145,
1,
144
],
[
"345600000",
150,
2,
148
],
[
"432000000",
266,
5,
261
],
[
"518400000",
350,
2,
348
],
[
"604800000",
398,
3,
395
],
[
"1209600000",
2544,
19,
2525
],
[
"2592000000",
3758,
45,
3713
],
[
"5184000000",
5306,
28,
5278
]
]
So what I tried to do was this:
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
this.state.sortedForChart.map(ch => {
console.log(ch);
// This logs arrays like this:
// ["259200000", 144, 1, 143]
return ch;
})
// These are the examples provided by Google.
// [1, 37.8, 80.8, 41.8],
// [2, 30.9, 69.5, 32.4],
// [3, 25.4, 57, 25.7],
// [4, 11.7, 18.8, 10.5],
// [5, 11.9, 17.6, 10.4],
// [6, 8.8, 13.6, 7.7],
// [7, 7.6, 12.3, 9.6],
// [8, 12.3, 29.2, 10.6],
// [9, 16.9, 42.9, 14.8],
// [10, 12.8, 30.9, 11.6],
// [11, 5.3, 7.9, 4.7],
// [12, 6.6, 8.4, 5.2],
// [13, 4.8, 6.3, 3.6],
// [14, 4.2, 6.2, 3.4],
]}
options={{
chart: {
title: 'Czestotliwosc logowania',
},
}}
/>
But this failed. The error says:
Error: Row 0 has 13 columns, but must have 4 jsapi_compiled_default_module.js:129:153
So I'm assuming it's not actually returning the value, because if I do this:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
],
[
"3600000",
20,
9,
11
],
[
"5184000000",
5306,
28,
5278
]
]}
This produces a nice and accurate chart. But I cannot think of a way to make it work so that I don't have to type in each part of the array. Any ideas?
Edit: This works as well:
data={[
[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
],
// return this.state.sortedForChart.map(ch => ch);
this.state.sortedForChart[0],
this.state.sortedForChart[1],
]}
javascript arrays google-visualization
javascript arrays google-visualization
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
edited Nov 27 '18 at 11:07
Alex Ironside
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
asked Nov 27 '18 at 10:20
Alex IronsideAlex Ironside
1,068725
1,068725
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Ok solved it!
let dataForGeneralChart = [[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
]];
sortedForGeneralChart.forEach(ch => {
dataForGeneralChart.push(ch);
});
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={this.state.dataForGeneralChart}
options={{
chart: {
title: 'Czestotliwosc logowania wszystkich',
},
}}
/>
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53497453%2frendering-google-charts-based-on-a-generated-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Ok solved it!
let dataForGeneralChart = [[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
]];
sortedForGeneralChart.forEach(ch => {
dataForGeneralChart.push(ch);
});
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={this.state.dataForGeneralChart}
options={{
chart: {
title: 'Czestotliwosc logowania wszystkich',
},
}}
/>
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
add a comment |
0
Ok solved it!
let dataForGeneralChart = [[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
]];
sortedForGeneralChart.forEach(ch => {
dataForGeneralChart.push(ch);
});
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={this.state.dataForGeneralChart}
options={{
chart: {
title: 'Czestotliwosc logowania wszystkich',
},
}}
/>
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
add a comment |
0
0
0
Ok solved it!
let dataForGeneralChart = [[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
]];
sortedForGeneralChart.forEach(ch => {
dataForGeneralChart.push(ch);
});
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={this.state.dataForGeneralChart}
options={{
chart: {
title: 'Czestotliwosc logowania wszystkich',
},
}}
/>
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
Ok solved it!
let dataForGeneralChart = [[
'Czas',
'Wszyscy',
'Rozwiazujacy',
'Uczniowie',
// 'Admini',
]];
sortedForGeneralChart.forEach(ch => {
dataForGeneralChart.push(ch);
});
<Chart
chartType="Line"
loader={<div>Loading Chart</div>}
data={this.state.dataForGeneralChart}
options={{
chart: {
title: 'Czestotliwosc logowania wszystkich',
},
}}
/>
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
answered Nov 27 '18 at 11:28
Alex IronsideAlex Ironside
1,068725
1,068725
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53497453%2frendering-google-charts-based-on-a-generated-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
