I am using AmCharts 3 and experiencing a problem with my chart. The bullet stops showing up when I zoom out on the stock graph named 'medication'. graph image in zoom out (https://i.sstatic.net/btdWu.png) graph image in zoom in (https://i.sstatic.net/0lXbo.png)
I tried all the properties of amchart3 to shown the bullet like: "hideBulletsCount: 0" but nothing happen, I want the bullet to change based on the data provider, but it is not visible when the period selector is set to more than one day. I would like the bullet to always be shown
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
dataProvider: chartDataLive,
fieldMappings: [
{
fromField: "SSY",
toField: "SSY"
},
{
fromField: "SZY",
toField: "SZY"
},
{
fromField: "PJY",
toField: "PJY"
},
{
fromField: "Codeine/guailFENesin",
toField: "Codeine/guailFENesin"
},
{
fromField: "Azelastine",
toField: "Azelastine"
},
{
fromField: "Clarinex",
toField: "Clarinex"
},
{
fromField: "Diovan HTC",
toField: "Diovan HTC"
},
{
fromField: "Gabapentin",
toField: "Gabapentin"
},
{
fromField: "LEVOFLOXACIN",
toField: "LEVOFLOXACIN"
},
{
fromField: "Naproxen",
toField: "Naproxen"
},
{
fromField: "Pramipexole",
toField: "Pramipexole"
},
{
fromField: "Repatha",
toField: "Repatha"
},
{
fromField: "PRAVACHOL",
toField: "PRAVACHOL"
},
{
fromField: "Welco",
toField: "Welco"
},
{
fromField: "Amlodipine",
toField: "Amlodipine"
}
],
categoryField: "DATE",
stockEvents: (function(){
var guideArray = []
guideArray.push({
date: new Date("2018-08-12T16:00:00.000Z"),
type: "arrowUp",
backgroundColor: "#85CDE6",
graph: "m3",
description: "This is description of an event"
})
return guideArray
}()),
}],
panels: [
{
showCategoryAxis: false,
title: "Blood Pressure",
percentHeight: 60,
parseDates: true,
legend: {},
stockGraphs: (function(){
var guideArray = []
guideArray.push(
{
hideBulletsCount: 0,
id: "graph1",
valueField: "SSY",
type: "line",
title: "Systolic",
bullet:"round",
// hideBulletsCount: 0,
fillAlphas: 0,
lineColor: lineColors[0],
fillColors: lineColors[0],
useDataSetColors: false,
balloonText: "[[title]]<br><b><span style='font-size:14px;'>[[SSY]]</span></b>"
}
)
guideArray.push(
{
id: "graph2",
valueField: "SZY",
type: "line",
title: "Diastolic",
bullet:"round",
fillAlphas: 0,
lineColor: lineColors[1],
fillColors: lineColors[1],
useDataSetColors: false,
balloonText: "[[title]]<br><b><span style='font-size:14px;'>[[SZY]]</span></b>"
}
)
guideArray.push(
{
id: "graph3",
valueField: "PJY",
type: "line",
title: "Mean Arterial Pressure (MAP)",
bullet:"round",
fillAlphas: 0,
lineColor: lineColors[2],
fillColors: lineColors[2],
useDataSetColors: false,
balloonText: "[[title]]<br><b><span style='font-size:14px;'>[[PJY]]</span></b>"
}
)
return guideArray
}())
},
{
title: "Medication",
percentHeight: 40,
bulletSize: 20,
showBalloon : true,
stockGraphs: (function(){
var guideArray = []
for (var i = 0; i < medication.length; i++) {
guideArray.push(
{
id:"m"+[i],
valueField: medication[i].category,
type: "line",
cornerRadiusTop: 2,
fillAlphas: 0,
bulletField:"bullet",
bulletBorderColor: "black",
bulletBorderAlpha: 1,
bulletBorderThickness: 3,
bulletSize: 1,
showBalloon : true,
hideBulletsCount: 0,
lineThickness: 3,
lineColor: medColors[i],
fillColors: medColors[i],
useDataSetColors: false,
balloonText: medication[i].category,
}
)
}
return guideArray
}()),
stockLegend: {
valueTextRegular: " ",
markerType: "none"
}
},
],
panelsSettings: {
startDuration: 1,
usePrefixes: true
},
categoryAxesSettings: {
dashLength: 5,
minPeriod : "hh",
equalSpacing: true
},
valueAxesSettings: {
dashLength: 5
},
chartScrollbarSettings: {
graph: "graph1",
graphType: "line"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
periodSelector: {
periods: [{
period: "DD",
count: 1,
label: "1 day"
}, {
period: "DD",
selected: true,
count: 5,
label: "5 days"
}, {
period: "MM",
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
}
});
The Mystery of the Vanishing Bullets ... took me a while, but it's interesting. The cause is apparently the data grouping function of amcharts stock. It seems others reported similar problems a while ago, with v4.
The immediate solution is to disable data grouping by adding
chart.categoryAxesSettings.maxSeries = 0;
at the end of the script.
This creates a problem if all that data is shown, especially with full MAX interval which is useless and should probably be removed.
Now, that might be exactly what you want since data grouping is modifying the values of the blood pressure (not to mention mine and probably yours) which might not be OK. However, if you want data grouping only for the upper panel and no data grouping for the lower panel (to preserve the bullets on zoom), then there's no simple solution ... we may explore the next days some tricks like creating a second hidden x axis, since data grouping appears to be controlled per axes (hopefully), and not per series.