Highlighting the highest and lowest point in amcharts

Question

Could someone help me on changing the bullet or highlighting the highest and lowest values using amcharts?.

I am using serial chart. The condition given in the function

Answer 1

You are correctly setting the size/type parameters for high/low data points in data.

However, your graphs are not set up to use those fields.

To make the graph look for bullet type in data use its bulletField property. For bullet size: bulletSizeField:

graph.bulletSizeField = "bulletSize";
graph.bulletField = "markerType";

// ...

graph1.bulletSizeField = "bulletSize";
graph1.bulletField = "markerType";

Answer 2

Solution posted martynasm !!! Thanks.

   var chart;

            var chartData = [

                {"date": "2006", "value": 67, "value1": 83},
                {"date": "2007", "value": 70, "value1": 90},
                {"date": "2008", "value": 66, "value1": 56},
                {"date": "2009", "value": 65, "value1": 50},
                {"date": "2010", "value": 55, "value1": 90},
                {"date": "2011", "value": 60, "value1": 89},
                {"date": "2012", "value": 60, "value1": 52},
                {"date": "2013", "value": 61, "value1": 63},
                {"date": "2014", "value": 65, "value1": 74},
                {"date": "2015", "value": 64, "value1": 53},
                {"date": "2016", "value": 66, "value1": 61},
                {"date": "2017", "value": 60, "value1": 76},
                {"date": "2018", "value": 62, "value1": 65},
                {"date": "2019", "value": 61, "value1": 51},
            ];


            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();

                chart.dataProvider = chartData;
                chart.dataDateFormat = "YYYY";
                chart.categoryField = "date";
                chart.addTitle("Graph Chart-Connects/ Disconnects");
                chart.addListener("rendered", highlightY1);
                chart.addListener("rendered", highlightY2);


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "YYYY"; // our data is daily, so we set minPeriod to DD
                categoryAxis.gridAlpha = 0.1;
                categoryAxis.minorGridAlpha = 0.1;
                categoryAxis.axisAlpha = 0;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.inside = true;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.tickLength = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.showFirstLabel = false;
                valueAxis.showLastLabel = false;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "Connects";
                graph.dashLength = 3;
                graph.lineColor = "#00CC00";
                graph.valueField = "value";
                graph.bullet = "round";
                //graph.bulletSizeField = "30";
                // graph.bulletField = "value";
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Connects:[[value]]</span></b>";
                chart.addGraph(graph);


                // GRAPH
                var graph1 = new AmCharts.AmGraph();
                graph1.title = "Disconnects";
                graph1.dashLength = 3;
                graph1.lineColor = "#EF9B0F";
                graph1.valueField = "value1";
                graph1.bullet = "square";
                //graph1.bulletSizeField = "30";
                // graph1.bulletField = "bullet";
                graph1.balloonText = "[[category]]<br><b><span style='font-size:14px;'>Disconnects:[[value1]]</span></b>";
                graph1.fillToGraph = graph;
                chart.addGraph(graph1);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.valueLineEnabled = true;
                chartCursor.valueLineBalloonEnabled = true;
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // HORIZONTAL GREEN RANGE
                var guide = new AmCharts.Guide();
                guide.value = 10;
                guide.toValue = 20;
                guide.fillColor = "#00CC00";
                guide.inside = true;
                guide.fillAlpha = 0.2;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var legend = new AmCharts.AmLegend();
                legend.marginLeft = 110;
                //    legend.data = [{markerType:"round",title:"Connects",color:"#EF9B0F"}, {markerType:"square",title:"Disconnects",color:"#00CC00"}]
                chart.addLegend(legend);
                // WRITE
                chart.write("chartdiv");

            });


            function highlightY1(event) {
                // get chart and value axis
                var chart = event.chart;
               // var axis = chart.valueAxes[0];
                var graph = chart.graphs[0];
                
                graph.bulletSizeField = "bulletSize1";
                graph.bulletField = "markerType1";

                if (chart.minMaxMarked)
                    return;
                
                var connectsValue = new Array();

                for (var i = 0; i < chart.dataProvider.length; i++) {                    
                    connectsValue[i] = chart.dataProvider[i][graph.valueField];                    
                }
                connectsValue.sort();                
                 // find data points with highest and biggest values
                 
                connectsMax = parseInt(connectsValue[connectsValue.length - 1]);
                connectsMin = parseInt(connectsValue[0]);
             
                for (var i = 0; i < chart.dataProvider.length; i++) {
                    var dp = chart.dataProvider[i];
                    
                    if (dp[graph.valueField] == connectsMax) {
                        console.log(dp[graph.valueField] + "<=>" + connectsMax);
                        dp.markerType1 = "triangleUp";
                        dp.bulletSize1 = 18;
                    }

                    if (dp[graph.valueField] == connectsMin) {
                        // alert('test');
                        console.log(dp[graph.valueField] + "<=>" + connectsMin);
                        dp.markerType1 = "triangleDown";
                        dp.bulletSize1 = 18;
                    }                    
                }

                // set flag that we're done already
                //chart.minMaxMarked = true;

                // take in updated data
               // chart.validateData();
            }
            
            
            function highlightY2(event) {
                // get chart and value axis
                var chart = event.chart;
               // var axis = chart.valueAxes[0];
                var graph1 = chart.graphs[1];
                
                graph1.bulletSizeField = "bulletSize2";
                graph1.bulletField = "markerType2";

                if (chart.minMaxMarked)
                    return;
                
                var disconnectsValue = new Array();

                for (var i = 0; i < chart.dataProvider.length; i++) {                    
                    disconnectsValue[i] = chart.dataProvider[i][graph1.valueField];                    
                }
                disconnectsValue.sort();                
                 // find data points with highest and biggest values
                 
                disconnectsMax = parseInt(disconnectsValue[disconnectsValue.length - 1]);
                disconnectsMin = parseInt(disconnectsValue[0]);
             
                for (var i = 0; i < chart.dataProvider.length; i++) {
                    var dp = chart.dataProvider[i];
                    
                    if (dp[graph1.valueField] == disconnectsMax) {
                        console.log(dp[graph1.valueField] + "<=>" + disconnectsMax);
                        dp.markerType2 = "triangleUp";
                        dp.bulletSize2 = 18;
                    }

                    if (dp[graph1.valueField] == disconnectsMin) {
                        // alert('test');
                        console.log(dp[graph1.valueField] + "<=>" + disconnectsMin);
                        dp.markerType2 = "triangleDown";
                        dp.bulletSize2 = 18;
                    }                    
                }

                // set flag that we're done already
                chart.minMaxMarked = true;

                // take in updated data
                chart.validateData();
            }

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>