SVG , d3 line chart not working when deployed to linux server

362
December 15, 2016, at 1:10 PM

I have made d3 line chart for CPU performance , it's working in development windows machine , but not working in linux server .

app.directive('ngcpuchart', ['$parse', '$window','utilService', function($parse ,$window ,utilService) { return { restrict: 'AE', template: "", scope: { cpuInterfaceData: '=data' , size: '=size' }, link: function (scope, elem, attrs) {

        var data = scope.cpuInterfaceData;          
        var rawSvg = elem.find('svg');
        var d3 = $window.d3;
        var margin =  { top: 10, right: 5, bottom: 55, left: 40 };
        var width = parseInt(d3.select('#chart').style('width'), 10);
        width = width - margin.left - margin.right;
        var height = parseInt(d3.select("#chart").style("height"));
        height = height - margin.top - margin.bottom;

       var svg = d3.select(rawSvg[0])
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .classed("svg-container", true)
                  .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        var parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");   
        var x =  d3.scaleUtc().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);
        var color =  d3.scaleOrdinal(d3.schemeCategory10);              
        var xAxis = d3.axisBottom(x)
                    .tickFormat(d3.utcFormat("%H:%M:%S"));
        var yAxis = d3.axisLeft(y);           
        var line;            
        y.domain([0, 100]);         
        var xg=svg.append("g");
        var yg=svg.append("g");
        var legend = svg.append("g");
        var deltas;     
        var delta=null ;
        var resizewatch = scope.$watch('size', function (nValue, oValue)  {             
            if (scope.size=='S'){
                width=273;
            } else if (scope.size=='M'){
                width=423;
            }
                else {
                    width=704;
            }
            width = width - margin.left - margin.right;
            height = parseInt(d3.select("#chart").style("height"));
            height = height - margin.top - margin.bottom;
            parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");   
            x =  d3.scaleUtc().range([0, width]);
            y = d3.scaleLinear().range([height, 0]);
            color =  d3.scaleOrdinal(d3.schemeCategory10);              
            xAxis = d3.axisBottom(x)
                    .tickFormat(d3.utcFormat("%H:%M:%S"));
            yAxis = d3.axisLeft(y);
            svg = d3.select(rawSvg[0])
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .classed("svg-container", true)
                  .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");              
            utilService.updateLegend(legend ,width).then(function (response) {  
                legend = response;
                refreshCpuChart();              
            }); 

        });     
        var unwatch = scope.$watchCollection('cpuInterfaceData', function (newValue, oldValue) {          
                data = null;
                data = scope.cpuInterfaceData;                  
                refreshCpuChart();
        });
         function refreshCpuChart() {

                color.domain(d3.keys(data[0]).filter(function(key) {
                  return key !== "sample_time";
                }));
                data.forEach(function(d) {
                 d.sample_time = parseDate(d.sample_time + 'Z');
                });
                deltas = color.domain().map(function(name) {
                  return {
                    id: name,
                    values: data.map(function(d) {
                        return {
                        sample_time: d.sample_time,
                        deltavalue: +d.percent
                      };
                    })
                  };
                });
                x.domain(d3.extent(data, function(d) {
                  return d.sample_time;
                }));
                y.domain([
                  d3.min(deltas, function(c) {
                    return d3.min(c.values, function(v) {
                      return v.deltavalue;
                    });
                  }),                   
                  d3.max(deltas, function(c) {
                    return d3.max(c.values, function(v) {
                      return v.deltavalue;
                    });
                  })
                ]);
                line = d3.line()
                        .curve(d3.curveBasis)                   
                  .x(function(d) {
                    return x(d.sample_time);
                  })
                  .y(function(d) {
                    return y(d.deltavalue);
                  }); 
                  xg.attr("class", "axis axis--x")
                      .attr("transform", "translate(" + margin.left + "," + height + ")")
                      .call(xAxis)
                      .selectAll("text")
                      .style("text-anchor", "end")
                        .attr("dx", ".10em")
                        .attr("dy", ".10em")
                        .attr("transform", "rotate(-70)" );
                  yg.attr("class", "axis axis--y")
                      .call(yAxis)
                      .attr("transform", "translate(" + margin.left + ",0)");   
                if(delta == null){
                     yg.append("text")
                      .attr("transform", "rotate(-90)")
                      .attr("y", 4)
                      .attr("dy", "0.51em")
                      .attr("fill", "#000")
                      .text("% value");
                    delta= svg.selectAll("delta").data(deltas)
                            .enter().append("g")
                            .attr("class", "delta");                    
                    delta.append("svg:path")
                        .attr("class", "line")
                        .attr("transform", "translate(" + margin.left + ",0)")
                        .attr("d", function(d) { return line(d.values); })
                        .attr("transform", "translate(" + margin.left + ",height)")
                        .attr("data-legend",function(d) { return d.id})
                        .style("stroke", function(d) { return color(d.id); });                      
                        utilService.geLegend(legend ,width ,d3);
                    /*  legend.attr("class","legend")
                        .attr("transform","translate("+(width-110)+",10)")
                        .style("font-size","10px")
                        .call(d3.legend)    */              

                } else {                        
                    delta.data(deltas).select('.line')
                    .attr("transform", "translate(" + margin.left + ",0)")
                    .attr("d", function(d) { return line(d.values); })
                    .style("stroke", function(d) { return color(d.id); });
                }                 
                }
    }
    };

} ]);

READ ALSO
Search for “id” and return all the relevant information

Search for “id” and return all the relevant information

I have a log file called testlog (for demo purposes - which I have simplified by a lot!) which looks like this:

310
How to have a scheduled task running within an express server

How to have a scheduled task running within an express server

sorry the title isn't too clear I'm not really sure how to phrase what I'm asking for hereBut basically I'm creating a web app which is a list of public game servers

317
Upload a file from dart client to Node server

Upload a file from dart client to Node server

I'm stuck with this issue : I can't get my upload to work:

480
Failing to pass date from client to server and server to email

Failing to pass date from client to server and server to email

I am passing my array of date from client(angular) to server as follow

269