jquery Simple Chart Peity.js
[JavaScript]
- "http://www.w3.org/1999/xhtml" >
- <title> Untitled Page </title>
- <script type="Text/javascript" src="jquery.js"></script>
- <script type="Text/javascript" src="jquery.peity.js"></script>
- <script type="Text/javascript">
- JQuery (function() {
- $ (". Bar-colours-1"). Peity ("Bar", {
- Colours: ["Red", "green", "Blue"],width:100,height:100
- })
- $ (". Bar-colours-2"). Peity ("Bar", {
- Colours: function(value) {
- return value > 0? "Green" : "Red"
- },width:100,height:100
- })
- $ (". bar-colours-3"). Peity ("Bar", {
- Colours: function(_, I, all) {
- var g = parseint ((i/all.length) * 255)
- return "RGB (255," + G + ", 0)"
- },width:100,height:100
- })
- $ (". Pie-colours-1"). Peity ("pie", {
- Colours: ["Cyan", "Magenta", "Yellow" , "BLACK" ],diameter:100
- })
- $ (". Pie-colours-2"). Peity ("pie", {
- Colours: function(_, I, all) {
- var g = parseint ((i/all.length) * 255)
- return "RGB (255," + G + ", 0)"
- },diameter:100
- })
- var Updatingchart = $ (". Updating-chart"). Peity ("line", {width:150,height:50})
- SetInterval (function() {
- var random = Math.Round (Math.random () *)
- var values = Updatingchart.text (). Split (",")
- Values.shift ()
- Values.push (Random)
- Updatingchart
- . Text (Values.join (","))
- . Change ()
- }, 1000)
- })
- </script>
- <body>
- <span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>
- <span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>
- <span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
- <br/>
- <span class="pie-colours-1">4,7,6,5</span>
- <span class="pie-colours-2">5,3,9,6,5</span>
- <br/>
- <span class="Updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</ Span>
- </body>
