Hey Readers, Win 25 Citrify Premium Licenses How to Participate and Win!!! :-D . Stay tuned for more premium giveaways coming next by subscribing toRSS feed or Subscribe to App Sheriff - Sworn To Serve by Email. Good Luck Guys!

Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

temperature dygraphs

The features of dygraphs include plotting the time series without using an external server or the Flash. It works in Internet Explorer using the excanvas. It is lightweight (of 45kb) and is responsive. It displays the values on the mouse over thus making it easily discoverable. It supports the error bands around the data series. It has an interactive zoom. It also has an adjustable averaging period. It can intelligently chart even the smallest fractions. It has customizable click-through actions and is also compatible with the Google Visualization API. Moreover it also has intelligent defaults that make it very easy to use.

Inorder to use the digraphs we have to include the dygraph-combined.js JavaScript file and then instantiate a Dygraph object. In most of the applications, it is better to include a CSV file instead. If the second parameter to the constructor does not contain a newline then it will be interpreted as a path to a CSV file. The Dygraph would then perform a XMLHttpRequest to retrieve this file and display the data when it becomes available. You will have to make sure that your CSV file is readable and serves from a place that would understand the XMLHttpRequest’s. You cannot specify a CSV file that uses “file:///”.

You can use the dygraphs library but there can be some problems that are commonly faced. Some of them are, you have to make sure that your CSV files are readable. Incase your graph is not showing up then the XMLHttpRequest for the CSV file may be failing. Thus you can determine if this is the case using the tools like the Firebug. You should also make ensure that your CSV files are in the right format such as YYYYMMDD, series1, series2, … . And if you have set the errorBars property then make sure that you alternate the data series and the standard deviations. The dygraphs are not satisfied if its is placed inside a tag. This case also applies to the CSS text-align property. If you want to center a Dygraph then put it inside a table with the align = center set.

Some of the other problems faced are you are not supposed to set the dateWindow property to a date. It expects the milliseconds since the epoch can be obtained from a JavaScript Date object’s valueOf method. Also make sure that you don’t have any trailing commas in your call to the Dygraph constructor or in the options parameter. The Firefox, Chrome and Safari ignore these but they can definitely cause a graph to not display in the Internet Explorer.