­
­
­
­
Your message has been sent, you will be contacted soon
Chameleon

Call Us: +4 (800) 888-0008

Call Me Now!

Close

Chart

Home » Shortcodes » Chart

Chart




HTML


 
<html>
<head>
<script src="dygraph-combined.js">
</script>
<style>
 #div_ {
           width: 100%;
           height: 370px;
           margin-bottom: 10px;
       }
</style>
</head>
<body>
<div id="div_"></div>
<script type="text/javascript">
g = new Dygraph(
 document.getElementById("div_"),
 "data",
 {
 rollPeriod: 7,
 legend: 'always',
 title: 'High and Low Temperatures',
 titleHeight: 32,
 ylabel: 'Temperature (F)',
labelsDivStyles: {
     'text-align': 'right',
     'background': 'none'
 },
 strokeWidth: 1.5,
 showRangeSelector: true,
 rollPeriod: 14,
 showRoller: true,
 animatedZooms: true,
});
</script>
</body>
</html>

 


How to use the chart


To use graphs, include the dygraph-combined.js JavaScript file

Usage

You specify options in the third parameter to the dygraphs constructor:

g = new Dygraph(div,
 data,
 {
   option1: value1,
   option2: value2,
   ...
 });

After you've created a Dygraph, you can change an option by calling the updateOptions method:

g.updateOptions({
                  new_option1: value1,
                  new_option2: value2
                });

you can change interaction model (zooming,panning,..... ) by calling interactionModel Method: and include interaction javaScript file or create your own function in javascript file

interactionModel: {
           'mousedown': downV3,
           'mousemove': moveV3,
           'mouseup': upV3,
           'click': clickV3,
           'dblclick': dblClickV3,
           'mousewheel': scrollV3,
           'DOMMouseScroll': scrollV3
//Mouse Wheel in FireFox
                  }

To Learn more visit Tutorial