I have a Highcharts chart in my application, it is a line graph showing the number of employees at each department for several months over several years. When user click on that series it should drill down into another line chart which shows the headcount of two sub departments of Department A which are Department A1 and Department A2. I tried adding as two series under drill down, it seems not working. What is I'm missing here.
following is a sample code,
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container-main-bar",
type: "line"
},
title: {
text: null
},
series: [{
"name": "Department A",
"data": [{
"name": "Month1",
"y": 27,
"drilldown": "levelA2"
},
{
"name": "Month2",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month3",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month4",
"y": 26,
"drilldown": "levelA2"
},
{
"name": "Month5",
"y": 21,
"drilldown": "levelA2"
},
{
"name": "Month6",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month7",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month8",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month9",
"y": 21,
"drilldown": "levelA2"
},
{
"name": "Month10",
"y": 20,
"drilldown": "levelA2"
},
{
"name": "Month11",
"y": 22,
"drilldown": "levelA2"
},
{
"name": "Month12",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month13",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month14",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month15",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month16",
"y": 26,
"drilldown": "levelA2"
},
{
"name": "Month17",
"y": 24,
"drilldown": "levelA2"
},
{
"name": "Month18",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month19",
"y": 23,
"drilldown": "levelA2"
},
{
"name": "Month20",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month21",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month22",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month23",
"y": 25,
"drilldown": "levelA2"
},
{
"name": "Month24",
"y": 25,
"drilldown": "levelA2"
}
]
} ],
"drilldown": {
"series": [{
"name": 'Headcount',
"id": 'levelA2',
"data": [{
"name": "Month1",
"y": 10,
},
{
"name": "Month2",
"y": 12,
},
{
"name": "Month3",
"y": 11,
},
{
"name": "Month4",
"y": 10,
},
{
"name": "Month5",
"y": 9,
},
{
"name": "Month6",
"y": 8,
},
{
"name": "Month7",
"y": 10,
},
{
"name": "Month8",
"y": 12,
},
{
"name": "Month9",
"y": 11,
},
{
"name": "Month10",
"y": 13,
},
{
"name": "Month11",
"y": 14,
},
{
"name": "Month12",
"y": 10,
},
{
"name": "Month13",
"y": 9,
},
{
"name": "Month14",
"y": 8,
},
{
"name": "Month15",
"y": 11,
},
{
"name": "Month16",
"y": 10,
},
{
"name": "Month17",
"y": 9,
},
{
"name": "Month18",
"y": 10,
},
{
"name": "Month19",
"y": 11,
},
{
"name": "Month20",
"y": 12,
},
{
"name": "Month21",
"y": 13,
},
{
"name": "Month22",
"y": 10,
},
{
"name": "Month23",
"y": 11,
},
{
"name": "Month24",
"y": 12,
}
]
},
{
"name": 'Headcount',
"id": 'levelA2,
"data": [{
"name": "Month1",
"y": 1,
},
{
"name": "Month2",
"y": 2,
},
{
"name": "Month3",
"y": 3,
},
{
"name": "Month4",
"y": 4,
},
{
"name": "Month5",
"y": 5,
},
{
"name": "Month6",
"y":6,
},
{
"name": "Month7",
"y": 7,
},
{
"name": "Month8",
"y": 8,
},
{
"name": "Month9",
"y": 9,
},
{
"name": "Month10",
"y": 10,
},
{
"name": "Month11",
"y": 11,
},
{
"name": "Month12",
"y": 12,
},
{
"name": "Month13",
"y": 9,
},
{
"name": "Month14",
"y": 8,
},
{
"name": "Month15",
"y": 11,
},
{
"name": "Month16",
"y": 10,
},
{
"name": "Month17",
"y": 9,
},
{
"name": "Month18",
"y": 10,
},
{
"name": "Month19",
"y": 11,
},
{
"name": "Month20",
"y": 12,
},
{
"name": "Month21",
"y": 13,
},
{
"name": "Month22",
"y": 10,
},
{
"name": "Month23",
"y": 11,
},
{
"name": "Month24",
"y": 12,
}
]
}]
},
xAxis: {
categories: [{
"name": "2013",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2014",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2015",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2016",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2017",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
{
"name": "2018",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
}
]
},
yAxis: [{ // Primary yAxis
title: {
text: 'No. of Employees'
},
}],
});
});
http://jsfiddle.net/yasirunilan/qh7zg5kn/4/
Default Highcharts drilldown does not allow multiple series to be displayed, but you can easy create own drilldown behavior:
events: {
drilldown: function(e) {
var drilldownseries = [{
"name": 'Headcount',
"id": 'levelA2',
"data": [...]
},
{
"name": 'Headcount',
"id": 'levelA2',
"data": [...]
}
]
if (!e.seriesOptions) {
chart.addSingleSeriesAsDrilldown(e.point, drilldownseries[0]);
chart.addSingleSeriesAsDrilldown(e.point, drilldownseries[1]);
chart.applyDrilldown();
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/da1vuj26/
API Reference: https://www.highcharts.com/docs/chart-concepts/drilldown
Related
I am working with Plotly.js in a space where i need to dynamically change the data loaded in a plot.
The approach I took was to re-plot the plot div with new data that would be taken from a json. The data will be selected based on input boxes which will select the data from the json.
I have included a basic example in the snippet below.
How to reproduce:
Change the left selector to 'week'.
Then change the right selector to 'profit'.
Then change the left selector back to 'month'.
After this the plot will not display for this specific combination even though the correct data exists before the newPlot call.
However if you reload the snippet and then cycle through all the options in the right box initially and repeat the above process. It will work as expected.
Why does it only happen when selections are done in this order?
var RevenueTrend = class {
constructor(e) {
this.data = e;
this.periodicitySelector = document.getElementById('revenue_trend_periodicity');
this.measureSelector = document.getElementById('revenue_trend_measure');
// set default data
this.#a('monthly', 'revenue');
// set callbacks for boxes
this.periodicitySelector.addEventListener('change', () => {
this.updateBySelector()
}, !1);
this.measureSelector.addEventListener('change', () => {
this.updateBySelector();
}, !1);
}
updateBySelector = () => {
this.#a(this.periodicitySelector.value, this.measureSelector.value);
};
#a = (e, t) => {
let r = this.data.data[t][e];
let i = this.data.layout[t];
let c = this.data.config;
// Plotly.purge('revenue_trend');
Plotly.newPlot('revenue_trend', r, i, c)
};
}
let data = {
"config": {
"displaylogo": false,
"editable": true,
"responsive": true,
"scrollZoom": false
},
"data": {
"margin": {
"monthly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
0.34047666529174736,
0.3457742367934246,
0.360425447773756,
0.35145317789771846,
0.35262465169115526,
0.36081828971765284,
0.3482103705232538,
0.3544357552302324,
0.3560519434681411,
0.3530277177894459,
0.3481856525787436
]
}
],
"weekly": [
{
"hovertemplate": "Margin: %{y:.1%} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
0.3525772625730744,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.32872302637273987,
0.31988710760016853,
0.6648776759648305,
0.36251039456330314,
0.3479492487227466,
0.36032892904889136,
0.35825354939402965,
0.3652140945623148,
0.35702058696618694,
0.3357665025509389,
0.35910528738699476,
0.3427007353759514,
0.34856822640364327,
0.37832888011952154,
0.34193158789278555,
0.35641605769889595,
0.3448526126036418,
0.3601298674795317,
0.34371914770696416,
0.35507083830741926,
0.35928883722389243,
0.3761116965344845,
0.3747882834748884,
0.3368771464780037,
0.34942511673599835,
0.3455765848399854,
0.3532858548316179,
0.36141903268210585,
0.3498830917602961,
0.3618410934198679,
0.3438166358418366,
0.34449309768685416,
0.356864537860347,
0.34723529927268637,
0.3676745634890173,
0.3618693942594029,
0.34298588976218763,
0.3352566880165647,
0.3604452053811187,
0.3747103844651644,
0.3606845347991698,
0.35760695701012907,
0.35939319863236174,
0.3143066542562211,
0.0,
0.0
]
}
]
},
"profit": {
"monthly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
82241.71801566076,
698471.2893310541,
809776.0576551692,
905852.9974110408,
806949.604447975,
879519.9288410447,
826189.5344694187,
808316.6091934182,
906734.9758119395,
979581.009182293,
908955.4254592669
]
},
{
"hovertemplate": "Profit: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2020,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
1135979.408899994,
964943.64602906,
995304.3674288283,
1024706.6108813051,
1103515.5129930207,
1015253.3387089209,
1031872.3701810606,
961556.9417143296,
960168.8140742977,
975513.6905591306,
940461.8968359237,
957659.4350654411
]
}
],
"weekly": [
{
"hovertemplate": "Profit: %{y:$.3s} <br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
53940.84905653694,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
112362.51304952896,
88316.08623819001,
-13591.410108961667,
363463.5909494356,
230162.22721852647,
205764.7039970004,
181015.46405094466,
191425.28083589178,
185312.97173273505,
179535.2064339334,
209365.34755655692,
189140.77872531046,
192786.1297563088,
210319.9968558866,
174347.49981516943,
233383.52298594668,
177403.35738587088,
192778.39938264445,
206603.86815812724,
205930.40940254647,
197144.6390165437,
181545.0009244157,
209428.82504632138,
189043.93557342276,
174954.73107864038,
186139.80161511753,
154918.25249529246,
235388.5039071208,
184606.3008933945,
191768.82369324705,
196552.9806996637,
166520.89121735393,
240248.02746187564,
195047.01679875085,
231842.86053096992,
185437.38300792413,
200771.21331067267,
230667.93972635642,
224753.03475951828,
211027.61818081193,
210132.7742313298,
240756.1128576225,
210571.98628046684,
193553.70303329843,
0.0,
0.0
]
}
]
},
"revenue": {
"monthly": [
{
"hovertemplate": "Revenue: %{y:$.3s} <br> Month: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"y": [
0.0,
241548.76500916603,
2020021.2017193772,
2246722.762382407,
2577450.011491051,
2288409.5044913036,
2437570.250469525,
2372673.5456727156,
2280572.9875315665,
2546636.782767828,
2774799.1441469146,
2610548.1909645973
]
}
],
"weekly": [
{
"hovertemplate": "Revenue: %{y:$.3s}<br> Week: %{x}",
"mode": "lines",
"name": 2019,
"type": "scattergl",
"x": [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
"31",
"32",
"33",
"34",
"35",
"36",
"37",
"38",
"39",
"40",
"41",
"42",
"43",
"44",
"45",
"46",
"47",
"48",
"49",
"50",
"51",
"52",
"53"
],
"y": [
152990.15218077847,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
0.0,
341815.1575488382,
276085.16923594667,
-20441.97090726295,
1002629.4318740314,
661482.1789769826,
571046.8613778194,
505271.9347990396,
524145.3812600044,
519054.0223673036,
534702.5539174988,
583019.3954535999,
551912.3806892863,
553080.0433114112,
555918.4294612729,
509890.0072076319,
654806.4205993534,
514432.40068988653,
535302.4472306541,
601083.3831528822,
579969.9304628688,
548707.9435582134,
482689.0591204212,
558792.3483215119,
561165.8064366985,
500693.0603984721,
538635.4567434222,
438506.80794771464,
651289.7291553597,
527622.8124217782,
529980.7765911351,
571679.6693633012,
483379.47069326247,
673219.1125022703,
561714.2531513739,
630565.4063498881,
512442.8480265313,
585362.8948114432,
688033.8199694896,
623542.8614506731,
563175.2599598169,
582594.3558914505,
673242.2514106827,
585909.7698058267,
615811.6616758438,
0.0,
0.0
]
}
]
}
},
"layout": {
"margin": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Margin Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickformat": ".1%",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Margin"
}
}
},
"profit": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Profit Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Profit"
}
}
},
"revenue": {
"title": {
"font": {
"color": "#172631",
"size": 18.0
},
"text": "Revenue Trend",
"x": 0.5,
"xref": "paper"
},
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
"yaxis": {
"tickfont": {
"color": "#172631"
},
"tickprefix": "$",
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Revenue"
}
}
}
}
};
new RevenueTrend(data);
<html>
<head>
<title>My First Web Page</title>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js" crossorigin></script>
</head>
<body>
<div id="revenue_trend"></div>
<div class="control-row">
Periodicity:
<select id="revenue_trend_periodicity">
<option>monthly</option>
<option>weekly</option>
</select>
Measure:
<select id="revenue_trend_measure">
<option>revenue</option>
<option>profit</option>
<option>margin</option>
</select>
</div>
</body>
</html>
After long debugging, the problem is in the layout, going more deeply, it is with the type of x-axis which is months or weeks. The values of months and weeks are considered categorical values, not integer numbers. To solve this problem, please change each xaxis to the following configuration:
"xaxis": {
"hoverformat": "%b",
"tickmode": "array",
"type":"category", //<------------ add this line
"title": {
"font": {
"color": "#172631",
"size": 12.0
},
"text": "Date"
}
},
Output:
I'm not sure why, but you can solve your problem by passing a new layout object every time you create a new chart (instead of re-using the existing layout object):
let i = structuredClone(this.data.layout[t]);
I have 2 arrays of objects. Seen below
var subs = new Array();
var list_items = new Array();
subs = [
{ "value": 3, "text": "Guyana" },
{ "value": 4, "text": "St Lucia" },
{ "value": 5, "text": "Suriname" },
{ "value": 6, "text": "Barbados" },
{ "value": 7, "text": "3rd Party" },
{ "value": 8, "text": "JDL" }
];
list_items = [
{ "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }
];
What I'm trying to do is filter the "Subs" array, where any objects in the "list_items" array with the attribute ("StageRecipNum" matching the Subs "value" and "Resent" = false) should be removed from "Subs".
Here is the code I have to try to do this.
for (var i = 0; i < subs.length; i++) {
for (var j = 0; j < list_items.length; j++) {
if (parseInt(subs[i].value) == parseInt(list_items[j].StageRecipNum) &&
list_items[j].Resent == false) {
var hold = parseInt(list_items[j].StageRecipNum);
subs = subs.filter(el => el.value !== hold);
console.log(subs);
}
}
}
Afterward I am taking the remaining "Subs" array items and putting it in a dropdownlist to display on a form. All that works, the issue I am having is that one of the items in the list_items array keeps returning in the dropdownlist when it's not supposed to be there.
In the java console of visual studio code using Quokka, I get the below
As you can see, number 6 which is Barbados is not supposed to be there. I can't figure out why it's there and all the rest that not supposed to be in the array are not there. Only the 3rd Party and JDL supposed to be on the list.
I need help. What did I do wrong?
You can apply filter with some on the second array by matching StageRecipNum with value and resent property to be false. and once found take negate of some. Something like this:
const subs = [ { "value": 3, "text": "Guyana" }, { "value": 4, "text": "St Lucia" }, { "value": 5, "text": "Suriname" }, { "value": 6, "text": "Barbados" }, { "value": 7, "text": "3rd Party" }, { "value": 8, "text": "JDL" } ];
const list_items = [ { "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" } ];
const result = subs.filter(a=>!list_items.some(b=>b.StageRecipNum===a.value && b.Resent===false));
console.log(result);
You could take a Set and filter the array.
const
subs = [{ value: 3, text: "Guyana" }, { value: 4, text: "St Lucia" }, { value: 5, text: "Suriname" }, { value: 6, text: "Barbados" }, { value: 7, text: "3rd Party" }, { value: 8, text: "JDL" }],
list_items = [{ Id: 168, Month: "May", Resent: false, Stage: "2", StageRecipNum: 3, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 169, Month: "May", Resent: false, Stage: "2", StageRecipNum: 4, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 170, Month: "May", Resent: false, Stage: "2", StageRecipNum: 6, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 171, Month: "May", Resent: false, Stage: "2", StageRecipNum: 5, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }],
values = new Set(list_items.map(({ StageRecipNum }) => StageRecipNum)),
result = subs.filter(({ value }) => !values.has(value));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
The problem arises because you are altering the array which you are looping over. The loop ends prematurely, because the length of the array is no longer the original length after removing items, resulting in not evaluating the remaining items.
To keep using the same code, keep updating a copy of the array while keeping the subs variable in its original state.
Below a less verbose way of achieving the same result. Filter the list_items for values where Resent is false and select its StageRecipNum. Next, filter the subs for values where the value is not contained by the list items:
var subs = [
{ "value": 3, "text": "Guyana" },
{ "value": 4, "text": "St Lucia" },
{ "value": 5, "text": "Suriname" },
{ "value": 6, "text": "Barbados" },
{ "value": 7, "text": "3rd Party" },
{ "value": 8, "text": "JDL" }
];
var list_items = [
{ "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }
];
var list_item_nums = list_items.filter(x => !x.Resent).map(x => x.StageRecipNum);
var filtered_subs = subs.filter(x => !list_item_nums.includes(x.value));
console.log(filtered_subs);
I have a Highcharts chart in my application and it supports drill down capabilities. Char is a line chart. Sample code can be seen below:
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function (e) {
}
},
},
exporting: { enabled: true },
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter () {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [
{
"name": "Australia",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "Sri Lanka",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "America",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
},
{
"name": "UK",
"colorByPoint": true,
"data": [
{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018-09-10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018-09-10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018-09-10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018-09-10
},
{
"name": 2014,
"y":80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018-09-10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018-09-10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [
{
"name": 'Sales by Location',
"id": 'Year0',
"data": [
{
"name": "Adelaide",
"y": 3,
"date": 2018-09-10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018-08-31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018-07-10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018-06-30,
"drilldown": true,
"year": 2018
},
]
}
]
}
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container-main-bar"></div>
As it is a line graph there should be lines connecting each series. But in my graph I don't see those lines connecting the dots. Is there any other thing that we need to do to get the lines in the graph.
Your problem is caused by colorByPoint property, you should not use this option in line series.
Highcharts.chart('container', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function(e) {
}
},
},
exporting: {
enabled: true
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [{
"name": "Australia",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "Sri Lanka",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "America",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
},
{
"name": "UK",
//"colorByPoint": true,
"data": [{
"name": 2018,
"y": 10,
"color": '#ff910c',
"drilldown": 'Year5',
"date": 2018 - 09 - 10
},
{
"name": 2017,
"y": 50,
"color": '#ff910c',
"drilldown": 'Year4',
"date": 2018 - 09 - 10
},
{
"name": 2016,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year3',
"date": 2018 - 09 - 10
},
{
"name": 2015,
"y": 20,
"color": '#ff910c',
"drilldown": 'Year2',
"date": 2018 - 09 - 10
},
{
"name": 2014,
"y": 80,
"color": '#ff910c',
"drilldown": 'Year1',
"date": 2018 - 09 - 10
},
{
"name": 2013,
"y": 60,
"color": '#ff910c',
"drilldown": 'Year0',
"date": 2018 - 09 - 10
}
]
}
],
"drilldown": {
activeAxisLabelStyle: {
textDecoration: 'none',
},
activeDataLabelStyle: {
textDecoration: 'none',
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: -30,
y: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#a4edba'
},
select: {
stroke: '#039',
fill: '#a4edba'
}
}
}
},
"series": [{
"name": 'Sales by Location',
"id": 'Year0',
"data": [{
"name": "Adelaide",
"y": 3,
"date": 2018 - 09 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Canberra",
"y": 5,
"date": 2018 - 08 - 31,
"drilldown": true,
"year": 2018
},
{
"name": "Hobart",
"y": 2,
"date": 2018 - 07 - 10,
"drilldown": true,
"year": 2018
},
{
"name": "Sydney",
"y": 5,
"date": 2018 - 06 - 30,
"drilldown": true,
"year": 2018
},
]
}]
}
});
Live demo: http://jsfiddle.net/BlackLabel/gtcod176/
I have a highchart in my application and I want to show how sales have been happening over past months and I want to show months of three years. SO the X axis should be something like following. Earlier I had a requirement like to show the year as a group and months of each year as sub grpups similar to following image. Grouped Categories
I achieved it through BlackLabel plugin. But now I want to check whether we can have months on the XAxix without year categorization. So only the months will be displayed on XAxix. So it should be like following second image.Is there a way to do this? Sample code is as follows.
Expected Way
Highcharts.chart('container-main-bar', {
chart: {
type: 'line',
events: {
drilldown: function(e) {
},
drillup: function(e) {
}
},
},
exporting: {
enabled: true
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category',
labels: {
formatter() {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
yAxis: {
title: {
text: 'Sales'
},
allowDecimals: false,
labels: {
formatter() {
return `<span style="color: #626262">${this.value}</span>`
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
},
"series": [{
"name": "Australia",
"data": [{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year5',
},
{
"name": "Feb",
"y": 40,
"color": '#ff910c',
"drilldown": 'Year4',
},
{
"name": "Mar",
"y": 50,
"color": '#ff910c',
"drilldown": 'Year3',
},
{
"name": "Apr",
"y": 30,
"color": '#ff910c',
"drilldown": 'Year2',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year1',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jan",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Feb",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Mar",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Apr",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "May",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jun",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Jul",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Aug",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Sep",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Oct",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Nov",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
},
{
"name": "Dec",
"y": 20,
"color": '#ff910c',
"drilldown": 'Year0',
}
]
}]
});
https://jsfiddle.net/Lwbmauks/32/
You can have the same category names, but you have to set:
xAxis: {
type: 'category',
uniqueNames: false
}
Live demo: http://jsfiddle.net/BlackLabel/y4xa5e7w/
API: https://api.highcharts.com/highcharts/xAxis.uniqueNames
I have an serial amcharts, with 2 (it could be more) graphs on it. I am trying to select the column and highlight them. Taking reference from these two questions:
Highlighting a bar
Amcharts Guide
The column should be highlighted with a click along with highlighting the graph items in that column just like highlighting a bar in bar-chart. How to select the whole column with a click along with graph items?
This jsfiddle is for the amcharts graph.
JSFIDDLE
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [
{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (e.chart.categoryAxis.guides.length === 0) {
var guide = new AmCharts.Guide();
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#c44";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.fillColor = "#CC0000";
e.chart.categoryAxis.addGuide(guide);
} else {
e.chart.categoryAxis.guides[0].category = month;
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can combine the above solutions by using a colorField to set/unset to change the bullet color upon click since you're using a line chart instead of a column chart.
Here's an updated example using your solution from the comments. Note that I also tweaked the de-select handling to account for whether the user wants to re-select the previously de-selected field. For simplicity, I used the same colorField for both graphs, but feel free to adapt it to your needs.
var pre_month = "";
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (pre_month === month) {
e.chart.categoryAxis.guides.pop();
e.chart.dataProvider[e.chart.lastCursorPosition].selected = undefined;
pre_month = undefined; //unset so that the user can re-select the current position after de-selecting.
} else {
pre_month = month;
var guide = new AmCharts.Guide();
e.chart.categoryAxis.guides.pop();
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined; //clear out previously selected line
break;
}
}
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#b6f9ee";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineThickness = 0;
guide.fillColor = "#b6f9ee";
e.chart.categoryAxis.addGuide(guide);
e.chart.dataProvider[e.chart.lastCursorPosition].selected = "#880000";
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>