Page Killing - Unresponsive(Error: <rect> attribute width: A negative value is not valid. ("-12"))

[Satya Tvv]

Hi,

I am using fusioncharts for displaying multiline zoom chart for relative time with different values, Sometimes its hanging and getting error "Error: <rect> attribute width: A negative value is not valid. ("-12")
" then page becomes unresponsive need to reload the page.

Browser: Chrome, Firefox

Fusioncharts version:  @version 3.12.0

I have seen the solution 

But in my case I was using relative time value instead of date format. tried by reducing the width of the plot but still its killing the page.

Thanks for your help.

 

[Ayan Bhadury]

Hi,

Please replicate the above scenario in js fiddle or kindly share us the sample, so that we can investigate it further.

[Satya Tvv]

Hi

Here fiddle link for my code https://jsfiddle.net/satyat/Lnfbkwjo/. Instead of date format in category, I am using the relative time value.

As shown in the below screenshot. Dynamically loading the multiple graphs based on pass-fail other selection. The graphs are showing up but sometimes while loading only the page become unresponsive and getting an error in the console like Error: <rect> attribute width: A negative value is not valid. ("-12"))  in multiple times

Thanks you.

 

[Ayan Bhadury]

Hi,

As per the fiddle link which you shared we can not replicate the problem. However the screenshot which you shared below seems to be implemented with different data source, kindly replicate the problem in a js fiddle and share us the updated url.

Awaiting your responses.

[Satya Tvv]

Hi Ayan,

In my case, there will be hundred's of metrics for each metric I have to show the Graph for that one I was using pagination "LoadMore" button. By default I am showing 5 graphs if he clicks on load more button I am sending the five more metrics and get the data and parsing it to the fusion charts to display the graph.

//Logic to get data, $scope.allMetrics contains the list of all metrics

			$scope.allMetricsScatter = function() {					
				$scope.showScatterErrorMessage = false;
      			// array of metrics stored in metricsData
				MessageBus.broadcast("metricsData",$scope.allMetrics);
				var i = 1;
              	var metrics = false;
      			// logic to send five metric names
				$.each($scope.allMetrics,function(metricindex,metricName){
					if(i%6 == 0){
						return;
					}
					metrics = true;
                   // here in this generateScatterGraphss method will send the metric name to get the data for each metric, inside this we will call the 						"generateScatterGraph method"
					generateScatterGraphss(metricName,"name"+i);
					$scope.showLoadMore = true;
					i++;
                })
			}
            
            // function to get the data by sending metric name
            
            function generateScatterGraphss(metricName,renderchartId) {
							var selectedmetricName = metricName;
							$http({
										method : "GET",
										url : baseUrl +"/canaries/metricdata?id="+$scope.canariId+"&metric="+selectedmetricName,
										params : { isBoxplotData : false},
										headers : {
											'Accept' : 'application/json',
											'Content-Type' : 'application/json'

										},
									}).error(function(error) {
							}).success(
									function(response) {
										if(response.version1.success == "true" && response.version2.success == "true"){
											$scope.showSpinner = true;
											$scope.showScatterMessage = false;
											$scope.showScatterErrorMessage = false;
										$scope.ver1DatawithDateFormat = (response.version1.data).sort(function(a,b){
											return a.x-b.x;
										})		
										$scope.ver2DatawithDateFormat = (response.version2.data).sort(function(a,b){
											return a.x-b.x;
										})		
										}
										generateScatterGraph(metricName,
												$scope.ver1DatawithDateFormat ,
												$scope.ver2DatawithDateFormat,renderchartId);
									})
									
						}
						


// code for displaying the Graph, here i am parsing the data and renderchart id which will dynamically creates id for each metric

function generateScatterGraph(metricName, version1Data,version2Data,renderchartId) {
		FusionCharts.ready(function() {
			var selectivityChart = new FusionCharts({
                type : 'zoomline',
                renderAt : renderchartId,
                width : 1040,
                height : 450,
				dataFormat : 'json',
				dataSource: {
					"chart": {
						 "caption": metricName,
						 "paletteColors": "#0075c2,#ff0000",
						 "xaxisname": "Time",
						 "yaxisname": "Values",
						 "showvalues": "0",
						 "yaxisminValue": "0",
						 "forceAxisLimits" : "1",
						 "yaxismaxValue": "1",
						 "pixelsPerPoint": "0",
						 "pixelsPerLabel": "55",
						 "theme" : "fint",
						 "compactdatamode" : "1",
						 "dataseparator" : "|",
						 "labelHeight": "50",
						 "linethickness" : "1",
						 //Customizing anchor properties
						 "anchorRadius": "4",
						 "anchorBorderThickness": "2",
						  //Theme
						
					},
				        
				    "categories": [{
				           	"category" : version1Data[0].category,
				    }],
												            
				   	"dataset":[{
				        "seriesname": "Baseline",
				        "data": version1Data[0].data
					     }, {
                       		"seriesname": "Comparison",
		                    "data": version2Data[0].data
	                }]					                   
				 }
			});
				selectivityChart.render();
	});
	$scope.i++;
}

	<div align="center" >
		<div id="name{{$index+1}}" ng-repeat="item in metricsForItearion | limitTo: itemsLimit()">
		</div>
	</div>
	<div class="text-center">
      <button class="btn btn-lg btn-color" id="loadMore"
		ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()">Load more</button>
	</div>

Sometimes the graphs are showing up perfectly but sometimes graphs are loaded and then the following error appears on console you can find in the below screenshot after some times I can't event close the tab its freezing.

Thanks you.

[Ayan Bhadury]

Hi,

We analysed the code which you shared, and we came to the conclusion that, the category or the data object data's are not forming properly.

Please share us complete application dump, so that we can replicate this at our end.

Sorry for the inconvenience. 

[Satya Tvv]

Hi,

As you said I have checked category and data object data for each category and data "|" included at first, I have removed it and tried again still the page Unresponsive. I have shared the code I can't share the whole application. please check it.

Thanks. 

 

[Ayan Bhadury]

Hi,

Apologies for the delayed response.

Please share us a dummy application just show casing your problem.

So that we can replicate the issue at our end.