Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added effect (Prealpha version [unusable])

  • Loading branch information...
commit 9e2c18e0d7bc745cef25f0d750ebd052b347fd00 1 parent 2f452a6
Jesús authored
Showing with 131 additions and 79 deletions.
  1. +88 −48 css/jamcharts.css
  2. +41 −29 js/jamcharts.js
  3. +2 −2 test/line.html
View
136 css/jamcharts.css
@@ -2,61 +2,61 @@
/* CSS Document */
/*Basic definitions of the title and container*/
-.jamChart .titleContainer {
+.JAMChart .titleContainer {
width:100%;
height:50px;
}
-.jamChart .container {
+.JAMChart .container {
width:100%;
height:100%;
}
/*Position of the legend*/
-.jamChart.right .graphicContainer{ /*legend : 'right'*/
+.JAMChart.right .graphicContainer{ /*legend : 'right'*/
float:left;
width:85%;
height:100%;
}
-.jamChart.right .sideBar{
+.JAMChart.right .sidebar{
float:right;
width:15%;
height:100%;
}
-.jamChart.left .graphicContainer{ /*legend : 'left'*/
+.JAMChart.left .graphicContainer{ /*legend : 'left'*/
float:right;
width:85%;
height:100%;
}
-.jamChart.left .sideBar{
+.JAMChart.left .sidebar{
float:left;
width:15%;
height:100%;
}
-.jamChart.bottom .graphicContainer{ /*legend : 'bottom'*/
+.JAMChart.bottom .graphicContainer{ /*legend : 'bottom'*/
width:100%;
height:85%;
}
-.jamChart.bottom .sideBar{
+.JAMChart.bottom .sidebar{
width:100%;
height:15%;
}
/*Positions of the graph axis*/
-.jamChart .leftData{
+.JAMChart .leftData{
height:100%;
width:10%;
float:left;
}
-.jamChart .rightData{
+.JAMChart .rightData{
height:100%;
width:90%;
float:right;
}
-.jamChart .topData{
+.JAMChart .topData{
height:90%;
width:100%;
}
-.jamChart .bottomData{
+.JAMChart .bottomData{
height:10%;
width:100%;
}
@@ -65,54 +65,37 @@
-/*DEFAULT THEME*/
-.titleContainer {
+/*JAMChart THEME*/
+.JAMChart .titleContainer {
text-align: center;
}
-.title {
-color: #5F5075;
-font-weight: bold;
-font-size: 200%;
-}
-.subtitle {
-color: rgba(95, 80, 117, 0.95);
-}
-.leftTitle {
+.JAMChart .leftTitle {
-webkit-transform-origin: left;
-moz-transform-origin: left;
-o-transform-origin: left;
-ms-transform-origin: left;
text-align:center;
-font-size: 18px;
-font-weight: bold;
-color: #5F5075;
}
-.templateLine {
+.JAMChart .templateLine {
height: 1px;
-background: silver;
position:absolute;
}
-.templateLeft {
+.JAMChart .templateLeft {
text-align : right;
-color:#666;
padding-right:10px;
position:absolute;
-
}
-.templateBottom {
+.JAMChart .templateBottom {
padding-top: 5px;
text-align: center;
-color:#666;
position:absolute;
-
}
-.templateBottomSeparator {
+.JAMChart .templateBottomSeparator {
height:10px;
-width:1px;
background:silver;
position:absolute;
}
-.point {
+.JAMChart .point {
position:absolute;
width:8px;
height:8px;
@@ -122,7 +105,7 @@ transform:translate(-4px,-4px);
-moz-transform:translate(-4px,-4px);
-ms-transform:translate(-4px,-4px);
}
-.line{
+.JAMChart .line{
position:absolute;
transform-origin:left;
-o-transform-origin:left;
@@ -136,35 +119,92 @@ transform:translate(-2px,-2px);
-moz-transform:translate(-2px,-2px);
-ms-transform:translate(-2px,-2px);
}
+.JAMChart .legendContainer{
+top:48%;
+position: relative;
+left:20px;
+}
+.JAMChart .legendText {
+position: relative;
+left: 10px;
+top: -10px;
+}
+/*DEFAULT theme*/
+.JAMChart .title {
+color: #5F5075;
+font-weight: bold;
+font-size: 200%;
+}
+.JAMChart .subtitle {
+color: rgba(95, 80, 117, 0.95);
+}
+.JAMChart .leftTitle {
+font-size: 18px;
+font-weight: bold;
+color: #5F5075;
+}
+.JAMChart .templateLine {
+background: silver;
+}
+.JAMChart .templateLeft {
+color:#666;
+}
+.JAMChart .templateBottom {
+color:#666;
+}
+.JAMChart .templateBottomSeparator {
+background:silver;
+}
+.JAMChart .legend:hover > .legendText{
+text-shadow:1px 1px 1px lightgray;
+opacity:1;
+}
-
-.line0{
+.JAMChart .line0{
background:#2187E7;
box-shadow:1px 1px 3px rgba(33,135,231,0.5);
}
-.line1{
+.JAMChart .line1{
background:red;
box-shadow:1px 1px 3px rgba(255,0,0,0.5);
}
-.line2{
+.JAMChart .line2{
background:green;
box-shadow:1px 1px 3px rgba(0,128,0,0.5);
}
-.line3{
+.JAMChart .line3{
background:rgb(125,105,155);
box-shadow:1px 1px 3px rgba(125,105,155,0.5);
}
-.point0{
+.JAMChart .point + .legendText{
+opacity:0.75;
+-webkit-transition:0.2s;
+}
+
+.JAMChart .point0 + .legendText{
+color:#2187E7;
+}
+.JAMChart .point1 + .legendText{
+color:red;
+}
+.JAMChart .point2 + .legendText{
+color:green;
+}
+.JAMChart .point3 + .legendText{
+color:rgb(125,105,155);
+}
+
+.JAMChart .point0{
background:#2187E7;
box-shadow:1px 1px 3px rgba(33,135,231,0.5);
border-radius:99px;
}
-.point1{
+.JAMChart .point1{
background:red;
box-shadow:1px 1px 3px rgba(255,0,0,0.5);
}
-.point2{
+.JAMChart .point2{
background:green;
box-shadow:1px 1px 3px rgba(0,128,0,0.5);
transform:rotate(45deg) translateX(-5px);
@@ -173,7 +213,7 @@ transform:rotate(45deg) translateX(-5px);
-moz-transform:rotate(45deg) translateX(-5px);
-ms-transform:rotate(45deg) translateX(-5px);
}
-.point3{
+.JAMChart .point3{
background:rgb(125,105,155);
box-shadow:1px 1px 3px rgba(125,105,155,0.5);
-}
+}
View
70 js/jamcharts.js
@@ -2,11 +2,12 @@
var JAMChart = function (obj,graph){
this.obj = obj
this.graph = graph
- this.obj.className += " jamChart "+this.graph.legend+" "+this.graph.theme //Add CSS classes for the style
- this.obj.innerHTML='<div class="titleContainer"><div class="title">'+this.graph.title+'</div><div class="subtitle">'+this.graph.subtitle+'</div></div><div class="container"><div class="graphicContainer"></div><div class="sideBar"></div></div>'
+ this.obj.className += " JAMChart "+this.graph.legend+" "+this.graph.theme //Add CSS classes for the style
+ this.obj.innerHTML='<div class="titleContainer"><div class="title">'+this.graph.title+'</div><div class="subtitle">'+this.graph.subtitle+'</div></div><div class="container"><div class="graphicContainer"></div><div class="sidebar"><div class="legendContainer"></div></div></div>'
for(r=0;r<this.graph.variables.length;r++){
- this.obj.lastChild.firstChild.innerHTML+='<span>'+this.graph.variables[r].title+'</span>'
+ this.obj.getElementsByClassName('sidebar')[0].firstChild.innerHTML+='<div class="legend"><div class="point point'+r+'"></div><div class="legendText">'+this.graph.variables[r].title+'</div></div>'
}
+ this.obj.getElementsByClassName('sidebar')[0].firstChild.style.marginTop=-this.obj.getElementsByClassName('sidebar')[0].firstChild.offsetHeight/2+"px"
this.cont = this.obj.lastChild.firstChild //We define the container of the graph
/*Función para añadir los estilos más rápidamente*/
@@ -164,32 +165,43 @@ var JAMChart = function (obj,graph){
this.cssText = ""
if(this.graph.effect=="left"){
for(t=0;t<this.graph.variables.length;t++){
- for(s=0;s<this.graph.variables[0].data.length-1;s++){
- document.getElementsByClassName("line"+t)[s].style.visibility="hidden"
- /*Standart rules*/
- document.getElementsByClassName("line"+t)[s].style.animation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
- document.getElementsByClassName("line"+t)[s].style.animationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
- this.cssText+="@keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
- document.getElementsByClassName("line"+t)[s].style.animationFillMode="forwards"
- document.getElementsByClassName("line"+t)[s].style.animationTimingFunction="linear"
- /*Wekit*/
- document.getElementsByClassName("line"+t)[s].style.webkitAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
- document.getElementsByClassName("line"+t)[s].style.webkitAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
- this.cssText+="@-webkit-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
- document.getElementsByClassName("line"+t)[s].style.webkitAnimationFillMode="forwards"
- document.getElementsByClassName("line"+t)[s].style.webkitAnimationTimingFunction="linear"
- /*Firefox*/
- document.getElementsByClassName("line"+t)[s].style.MozAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
- document.getElementsByClassName("line"+t)[s].style.MozAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
- this.cssText+="@-moz-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
- document.getElementsByClassName("line"+t)[s].style.MozAnimationFillMode="forwards"
- document.getElementsByClassName("line"+t)[s].style.MozAnimationTimingFunction="linear"
- /*Opera*/
- document.getElementsByClassName("line"+t)[s].style.OAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
- document.getElementsByClassName("line"+t)[s].style.OAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
- this.cssText+="@-o-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
- document.getElementsByClassName("line"+t)[s].style.OAnimationFillMode="forwards"
- document.getElementsByClassName("line"+t)[s].style.OAnimationTimingFunction="linear"
+ for(s=0;s<this.graph.variables[0].data.length;s++){
+ if(s+1!=this.graph.variables[0].data.length){
+ /*Animaciones de las líneas-------------------------------------------------------------------------------------------------*/
+ document.getElementsByClassName("line"+t)[s].style.visibility="hidden"
+ /*Standart rules*/
+ document.getElementsByClassName("line"+t)[s].style.animation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
+ document.getElementsByClassName("line"+t)[s].style.animationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
+ this.cssText+="@keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
+ document.getElementsByClassName("line"+t)[s].style.animationFillMode="forwards"
+ document.getElementsByClassName("line"+t)[s].style.animationTimingFunction="linear"
+ /*Wekit*/
+ document.getElementsByClassName("line"+t)[s].style.webkitAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
+ document.getElementsByClassName("line"+t)[s].style.webkitAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
+ this.cssText+="@-webkit-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
+ document.getElementsByClassName("line"+t)[s].style.webkitAnimationFillMode="forwards"
+ document.getElementsByClassName("line"+t)[s].style.webkitAnimationTimingFunction="linear"
+ /*Firefox*/
+ document.getElementsByClassName("line"+t)[s].style.MozAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
+ document.getElementsByClassName("line"+t)[s].style.MozAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
+ this.cssText+="@-moz-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
+ document.getElementsByClassName("line"+t)[s].style.MozAnimationFillMode="forwards"
+ document.getElementsByClassName("line"+t)[s].style.MozAnimationTimingFunction="linear"
+ /*Opera*/
+ document.getElementsByClassName("line"+t)[s].style.OAnimation="move"+t+"o"+parseInt(s+1,10)+" "+this.graph.effectTime/(this.graph.variables[0].data.length-1)+"s"
+ document.getElementsByClassName("line"+t)[s].style.OAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
+ this.cssText+="@-o-keyframes move"+t+"o"+parseInt(s+1,10)+" { 0% { width:0px;visibility:visible} 100% { width:"+document.getElementsByClassName('line'+t)[s].style.width+"px;visibility:visible }}"
+ document.getElementsByClassName("line"+t)[s].style.OAnimationFillMode="forwards"
+ document.getElementsByClassName("line"+t)[s].style.OAnimationTimingFunction="linear"
+ }
+
+ /*Animaciones de los puntos-------------------------------------------------------------------------------------------------*/
+ document.getElementsByClassName("point"+t)[s].style.opacity=0
+ document.getElementsByClassName("point"+t)[s].style.webkitAnimation="appear"+t+"o"+parseInt(s+1,10)+" 0.15s"
+ document.getElementsByClassName("point"+t)[s].style.webkitAnimationDelay=""+this.graph.effectTime/(this.graph.variables[0].data.length-1)*s+"s"
+ this.cssText+="@-webkit-keyframes appear"+t+"o"+parseInt(s+1,10)+" { 0% {opacity:0} 100% { opacity:1 }}"
+ document.getElementsByClassName("point"+t)[s].style.webkitAnimationFillMode="forwards"
+ document.getElementsByClassName("point"+t)[s].style.webkitAnimationTimingFunction="linear"
}
}
this.appendStyle(this.cssText)
View
4 test/line.html
@@ -15,7 +15,7 @@
title : 'Temperature in USA', //Title of the graphic, can include HTML
subtitle : 'By: Weather Institute', //Subtitle of the graphic, can include HTML
effect : 'left', //Effect display when the graphic is inizialited (effectType, CSS3 transition parameters)
- effectTime:1,
+ effectTime:2,
independent : { //Data refering to de x axis.
categories : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
//List of all the categories of the xAxis.
@@ -33,7 +33,7 @@
title : 'Chicago',
data : [8.1,9.2,10,10.3,12.1,14.3,17,23.2,18,16.9,12.1,9]
},{
- title : 'Chicago',
+ title : 'Seatle',
data : [10,10.3,12.1,14.3,17,23.2,18,16.9,12.1,9,3,6.2]
}
]
Please sign in to comment.
Something went wrong with that request. Please try again.