Issue #271 resolved

loading trendline plugin throws errors on charts that do not use trendlines (BarRenderer)

johnwebbcole
created an issue

With 9.7r635 I added a trend line to one of my line charts, and a bar chart stopped working.

The error I get is

series.trendline is undefined js/plugins/jqplot.trendline.js Line 83

or if I add trandline: {show:false} this error

series.trendline.label is undefined js/plugins/jqplot.trendline.js Line 83

a work around is to add trendline: {show:false, label:''}, but I don't think many would think to set the label on something they aren't using.

Here is my chart options

{ title: 'Log Pull Attempts', grid: { background: '#FFF' }, legend: {show:true, location: 'ne', yoffset: 3, xoffset: 3}, seriesColors: [ '#aa4643', '#71588f', '#4198af', '#db843d', '#93a9cf', '#d19392', '#b9cd96', '#a99bbd','#4572a7' ], axes: { xaxis:{ label:"Log Pull Attempts", labelRenderer: $.jqplot.CanvasAxisLabelRenderer, renderer:$.jqplot.CategoryAxisRenderer, rendererOptions:{ tickRenderer:$.jqplot.CanvasAxisTickRenderer }, tickOptions: { fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal', fontStretch:1 }, }, yaxis:{ label:"Units", min: 0, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions:{formatString:'%d'} } }, axesDefaults:{useSeriesColor: false}, seriesDefaults: { showMarker: true, pointLabels:{show:true}, markerOptions:{size:5}, trendline: {show:false, label:''} // disable trend line and set blank label or throw error }, series:[ {label:"Yesterday", renderer:$.jqplot.BarRenderer}, {label:"Today", renderer:$.jqplot.BarRenderer}], highlighter: {show:false}, cursor:{ show: false, zoom: false } }

Comments (6)

  1. Chris Leonello repo owner
    • changed status to open

    Can you post an example demostrating the bug? From the code you posted, I see only 2 bar series, no line series. It helps me out a lot if you can upload an html file I can run directly, so I know what plugins you have loaded, what data you are using, etc.

  2. Anonymous

    Hi, I encountered the same problem:

    what I found out ist, that if i dont set a curser option it works again (without setting show:false and label:""... just see the following code...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" id="fb" >
    <head>
    	<style type="text/css">@import url("css/ui-lightness/jquery-ui-1.8.1.custom.css");</style>
    	<style type="text/css">@import url("css/jquery.jqplot.min.css");</style>
    	
    	<script type="text/javascript" src="js/jquery.min.js"></script>
    	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.canvasTextRenderer.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
    	<script language="javascript" type="text/javascript" src="js/plugins/jqplot.trendline.js"></script>
    
    </head>
    
    <body>
    		<div id="chartdiv" style="height:250px;width:750px; "></div>
    		<div id="chartdiv2" style="height:350px;width:750px; "></div>
    		<script type="text/javascript"> 
    			<!--
    			var data = [15,21,25,20,7,25,25,25,25,25,25,16,10];
    			var beschriftung = ["So. 05.09","Do. 09.09","Mi. 22.09","Mi. 22.09","Mi. 22.09","Mi. 22.09","Mi. 22.09","Mi. 22.09","Mi. 22.09","Do. 23.09","Fr. 24.09","Sa. 25.09","So. 26.09"];
    			var datenname = "...";
    			
    			$.jqplot("chartdiv",  [data], { 
    				series:[{label:datenname,
    					pointLabels:{
    						show:true,
    						ypadding:5
    					}}],
    				axesDefaults: {
    				tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
    				tickOptions: {
    					fontSize: "10pt"
    				}
    				},
    				title: {text:"... "+ datenname + " September"},
    				axes: {
    					xaxis: {
    						renderer: $.jqplot.CategoryAxisRenderer,
    						ticks:beschriftung,
    						tickOptions: {angle: -30} // Beschriftung der X-Achse drehen
    					},
    					yaxis: {
    						autoscale:true,
    						min:0,
    						max:30,
    						tickOptions:{formatString:"%d"}
    					}
    				},
    				cursor: {  
    					show:true,
    					showVerticalLine:true,
    					showHorizontalLine:true,
    					showCursorLegend:true,
    					showTooltip: false,
    					zoom:true
    				},
    				legend: {location:"se"},
    				seriesDefaults: {
    					trendline: {
    						show: true,         // show the trend line
    						color: "#666666",   // CSS color spec for the trend line.
    						label: "",          // label for the trend line.
    						type: "linear",     // "linear", "exponential" or "exp"
    						shadow: true,       // show the trend line shadow.
    						lineWidth: 1.5,     // width of the trend line.
    						shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
    						shadowOffset: 1.5,  // offset from the line of the shadow.
    						shadowDepth: 3,     // Number of strokes to make when drawing shadow.
    										// Each stroke offset by shadowOffset from the last.
    						shadowAlpha: 0.07   // Opacity of the shadow
    					}
    				}
    			});
    			
    			var data2 = [11,12,9,10,12,8,11,10,12,9,11,12,11,10,10,11,10,10];
    			var datenname2 = "...";
    			
    			$.jqplot("chartdiv2",  [data2], { 
    				series:[
    				{
    					label:datenname2,
    					renderer: $.jqplot.BarRenderer,
    					rendererOptions:{varyBarColor:true},
    					pointLabels:{
    						show:true,
    						ypadding:1
    					}
    				}],
    				axesDefaults: {
    				tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
    				tickOptions: {
    					fontSize: "10pt"
    				}
    				},
    				title: {text:"..."+ datenname2 + " September"},
    				axes: {
    					xaxis: {
    						renderer: $.jqplot.CategoryAxisRenderer,
    						tickOptions: {angle: -90} // Beschriftung der X-Achse drehen
    					},
    					yaxis: {
    						autoscale:true,
    						min:0,
    						max:14,
    						tickOptions:{formatString:"%d"}
    					}
    				},
    				// ----
    				// uncomment this and it will work
    				
    				cursor: {  
    					show:true,
    					showVerticalLine:true,
    					showHorizontalLine:true,
    					showCursorLegend:true,
    					showTooltip: false,
    					zoom:true
    				},
    				// --- until here
    				// ---
    				
    				legend: {location:"se"}
    				// ---
    				// uncomment the following and it works with the second chart
    				//,
    				//seriesDefaults: {
    				//	trendline: {
    				//		show: false,         // Trendlinie nicht anzeigen
    				//		label: "",          // label setzen sonst fehler
    				//	}
    				//}
    				// --- until here
    				// ---
    			});
    			// -->
    		</script></div>
    <body>
    <html>
    
  3. Anonymous

    Same problem for me. The workaround is fine (trendline: {show:false, label:''},)... but it's definitely a bug !

  4. Chris Leonello repo owner

    What version are you using? This was fixed some time ago, although I neglected to update the ticket. Are you still having this problem with the latest build?

  5. Log in to comment