$('.step30').attrchange({
    trackValues: true,
    callback: function(e) {
      if(e.attributeName == 'class' && e.newValue == 'step30 seq-in'){
        console.log('step30 in');
        var data = {
        labels: ["1km", "2km", "3km", "4km", "5km", "6km", "7km", "8km", "9km", "10km", "->"],
        datasets: [


            {
                label: "FIBER",
                fillColor: "rgba(47,67,118,1)",
                  strokeColor: "rgba(47,67,118,1)",
                highlightFill: "rgba(47,67,118,1)",
                highlightStroke: "rgba(47,67,118,1)",
                data: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200]
            },



            {
                label: "5G",
                fillColor: "rgba(255,233,60,1)",
                  strokeColor: "rgba(255,233,60,1)",
                highlightFill: "rgba(255,233,60,1)",
                highlightStroke: "rgba(255,233,60,1)",
                data: [100, 0]
            },

            {
                label: "4G",
                fillColor: "rgba(87,185,233,1)",
                  strokeColor: "rgba(87,185,233,1)",
                highlightFill: "rgba(87,185,233,1)",
                highlightStroke: "rgba(87,185,233,1)",
                data: [40, 0]
            },

            {
                label: "ADSL",
                fillColor: "rgba(255,255,255,1)",
                  strokeColor: "rgba(255,255,25,1)",
                highlightFill: "rgba(47,67,118,1)",
                highlightStroke: "rgba(47,67,118,1)",
                data: [24, 15, 8, 4 , 1.5, 0]
            },

            {
                label: "3G",
                fillColor: "rgba(237,34,140,1)",
                  strokeColor: "rgba(237,34,140,1)",
                highlightFill: "rgba(237,34,140,1)",
                highlightStroke: "rgba(237,34,140,1)",
                data: [15, 10, 5, 2.5, 0]
            },

            {
                label: "2G",
                fillColor: "rgba(235,148,59,1)",
                  strokeColor: "rgba(235,148,59,1)",
                highlightFill: "rgba(235,148,59,1)",
                highlightStroke: "rgba(235,148,59,1)",
                data: [10, 9, 8, 7, 6, 5, 4, 3, 2, 0]
            },


        ]
    };

        var ctx = document.getElementById("fiberdistans").getContext("2d");
        var fiberdistans = new Chart(ctx).Line(data,{pointDotStrokeWidth : 0,pointDotRadius : 0,});
        $('#fiberdistans_legends').html(fiberdistans.generateLegend());
      }
    }
  });