Mixing
AM Charts - Line chart displaying in correct data
I’m using AM charts to plot amounts per year over a number of years. I have created a code pen to show you my issue:
https://codepen.io/conormdowney/pen/QzamJb
My code to draw the chart:
var dataProvider = [
{year: "2017", value: 50},
{year: "2018", value: 123},
{year: "2019", value: 150},
{year: "2020", value: 291}
];
var _chart = am4core.create('chartDiv', am4charts.XYChart);
_chart.paddingRight = 20;
_chart.data = dataProvider;
var dateAxis = _chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.baseInterval =
{
count: 1,
timeUnit: "year"
}
var valueAxis = _chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
// Create series
var series = _chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "year";
series.strokeWidth = 3;
series.connect = false;
series.tensionX = 0.8;
series.fillOpacity = 0.2;
series.tooltipText = "[bold]{valueY}[/]";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#fff");
bullet.strokeWidth = 3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = _chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
_chart.scrollbarX = scrollbarX;
_chart.cursor = new am4charts.XYCursor();
I have data from the year 2017 to 2020. When plotted it shows from 2016 to 2019, until you hover over the data in which case it highlights the data from the year after you are hovered. Can you tell me why this happens and how to correct it?
amcharts
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
add a comment |
I’m using AM charts to plot amounts per year over a number of years. I have created a code pen to show you my issue:
https://codepen.io/conormdowney/pen/QzamJb
My code to draw the chart:
var dataProvider = [
{year: "2017", value: 50},
{year: "2018", value: 123},
{year: "2019", value: 150},
{year: "2020", value: 291}
];
var _chart = am4core.create('chartDiv', am4charts.XYChart);
_chart.paddingRight = 20;
_chart.data = dataProvider;
var dateAxis = _chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.baseInterval =
{
count: 1,
timeUnit: "year"
}
var valueAxis = _chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
// Create series
var series = _chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "year";
series.strokeWidth = 3;
series.connect = false;
series.tensionX = 0.8;
series.fillOpacity = 0.2;
series.tooltipText = "[bold]{valueY}[/]";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#fff");
bullet.strokeWidth = 3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = _chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
_chart.scrollbarX = scrollbarX;
_chart.cursor = new am4charts.XYCursor();
I have data from the year 2017 to 2020. When plotted it shows from 2016 to 2019, until you hover over the data in which case it highlights the data from the year after you are hovered. Can you tell me why this happens and how to correct it?
amcharts
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
add a comment |
I’m using AM charts to plot amounts per year over a number of years. I have created a code pen to show you my issue:
https://codepen.io/conormdowney/pen/QzamJb
My code to draw the chart:
var dataProvider = [
{year: "2017", value: 50},
{year: "2018", value: 123},
{year: "2019", value: 150},
{year: "2020", value: 291}
];
var _chart = am4core.create('chartDiv', am4charts.XYChart);
_chart.paddingRight = 20;
_chart.data = dataProvider;
var dateAxis = _chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.baseInterval =
{
count: 1,
timeUnit: "year"
}
var valueAxis = _chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
// Create series
var series = _chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "year";
series.strokeWidth = 3;
series.connect = false;
series.tensionX = 0.8;
series.fillOpacity = 0.2;
series.tooltipText = "[bold]{valueY}[/]";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#fff");
bullet.strokeWidth = 3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = _chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
_chart.scrollbarX = scrollbarX;
_chart.cursor = new am4charts.XYCursor();
I have data from the year 2017 to 2020. When plotted it shows from 2016 to 2019, until you hover over the data in which case it highlights the data from the year after you are hovered. Can you tell me why this happens and how to correct it?
amcharts
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
I’m using AM charts to plot amounts per year over a number of years. I have created a code pen to show you my issue:
https://codepen.io/conormdowney/pen/QzamJb
My code to draw the chart:
var dataProvider = [
{year: "2017", value: 50},
{year: "2018", value: 123},
{year: "2019", value: 150},
{year: "2020", value: 291}
];
var _chart = am4core.create('chartDiv', am4charts.XYChart);
_chart.paddingRight = 20;
_chart.data = dataProvider;
var dateAxis = _chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.baseInterval =
{
count: 1,
timeUnit: "year"
}
var valueAxis = _chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.cursorTooltipEnabled = false;
// Create series
var series = _chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "year";
series.strokeWidth = 3;
series.connect = false;
series.tensionX = 0.8;
series.fillOpacity = 0.2;
series.tooltipText = "[bold]{valueY}[/]";
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#fff");
bullet.strokeWidth = 3;
var range = valueAxis.createSeriesRange(series);
range.value = 0;
range.endValue = 100;
range.contents.stroke = _chart.colors.getIndex(2);
range.contents.fill = range.contents.stroke;
range.contents.fillOpacity = 0.2;
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
_chart.scrollbarX = scrollbarX;
_chart.cursor = new am4charts.XYCursor();
I have data from the year 2017 to 2020. When plotted it shows from 2016 to 2019, until you hover over the data in which case it highlights the data from the year after you are hovered. Can you tell me why this happens and how to correct it?
amcharts
amcharts
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
asked Jan 2 at 17:32
discodowneydiscodowney
56821839
56821839
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
String-based dates need a corresponding inputDateFormat set in the chart's dateFormatter object to ensure that it is parsed consistently across all browsers (note that in Chrome the years are showing up correctly; I'm assuming you're using Firefox where you see 2016). Simply set the inputDateFormat to "yyyy" and you're all set.
_chart.dateFormatter.inputDateFormat = "yyyy";
You can find more information on date formats here and an updated codepen here.
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
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%2f54010697%2fam-charts-line-chart-displaying-in-correct-data%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
String-based dates need a corresponding inputDateFormat set in the chart's dateFormatter object to ensure that it is parsed consistently across all browsers (note that in Chrome the years are showing up correctly; I'm assuming you're using Firefox where you see 2016). Simply set the inputDateFormat to "yyyy" and you're all set.
_chart.dateFormatter.inputDateFormat = "yyyy";
You can find more information on date formats here and an updated codepen here.
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
add a comment |
String-based dates need a corresponding inputDateFormat set in the chart's dateFormatter object to ensure that it is parsed consistently across all browsers (note that in Chrome the years are showing up correctly; I'm assuming you're using Firefox where you see 2016). Simply set the inputDateFormat to "yyyy" and you're all set.
_chart.dateFormatter.inputDateFormat = "yyyy";
You can find more information on date formats here and an updated codepen here.
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
add a comment |
String-based dates need a corresponding inputDateFormat set in the chart's dateFormatter object to ensure that it is parsed consistently across all browsers (note that in Chrome the years are showing up correctly; I'm assuming you're using Firefox where you see 2016). Simply set the inputDateFormat to "yyyy" and you're all set.
_chart.dateFormatter.inputDateFormat = "yyyy";
You can find more information on date formats here and an updated codepen here.
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
String-based dates need a corresponding inputDateFormat set in the chart's dateFormatter object to ensure that it is parsed consistently across all browsers (note that in Chrome the years are showing up correctly; I'm assuming you're using Firefox where you see 2016). Simply set the inputDateFormat to "yyyy" and you're all set.
_chart.dateFormatter.inputDateFormat = "yyyy";
You can find more information on date formats here and an updated codepen here.
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
answered Jan 2 at 20:06
xorsparkxorspark
10.3k21328
10.3k21328
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
add a comment |
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Perfect, got the job done. thanks
– discodowney
Jan 2 at 20:13
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Also, I am using Chrome but it still shows up as 2016 if I remove that line
– discodowney
Jan 2 at 20:15
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
Weird. It doesn't do that for me and I'm using the latest vesrion of Chrome. In any case, I'm glad it fixed the problem.
– xorspark
Jan 2 at 22:05
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%2f54010697%2fam-charts-line-chart-displaying-in-correct-data%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
