Export data from highcharts in csv file with dates in milliseconds
I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
angularjs csv highcharts export-to-csv
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
add a comment |
I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
angularjs csv highcharts export-to-csv
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
Would need tomap()the series and parse and convert date strings usingDateAPI before passing todownloadJSON()
– charlietfl
Nov 26 '18 at 16:38
add a comment |
I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
angularjs csv highcharts export-to-csv
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
angularjs csv highcharts export-to-csv
angularjs csv highcharts export-to-csv
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
asked Nov 26 '18 at 16:17
AdrienAdrien
71631027
71631027
Would need tomap()the series and parse and convert date strings usingDateAPI before passing todownloadJSON()
– charlietfl
Nov 26 '18 at 16:38
add a comment |
Would need tomap()the series and parse and convert date strings usingDateAPI before passing todownloadJSON()
– charlietfl
Nov 26 '18 at 16:38
Would need to
map() the series and parse and convert date strings using Date API before passing to downloadJSON()– charlietfl
Nov 26 '18 at 16:38
Would need to
map() the series and parse and convert date strings using Date API before passing to downloadJSON()– charlietfl
Nov 26 '18 at 16:38
add a comment |
1 Answer
1
active
oldest
votes
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
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
});
}
});
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%2f53485148%2fexport-data-from-highcharts-in-csv-file-with-dates-in-milliseconds%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
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
add a comment |
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
add a comment |
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
answered Nov 27 '18 at 9:23
Wojciech ChmielWojciech Chmiel
1,8311210
1,8311210
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
add a comment |
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
Thanks a lot! It works really well!
– Adrien
Nov 27 '18 at 13:12
add a comment |
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.
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%2f53485148%2fexport-data-from-highcharts-in-csv-file-with-dates-in-milliseconds%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
Would need to
map()the series and parse and convert date strings usingDateAPI before passing todownloadJSON()– charlietfl
Nov 26 '18 at 16:38