// HTML code
<div id="circle6-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let people6=new range.circle({
id:"circle6-div",
width:200,
strokewidth:5,
percent:73,
rounded:false,
fontsize:30,
color:"linear-gradient(-20deg,lightblue 0%,navy 100%)",
textcolor:"navy",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
widetrack:false,
trackfit:true,
dashed:true,
dashtrack:"2 3",
unit:"%",
balltip:true,
breakcolor:"white",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
// HTML code
<div id="circle7-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let circle7=new range.circle({
id:"circle7-div",
width:180,
strokewidth:15,
percent:43,
rounded:false,
fontsize:33,
color:"rgb(67, 47, 245)",
textcolor:"navy",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"%",
arrowtip:true,
breakcolor:"white",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
/*
//these progress barr cannot be use fro animation or stopwatch only static progress range
//code below for click stopwatch
let start=true;
let point=0
document.querySelector("#circle7-div").addEventListener("click",function(){
let revolve=setInterval(() => {
if(!start){
let circle7=new range.circle({
id:"circle7-div",
width:180,
strokewidth:15,
percent:43,
rounded:false,
fontsize:33,
color:"rgb(67, 47, 245)",
textcolor:"navy",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"%",
arrowtip:true,
breakcolor:"white",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
}
else{
clearInterval(revolve)
}
}, 500);
start=!start;
})
*/
// HTML code
<div id="square-div">
<svg>
<rect/>
</svg>
</div>
// javascript code
new range.rectangleroller({
id:"square-div",
width:100,
strokewidth:20,
color:"orange",
track:true,
trackcolor:"",
rounded:false,
})
// HTML code
<div id="circle8-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
let circle8=new range.circle({
id:"circle8-div",
width:180,
strokewidth:3,
percent:85,
rounded:false,
fontsize:33,
color:"navy",
textcolor:"navy",
textbold:100,
track:true,
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"%",
breakcolor:"white",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
// HTML code
<div id="point-div">
</div>
// javascript code
let points=new range.point({
id:"point-div",
pointcount:5,
background:"rgb(67, 47, 245)",
fillpoint:3,
pointwidth:35,
activecolor:"white",
fontsize:14,
pointtextlabel:'number',
disabledcolor:"rgba(70,70,70,0.35)",
titles:["Account","BVN","Contact","Verified","Active"]
})
//code for point 2
let linechart2=new range.linechart({
id:"line-chart2",
linerchartrange:[40,20,20,10],
width:"90%",
boxshadow:"0 0",
roundrange:"0px",
strokewidth:15,
linerchartcolor:["linear-gradient(60deg,red,orange)","linear-gradient(60deg,navy,blue)","aqua","linear-gradient(60deg,green,lightgreen)"],
lineprop:["JANUARY","FEBUARY","MARCH","APRIL"],
})
// HTML code
<div id="circle9-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
// Note using arrowtip/balltip the stroke width must be greater than 4% the width
let people9=new range.semicircle({
id:"circle9-div",
width:200,
strokewidth:10,
percent:67,
rounded:false,
fontsize:18,
color:"linear-gradient(90deg,lightblue 0%,navy 100%)",
textcolor:"navy",
textbold:500,
track:true,
extratext:"Uprise of Bitcoin in present nigeria",
extratextcolor:'rgb(160,160,160)',
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"%",
dashed:true,
dashtrack:"2 4",
widestroke:true,
breakcolor:"white",
boxshadow:"0.2 0.07",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
// HTML code
<div id="circle10-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
// Note using arrowtip/balltip the stroke width must be greater than 4% the width
let people10=new range.semicircle({
id:"circle10-div",
width:220,
strokewidth:20,
percent:47,
rounded:false,
fontsize:20,
color:"linear-gradient(90deg,lightblue 0%,navy 100%)",
textcolor:"navy",
textbold:600,
track:true,
extratext:"Uprise of Nothern Temperature",
extratextcolor:'rgb(160,160,160)',
indicator:true,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"°",
widestroke:true,
breakcolor:"white",
boxshadow:"0.2 0.05",
dashtrack:"1.5 3",
gradient:{
type:"linear-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
// HTML code
<div id="circle9-div">
<svg>
<circle/>
</svg>
</div>
// javascript code
// Note using arrowtip/balltip is not advisable to be use in quatercircle as the function is still in development
let quater=new range.quatercircle({
id:"quater-div",
width:200,
strokewidth:10,
percent:27,
rounded:false,
fontsize:20,
color:"linear-gradient(-180deg,lightblue 0%,navy 100%)",
textcolor:"navy",
textbold:600,
track:true,
extratext:"Uprise of Temp. in present nigeria",
extratextcolor:'rgb(160,160,160)',
indicator:true,
animate:false,
trackcolor:"",
widetrack:true,
trackfit:true,
unit:"°",
arrowtip:true,
widestroke:true,
breakcolor:"white",
boxshadow:"0.2 0.07",
gradient:{
type:"radial-gradient",
colors:["lightblue 0%","navy 100%"],
orientation:{x:50,y:50,fill:100}
},
})
// HTML code
<div id="pie-chart"> </div>
// javascript code
let piechart=new range.piechart({
id:"pie-chart",
width:200,
pielabel:true,
strokewidth:65,
piecolor:["teal","orange","aqua","lightgreen"],
pierange:[40,20,20,10],
stroketitle:["New arrival","Depature","Gross outcome display","Intrest"],
strokepatternbackground:"white",
})
// HTML code
<div id="pie-chart"> </div>
// javascript code
let piechart2=new range.piechart({
id:"pie-chart2",
width:200,
strokewidth:55,
pielabel:true,
piecolor:["teal","orange","aqua","lightgreen"],
pierange:[300,300,200,100],
strokepattern:[40,18,26,35],
stroketitle:["Profit","Expenditure","Capital","Losses"],
strokepatternbackground:"white",
})
// HTML code
<div id="line-chart"> </div>
<div id="line-chart2"> </div>
// javascript code
let linechart=new range.linechart({
id:"line-chart",
linerchartrange:[40,20,20,10],
strokewidth:12,
width:"90%",
boxshadow:"0.1 0.2",
roundrange:"50px",
linerchartcolor:["linear-gradient(60deg,red,orange)","linear-gradient(60deg,navy,blue)","aqua","linear-gradient(60deg,green,lightgreen)"],
lineprop:["JANUARY","FEBUARY","MARCH","APRIL"],
})
//code for line-chart2
let linechart2=new range.linechart({
id:"line-chart2",
linerchartrange:[40,20,20,10],
width:"90%",
boxshadow:"0 0",
roundrange:"0",
strokewidth:15,
linerchartcolor:["linear-gradient(60deg,red,orange)","linear-gradient(60deg,navy,blue)","aqua","linear-gradient(60deg,green,lightgreen)"],
lineprop:["JANUARY","FEBUARY","MARCH","APRIL"],
})