GGshow reloaded
This is a HTML5 build of Dynamic Chord Diagam.
Usage:
- Include JavaScript at HTML head.
<script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
- Creating/rendering chord instance.
var myChord = new ChordCanvas(value, size); myChord.render();
Simplified method:
-
<script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>
Customize Color:
-
var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150"); chord1.backgroundcolor = "#CCF"; chord1.bordercolor = ""; chord1.titlecolor = "#FFF"; chord1.labelcolor = "#00F"; chord1.chordcolor = "#00F"; chord1.titlebackgroundcolor = "#00F"; chord1.render();
Overwrite chord container display style:
- Chord container has block display by default, you can overwrite the display style by .chord-container class selector. e.g:
<style> .chord-container { display:inline-block; } </style>
Examples:
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chord Canvas - Example 01</title>
<style>
.chord-container {
display:inline-block;
}
</style>
<script src="http://commondatastorage.googleapis.com/ggshow/files/chordcanvas/chordcanvas-1-0-0.min.js"></script>
</head>
<body>
<h1>Chord Canvas Examples</h1>
<h3>Basic</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","100").render();</script>
<script>new ChordCanvas("Am,X,0,2,2,1,0","100").render();</script>
<script>new ChordCanvas("F,X,X,3,2,1,1","100").render();</script>
<script>new ChordCanvas("G,X,0,2,2,1,0","100").render();</script>
<br />
<script>new ChordCanvas("C#7-5,X,X,3,4,2,3","100").render();</script>
<script>new ChordCanvas("D♭7-9,X,4,3,4,3,X","100").render();</script>
<script>new ChordCanvas("E♭,11,10,8,8,8,11","100").render();</script>
<script>new ChordCanvas("B♭m,X,X,11,10,11,9","100").render();</script>
<h3>Customize Size</h3>
<script>new ChordCanvas("C,X,3,2,0,1,0","150").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","250").render();</script>
<script>new ChordCanvas("C,X,3,2,0,1,0","").render();</script>
<h3>Customize Color</h3>
<script>
var chord1 = new ChordCanvas("C,X,3,2,0,1,0","150");
chord1.backgroundcolor = "#CCF";
chord1.bordercolor = "";
chord1.titlecolor = "#FFF";
chord1.labelcolor = "#00F";
chord1.chordcolor = "#00F";
chord1.titlebackgroundcolor = "#00F";
chord1.render();
var chord2 = new ChordCanvas("C,8,10,10,9,8,8","150");
chord2.backgroundcolor = "#F00";
chord2.bordercolor = "#F00";
chord2.titlecolor = "#F00";
chord2.labelcolor = "#000";
chord2.chordcolor = "#FFF";
chord2.titlebackgroundcolor = "#FFF";
chord2.render();
</script>
</body>
</html>
