Satya Tvv

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

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

 

plot1.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Capture.PNG

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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. 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now