CODEWITHSUNDEEP
amcharts
Sachin Verma
Sachin Verma

Reputation: 3812

Toggle trendline in AmCharts

Is there a way to toggle trendline (hide/show with a click) in Amcharts by using legend or any other button.

Please help if anybody encountered this situation.
Thanks in advance.

Upvotes: 1

Views: 1164

Answers (3)

pavan kumar
pavan kumar

Reputation: 322

enter image description herePassing Data to AM-charts in Line Charts using database in Asp.net and C#. Here is the code it worked for me

 <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/themes/light.js"></script>
    <script src="JSfiles/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var chartDataResults = new Array();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'sampleLine.aspx/GetDataonload',
                data: {},
                success:
                    function (response) {

                        drawVisualization(response.d);
                    }
            });
            function drawVisualization(dataValues) {
                for (var i = 0; i < dataValues.length; i++) {
                    var dataitem = dataValues[i];
                    var date = dataitem.date;

                    var cpa = dataitem.cpacount;
                    //alert(cpa);
                    var cpi = dataitem.cpicount;
                    var cpm = dataitem.cpmcount;
                    chartDataResults.push({
                        date: date,
                        cpacount: cpa,
                        cpicount: cpi,
                        cpmcount: cpm
                    });
                    var chart = AmCharts.makeChart("chartdiv", {
                        "type": "serial",
                        "theme": "light",
                        "marginRight": 30,
                        "legend": {
                            "equalWidths": false,
                            "periodValueText": "total: [[value.sum]]",
                            "position": "top",
                            "valueAlign": "left",
                            "valueWidth": 100
                        },
                        "dataProvider":chartDataResults,
                        //"dataProvider": [{
                        //    "year": 1994,
                        //    "cars": 1587,
                        //    "motorcycles": 650,
                        //    "bicycles": 121
                        //}],
                        "valueAxes": [{
                            "stackType": "regular",
                            "gridAlpha": 0.07,
                            "position": "left",
                            "title": "Traffic incidents"
                        }],
                        "graphs": [{
                            "balloonText": "<img src='images/icons-02.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "hidden": true,
                            "lineAlpha": 0.4,
                            "title": "CPA Count",
                            "valueField": "cpacount"
                        }, {
                            "balloonText": "<img src='images/icons-03.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "lineAlpha": 0.4,
                            "title": "CPI Count",
                            "valueField": "cpicount"
                        }, {
                            "balloonText": "<img src='images/icons-04.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "lineAlpha": 0.4,
                            "title": "CPM Count",
                            "valueField": "cpmcount"
                        }],
                        "plotAreaBorderAlpha": 0,
                        "marginTop": 10,
                        "marginLeft": 0,
                        "marginBottom": 0,
                        "chartScrollbar": {},
                        "chartCursor": {
                            "cursorAlpha": 0
                        },
                        "categoryField": "date",
                        "categoryAxis": {
                            "startOnAxis": true,
                            "axisColor": "#DADADA",
                            "gridAlpha": 0.07,
                            "title": "Year",
                            "guides": [{
                                category: "2001",
                                toCategory: "2016",
                                lineColor: "#CC0000",
                                lineAlpha: 1,
                                fillAlpha: 0.2,
                                fillColor: "#CC0000",
                                dashLength: 2,
                                inside: true,
                                labelRotation: 90,
                                label: "Increased Count"
                            }, {
                                category: "2016",
                                lineColor: "#CC0000",
                                lineAlpha: 1,
                                dashLength: 2,
                                inside: true,
                                labelRotation: 90,
                                label: "Count"
                            }]
                        },
                        "export": {
                            "enabled": true
                        }
                    });
                }
            }
        });
    </script>
C# Code
        public static List<ChartDetails> GetDataonload()
        {
            string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
            using (SqlConnection con = new SqlConnection(Constring))
            {

                List<ChartDetails> dataList = new List<ChartDetails>();
                SqlCommand cmd = new SqlCommand("Usp_TotalcountCPA_new_usingfunction", con);
                cmd.CommandTimeout = 50;
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@iAdvertiserid", "1000120");
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.SelectCommand = cmd;
                DataTable dt = new DataTable();
                da.Fill(dt);
                con.Close();

                foreach (DataRow dtrow in dt.Rows)
                {
                    ChartDetails details = new ChartDetails();
                    string date = dtrow[4].ToString();
                    details.date = date.Substring(3, 7);
                    details.cpacount = dtrow[7].ToString();
                    details.cpicount = dtrow[10].ToString();
                    details.cpmcount = dtrow[14].ToString();
                    details.cvpcount = dtrow[16].ToString();
                    dataList.Add(details);


                }
                return dataList;
            }
        }
        public class ChartDetails
        {
            public string date { get; set; }
            public string cpacount { get; set; }
            public string cpicount { get; set; }
            public string cpmcount { get; set; }
            public string cvpcount { get; set; }
            // public string CountryCode { get; set; }
        }[![enter image description here][1]][1]

  [1]: https://i.sstatic.net/CvInC.png

Upvotes: 0

user2301506
user2301506

Reputation: 300

This is an old post but the previous answer is misleading so could confuse anyone new looking at this.

In Amcharts you can add a trend line as another graph - it just needs to be supplied with data as your other graphs. This will appear in the legend so you can toggle it on/off.

Upvotes: 1

zeroin
zeroin

Reputation: 6025

There is no method to hide/show trend lines. So the only way to do this would be remove the trend line from array, validate data and then add it again when needed.

Upvotes: 0

Related Questions