Search code examples
jqueryamcharts

How to display atleast one graph from cluster of graph,even all are checked


I am generating dynamic cluster graph from ajax data and that code working fine.User can check each legend but not to allow last one to get check and hide. Means at least one should be view-able instead blank graph.

consider there are 4 legends with its label,if 3 of them clicked and hide respective graphs, then last one should not be clickable and should not hide graph until at least 2 legend with respective graph is view-able

I want first one if all legends get checked


Solution

  • var count = 0;
    
    function handleLegendClick(graph) {
      var chart = graph.chart;
      var lengthG = chart.graphs.length;
      for (var i = 0; i < lengthG; i++) {
        if (graph.id == chart.graphs[i].id) {
          if (!chart.graphs[i].hidden) {
            if (count === lengthG - 1) {
              chart.showGraph(chart.graphs[i]);
            } else {
              chart.hideGraph(chart.graphs[i]);
              count++;
            }
          } else {
            // console.log("3:---", count)
            chart.showGraph(chart.graphs[i]);
            count--;
          }
        }
      }
      return false;
    }
    var resp = [{
        "MONTH_": "01",
        "MONTH_NAME": "JAN",
        "YEAR_": "2018",
        "GL_NAME": "CASH,FACTORY, SITE,OFFICE ",
        "GL_ID": "79,81,522,89",
        "OPENING": "606294,0,24851,170392",
        "RECEIPT": "1641300,40000,210850,82300",
        "PAYMENT": "2074921,103209,168893,40000",
        "CLOSING": "172673,149483,66808,0"
      },
      {
        "MONTH_": "02",
        "MONTH_NAME": "FEB",
        "YEAR_": "2018",
        "GL_NAME": " SITE,CASH,OFFICE ,FACTORY",
        "GL_ID": "81,79,522,89",
        "OPENING": "66808,172673,0,149483",
        "RECEIPT": "102650,40000,3479000,200000",
        "PAYMENT": "239379,168339,40000,3388527",
        "CLOSING": "69921,0,181144,263146"
      },
      {
        "MONTH_": "03",
        "MONTH_NAME": "MAR",
        "YEAR_": "2018",
        "GL_NAME": "FACTORY,CASH,OFFICE , SITE",
        "GL_ID": "89,81,79,522",
        "OPENING": "181144,69921,0,263146",
        "RECEIPT": "30000,40000,1943500,200000",
        "PAYMENT": "69242,1806551,18177",
        "CLOSING": "141902,400095,40000,111902"
      }
    ]
    
    var newChartDataArr = [];
    var colNameArr = [];
    var GLID = [];
    var amtArr = [];
    var newBarGraph = [];
    myJsonString1 = JSON.stringify(resp);
    var obj = JSON.parse(myJsonString1);
    var obj1 = resp[0];
    //spliting of GLName
    if (obj1.GL_NAME.toString().indexOf(',') != -1) {
      colNameArr = obj1.GL_NAME.split(',');
      GLID = obj1.GL_ID.split(',');
    } else {
      colNameArr.push(obj1.GL_NAME);
      GLID = obj1.GL_ID.split(',');
    }
    //Getting Month and Opening of GL
    $.each(resp, function(i, value) {
      var newObj = {};
      newObj['MONTH_NAME'] = value.MONTH_NAME + "-" + value.YEAR_;
      $.each(value, function(k, v) {
        if (k == 'OPENING') {
          for (var i = 0; i < colNameArr.length; i++) {
            if (v.toString().indexOf(',') != -1) {
              newObj[colNameArr[i]] = parseFloat(v.split(',')[i]);
            } else {
              newObj[colNameArr[i]] = parseFloat(v);
            }
          }
        }
      });
      newChartDataArr.push(newObj); //GL with Opening
    });
    for (var i = 0; i < colNameArr.length; i++) {
      let graph = {};
      graph["id"] = "v-" + GLID[i];
      graph["balloonText"] = colNameArr[i] + "  [[category]] Amount:[[value]]",
        graph["title"] = colNameArr[i];
      graph["valueField"] = colNameArr[i];
      graph["fillAlphas"] = 0.8;
      graph["lineAlpha"] = 0.2;
      graph["type"] = "column";
      newBarGraph.push(graph);
    }
    chart = AmCharts.makeChart("Monthdiv", {
      "type": "serial",
      "theme": "light",
      "categoryField": "MONTH_NAME",
      "startDuration": 1,
      "trendLines": [],
      "legend": {
        "position": "bottom",
        "maxColumns": 2,
        "clickLabel": handleLegendClick,
        "clickMarker": handleLegendClick,
        "useGraphSettings": true
      },
      "depth3D": 10,
      "angle": 60,
      "graphs": newBarGraph,
      "guides": [],
      "valueAxes": [{
        "position": "left",
        "title": "Opening"
      }],
      "categoryAxis": {
        "gridPosition": "start",
        "labelRotation": 90,
        "title": "Months"
      },
      "allLabels": [],
      "balloon": {},
      "titles": [{
        "text": "Monthly Sale"
      }],
      "dataProvider": newChartDataArr,
      "export": {
        "enabled": true
      },
      "listeners": [{
        "event": "clickGraphItem",
        "method": function(event) {
          var gl_ID = (event.item.graph.id).slice(2);
          var month = (event.item.category).slice(0, 3);
          var calender = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
          var monthVal = calender.indexOf(month) + 1;
          var year = (event.item.category).slice(4, 8);
          $("#fromDate").val("01/" + monthVal + "/" + year);
          $("#toDate").val("30/" + monthVal + "/" + year);
          Daliy(gl_ID, event.item.category);
          showSummary();
        }
      }]
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Resources -->
    <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>
    <div class="col-sm-12" id="Monthdiv" style="height: 370px;">