달력

9

« 2019/9 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  
  •  
  •  
2014.04.16 20:28

[jQuery] justGage 차트 CODE/Chart 예제2014.04.16 20:28



<!doctype html>


<html>

  <head>

    <title>Customize style</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    

    <style>

      body {

        text-align: center;

      }

      

      #g1, #g2, #g3, #g4, #g5, #g6 {

        width:200px; height:160px;

        display: inline-block;

        margin: 1em;

      }

    </style>

    

    <script src="js/raphael.2.1.0.min.js"></script>

    <script src="js/justgage.1.0.1.min.js"></script>

    <script>

      var g1, g2, g3, g4, g5, g6;

      

      window.onload = function(){

      var g1 = new JustGage({

        id: "g1"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Width",

        label: "",    

        gaugeWidthScale: 0.2          

      });

      

      var g2 = new JustGage({

        id: "g2"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Shadow",

        label: "",    

        shadowOpacity: 1,

        shadowSize: 0,

        shadowVerticalOffset: 10        

      });

      

      var g3 = new JustGage({

        id: "g3"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Custom Colors",

        label: "",  

        levelColors: [

          "#00fff6",

          "#ff00fc",

          "#1200ff"

        ]          

      });

      

      var g4 = new JustGage({

        id: "g4"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Hide Labels",

        showMinMax: false       

      });

     

      

      var g5 = new JustGage({

        id: "g5"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Animation Type",

        label: "",  

        startAnimationTime: 2000,

        startAnimationType: ">",

        refreshAnimationTime: 1000,

        refreshAnimationType: "bounce"                

      });

      

      var g6 = new JustGage({

        id: "g6"

        value: getRandomInt(0, 100), 

        min: 0,

        max: 100,

        title: "Minimal",

        label: "",  

        showMinMax: false,

        gaugeColor: "#fff",

        levelColors: ["#000"],

        showInnerShadow: false,        

        startAnimationTime: 1,

        startAnimationType: "linear",

        refreshAnimationTime: 1,

        refreshAnimationType: "linear"          

      });

      

        setInterval(function() {

          g1.refresh(getRandomInt(0, 100));

          g2.refresh(getRandomInt(0, 100));          

          g3.refresh(getRandomInt(0, 100));

          g4.refresh(getRandomInt(0, 100));

          g5.refresh(getRandomInt(0, 100));          

          g6.refresh(getRandomInt(0, 100));

        }, 2500);

      };

    </script>


</head>

  <body>    

    <div id="g1"></div>

    <div id="g2"></div>

    <div id="g3"></div>

    <div id="g4"></div>

    <div id="g5"></div>

    <div id="g6"></div>

  </body>

</html>


justgage.1.0.1.js

justgage.1.0.1.min.js

raphael.2.1.0.min.js

'CODE > Chart 예제' 카테고리의 다른 글

[jQuery] justGage 차트  (0) 2014.04.16
Posted by 레이칸트