CODEWITHSUNDEEP
javascriptamcharts
Oranges13
Oranges13

Reputation: 1084

Amcharts legend title based on date data

I have an AmChart that has been working very well. It displays date-based data for comparison between this year and two previous years (sales data).

Currently, I have the graphs with a title of "one year ago", "two years ago", etc. However, the product owners have asked that these titles be changed to the year (which is dynamic depending on the search query they use to generate the chart data). The chart data has a field called "fiscal year" which corresponds to the year they searched for. One year ago would need to be "fiscal year" minus 1, and so on for the other labels.

I have not found a way to modify the LEGEND TITLE dynamically based on the data provided to the chart. Suggestions?

https://jsfiddle.net/6sxf3Ldz/8/

Here is a fiddle example of the chart I currently have. The data has a field called fiscal_year which I want to use as the legend title.

Upvotes: 0

Views: 578

Answers (1)

xorspark
xorspark

Reputation: 16012

There isn't a way to make it dynamic outside of setting those titles upfront before creating your chart. If your setup is always going to be the same with graph objects after the first one representing fiscal_year - x, simply loop through them and apply the desired label before calling makeChart:

var graphs = [/* your graph array */];
for (var i = 1; i < graphs.length; ++i) {
    graphs[i].title = chartData[0].fiscal_year - i;
}
AmCharts.makeChart("canvas", {
  // ...
  graphs: graphs,
  // ...
});

Demo:

var chartData = [{
  "datestamp": "01\/01\/2018",
  "fiscal_week": "1",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/07\/2018",
  "fiscal_week": "2",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/14\/2018",
  "fiscal_week": "3",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/21\/2018",
  "fiscal_week": "4",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": "5",
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/28\/2018",
  "fiscal_week": "5",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": "1",
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/04\/2018",
  "fiscal_week": "6",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/11\/2018",
  "fiscal_week": "7",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/18\/2018",
  "fiscal_week": "8",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}];
var graphs = [{
    "id": "d1",
    "title": "Depletions",
    "type": "column",
    "valueField": "depletions",
    "valueAxis": "v1",
    "fillAlphas": .8,
    "lineColor": "#2c7fb8",
    "fillColors": "#2c7fb8",
    "clustered": false,
  },
  {
    "id": "p1",
    "type": "column",
    "title": "One Year Ago", // How can I make this label display the fiscal year - 1 based on the data? 
    "valueField": "prior_year",
    "lineColor": "#253494",
    "fillColors": "#253494",
    fillAlphas: .8,
    "clustered": false,
  },
  {
    "id": "p2",
    "type": "column",
    "title": "Two Years Ago", // How can I make this label display the fiscal year - 2 based on the data?
    "valueField": "two_years",
    "lineColor": "#41b6c4",
    "fillColors": "#41b6c4",
    fillAlphas: .8,
    "hidden": true,
    "clustered": false,
  },
  {
    "id": "p3",
    "type": "column",
    "title": "Three Years Ago", // How can I make this label display the fiscal year - 3 based on the data?
    "valueField": "three_years",
    "lineColor": "#a1dab4",
    "fillColors": "#a1dab4",
    fillAlphas: .8,
    "hidden": true,
    "clustered": false,
  },
];

for (var i = 1; i < graphs.length; ++i) {
  graphs[i].title = chartData[0].fiscal_year - i;
}
var chart = AmCharts.makeChart("canvas", {
  "type": "serial",
  "categoryField": "datestamp",
  "dataDateFormat": "MM/DD/YYYY",
  "borderColor": "#000000",
  "balloonDateFormat": "Week W, YYYY",
  "chartCursor": {
    "cursorAlpha": 0,
    "valueLineEnabled": true,
    "valueLineAlpha": .2,
    "cursorColor": "#000000",
    "valueLineBalloonEnabled": true,
  },
  "categoryAxis": {
    "parseDates": false,
    "centerLabels": true,
  },
  "dataProvider": chartData,
  "graphs": graphs,
  "legend": {
    "useGraphSettings": true,
  },
  "valueAxes": [{
    "id": "v1",
    "title": "Units",
    "minimum": 0,
  }],
  "export": {
    //"enabled": true,
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/plugins/export/export.min.js"></script>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.3/plugins/export/export.css">
<div class='row'>
  <div id="canvas" class='col-md-12' style="height: 450px; border: 3px solid #ccc;"></div>
</div>
<br class='clearfix' />

Upvotes: 2

Related Questions