Highcharts problem

808 views

Skip to first unread message

DON

unread,

Jun 20, 2015, 10:27:55 PM6/20/15

to web...@googlegroups.com

Hi Folks.

I am having an issue that I really don't understand and can't figure out with the google machine. I moved my .csv files off a network resource and put them on the Pi that I am running WebIOPi on instead. Should be a simple change where I just update the path in my webpage. I did update the path for my files (see page code below), but now I am getting an error.

From Chrome Console:

historian.html:13 Uncaught ReferenceError: highcharts is not defined

From Firebug in Firefox:

ReferenceError: highcharts is not defined
highcharts.setOptions({

Any idea what this is caused by. It was working great and all I changed were these "/home/pi/PiCentral/humidity.csv" paths.

Thanks,

DON


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>PiCentral - Historian</title>
	<script type="text/javascript" src="/webiopi.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="/home/pi/PiCentral/highcharts/js/highcharts.js"></script>
	<script type="text/javascript" src="/home/pi/PiCentral/highcharts/js/modules/data.js"></script>
	<script type="text/javascript" src="/home/pi/PiCentral/highcharts/js/date.js"></script>
	<script type="text/javascript">

		highcharts.setOptions({
			global: {
				timezoneOffset: 5*60
			}
		});

		$(document).ready(function() {
		    $.get('/home/pi/PiCentral/humidity.csv', function(csv) {
	                $('#container3').highcharts({
			        chart: {
                                        zoomType: 'x',
					panning: true,
					panKey: 'shift'
			        },
        	credits: {
        	    enabled: false
        	},
			        data: {
			            csv: csv,
                                    endColumn: 2
			        },
			        title: {
				    text: 'Humidity'
			        },
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%d %b %H:%M}',
                                        rotation: 30,
                                        align: 'left'
                                    },
                                    minRange: 3600000, // one hour
                                    title: {
                                        text: 'Time'
                                    },
                                },
                                plotOptions: {
					series: {
						enableMouseTracking: false
					}
				},
                                yAxis: {
                                    title: {
                                        text: 'Humidity (%)'
                                    }
                                }
			    });
			});
		    $.get('/home/pi/PiCentral/indoortemp.csv', function(csv) {
	                $('#container2').highcharts({
			        chart: {
                                        zoomType: 'x',
					panning: true,
					panKey: 'shift'
			        },
        	credits: {
        	    enabled: false
        	},
			        data: {
			            csv: csv,
                                    endColumn: 6
			        },
			        title: {
				    text: 'Indoor Temperature'
			        },
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%d %b %H:%M}',
                                        rotation: 30,
                                        align: 'left'
                                    },
                                    minRange: 3600000, // one hour
                                    title: {
                                        text: 'Time'
                                    },
                                },
                                plotOptions: {
					series: {
						enableMouseTracking: false
					}
				},
                                yAxis: {
                                    title: {
                                        text: 'Temperature (deg C)'
                                    }
                                }
			    });
			});
		    $.get('/home/pi/PiCentral/outdoortemp.csv', function(csv) {
	                $('#container1').highcharts({
			        chart: {
                                        zoomType: 'x',
					panning: true,
					panKey: 'shift'
			        },
        	credits: {
        	    enabled: false
        	},
			        data: {
			            csv: csv,
                                    endColumn: 3
			        },
			        title: {
				    text: 'Outdoor Temperature'
			        },
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%d %b %H:%M}',
                                        rotation: 30,
                                        align: 'left'
                                    },
                                    minRange: 3600000, // one hour
                                    title: {
                                        text: 'Time'
                                    },
                                },
                                plotOptions: {
					series: {
						enableMouseTracking: false
					}
				},
                                yAxis: {
                                    title: {
                                        text: 'Temperature (deg C)'
                                    }
                                }
			    });
			});
		    $.get('/home/pi/PiCentral/pressure.csv', function(csv) {
	                $('#container4').highcharts({
			        chart: {
                                        zoomType: 'x',
					panning: true,
					panKey: 'shift'
			        },
        	credits: {
        	    enabled: false
        	},
			        data: {
			            csv: csv,
                                    endColumn: 2
			        },
			        title: {
				    text: 'Atmospheric Pressure'
			        },
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%d %b %H:%M}',
                                        rotation: 30,
                                        align: 'left'
                                    },
                                    minRange: 3600000, // one hour
                                    title: {
                                        text: 'Time'
                                    },
                                },
                                plotOptions: {
					series: {
						enableMouseTracking: false
					}
				},
                                yAxis: {
                                    title: {
                                        text: 'Pressure (kPa)'
                                    }
                                }
			    });
			});
		    $.get('/home/pi/PiCentral/windspeed.csv', function(csv) {
	                $('#container5').highcharts({
			        chart: {
                                        zoomType: 'x',
					panning: true,
					panKey: 'shift'
			        },
        	credits: {
        	    enabled: false
        	},
			        data: {
			            csv: csv,
                                    endColumn: 3
			        },
			        title: {
				    text: 'Wind Speed'
			        },
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%d %b %H:%M}',
                                        rotation: 30,
                                        align: 'left'
                                    },
                                    minRange: 3600000, // one hour
                                    title: {
                                        text: 'Time'
                                    },
                                },
                                plotOptions: {
					series: {
						enableMouseTracking: false
					}
				},
                                yAxis: {
                                    min: 0,
				    title: {
                                        text: 'Speed (km/hr)'
                                    }
                                }
			    });
			});

		});
	</script>	
</head>

<body>
	<br>
		<div id="container1" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
	<br>
		<div id="container2" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
	<br>
		<div id="container3" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
	<br>
		<div id="container4" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
	<br>
		<div id="container5" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
	<br>
		<a href="javascript:history.go(0)">Refresh</a>	
	<br>

</body>

</html>

Toshi Bass

unread,

Jun 20, 2015, 11:50:18 PM6/20/15

to web...@googlegroups.com, darre...@gmail.com

I've had the very same problem, you would think specifying the full path to the hightchart files would be fine but it's not, the only way I can discribe it it is the path needs to be relative to the path were the webiopi files are located so try <script type="text/javascript" src="/PiCentral/highcharts/js/highcharts.js"></script> If that doesn't work remove the first / still no go remove PiCental and so on trial and error style
The alternative is to locate the highchart files in the same folder as webiop.js then the path would be <script type="text/javascript" src="/js/highcharts.js"></script>
Hope it helps
Toshi

DON

unread,

Jun 21, 2015, 12:06:33 AM6/21/15

to web...@googlegroups.com, darre...@gmail.com

Sweet. That worked. I had to remove all of the absolute references for each of the highcharts .js files AND the absolute references for all of the CSV files, then it worked. Doinked around for a while to get it.

Looked in /etc/webiopi/config and found there was a reference to all of the default html and resource files which pointed to my folder /home/pi/PiCentral so I figured that meant that it would automatically look in that folder for everything I need and Voila! It did.

Thanks for the help Toshi!

DON

Toshi Bass

unread,

Jun 21, 2015, 12:51:13 PM6/21/15

to web...@googlegroups.com, darre...@gmail.com

One other thing the line <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> will reference jquery-1.9.1.min.js via the internet each time you run your code, I would say it would be quicker/better to download the file and have a local copy instead.

Toshi

DON

unread,

Jun 21, 2015, 9:28:15 PM6/21/15

to web...@googlegroups.com, darre...@gmail.com

Done. Thanks again Toshi. I had meant to do that one a while ago.

DON

Reply all

Reply to author

Forward

0 new messages