Updated README and little fixes. Add example

README.md

@@ -1,5 +1,90 @@
-# Charty, a small library for pie and circle charts
+# Charty, a small library for charts
 
-Charty is a simple library to draw pie and circle charts. 
+Charty is a simple library to draw pie and circle charts. Just that, simple to use. 
 
+To use it, just link de library with `<script src="charty.js">` and between the `<header>` tag link the css file `<link rel="stylesheet" rel="charty.css"` (you can define your own css).
+
+![Charty Example](charty.png)
+
+## How to start using.
+
+```javascript
+const chart = new Charty({}) //for a empty chart
+
+const chart = new Charty({ //With options, every one is optionl but data
+    title: 'My Chart',		//The title of the chart
+    chartType: 'circle',	//The type of chart, circle or pie
+    data: [					//An array of objects int he format name/value
+        {Apples: 45},		//{Name: Value}
+        {Oranges: 37},
+        {Bananas: 52}
+    ],
+    precision: false,		//If the data chart have float numbers
+    selector: '#app'		//Where the chart will be inserted, must be a valid css selector (default to body)
+})
+```
+
+
+
+## Add aditional data
+
+The charts accept insert additional data with the next function:
+
+```javascript
+chart.addData({"Name", Value}) //Name: String, Value: Integer
+```
+
+**The chart will  be redrawn after insert data**
+
+
+
+## Manipulate the chart
+
+If you want to manipulate the chart's DOM, you can do it throught the ID of the chart, every chart have a data-chart-id attribute, and every chart hav a unique ID.
+
+```javascript
+const DIV = document.querySelector(`[data-chart-id="${chart.id}"]`)
+//Remove the background gradient
+DIV.style.backgroundImage = 'none'
+//The background will be changed
+DIV.style.backgroundColor = 'lightyellow'
+```
+
+**By default the charts have a light gradient**
+
+
+
+## Change chart's colors
+
+By default the colors are static, if you want to change they, yo must edit the file `charty.js` and change the colors array in the `getColor` function.
+
+```javascript
+getColor(index) {
+    const colors = [
+      'purple', //Change these colors
+      'midnightblue',
+      'blue',
+      'cyan',
+      'magenta',
+      'yellow',
+      'dimgray',
+      'orange',
+      'brown',
+      'indigo',
+      'pink',
+      'gold'
+    ];
+    return colors[index];
+  };
+```
+
+
+
+If this small library is useful for you or liked you, consider to donate a small amount in thankfulness trought [Paypal](https://www.paypal.com/donate?hosted_button_id=NZ9Z8YDHSMMEC&source=url) :smile:
+
+<form action="https://www.paypal.com/donate" method="post" target="_top">
+<input type="hidden" name="hosted_button_id" value="NZ9Z8YDHSMMEC" />
+<input type="image" src="https://www.paypalobjects.com/es_XC/i/btn/btn_donate_SM.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
+<img alt="" border="0" src="https://www.paypal.com/es_MX/i/scr/pixel.gif" width="1" height="1" />
+</form>
 

index.js → charty.js

@@ -4,7 +4,7 @@
 */
 
 /** @class Charty representing a chart*/
-export default class Charty{
+class Charty{
 /**
  * Creates an instance of Charty.
  *
@@ -186,32 +186,3 @@ export default class Charty{
     }
   };
 }
-
-// const myChart = new Charty({title: 'Pets', selector: '#app'});
-// myChart.addData({ name: 'Dogs', value: 8 });
-// myChart.addData({ name: 'Cats', value: 3 });
-// myChart.addData({ name: 'Birds', value: 11 });
-// myChart.addData({ name: 'Fishes', value: 9 });
-// myChart.addData({ name: 'Butterflies', value: 19 });
-
-// const obj = new Charty({selector: '#app'}); 
-
-// const x = new Charty(
-//   {
-//     title: 'Fruits', 
-//     chartType: 'Pie', 
-//     data: [{Oranges: 23}, {Apples: 44}, {Guavas: 33}],
-//     precision: true,
-//     selector: '#app'
-//   }
-// );
-
-// x.addData({name: 'Grapes', value: 77});
-// // const button = document.createElement('BUTTON');
-// // button.textContent = 'Add data';
-// // button.addEventListener('click', e => {
-// //   let name = prompt('New data:');
-// //   let value = parseInt(prompt('Value:')) || 0;
-// //   x.addData({name: name, value: value});
-// // });
-// // document.querySelector(`[data-chart-id="${x.id}"]`).appendChild(button);

example/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Charty</title>
+	<link rel="stylesheet" href="../charty.css">
+	<style>
+		body{
+			font:  16px/1.6 system-ui;
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+			gap:  1rem;
+			margin-top:  8rem;
+		}
+	</style>
+</head>
+<body>
+<script src="../charty.js"></script>
+<script src="main.js"></script>	
+</body>
+</html>

example/main.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const chart = new Charty({
+	title: 'Circle chart', 
+	data: [
+		{Stone: 24}, 
+		{Wood: 7}, 
+		{Steel: 29}
+	]
+});
+
+const all = new Charty({
+	title: 'Pie Chart', 
+	data: [
+		{All: 38}
+	], 
+	chartType: 'pie'
+});
+
+const ages = new Charty({
+	title: 'Ages', 
+	data: [
+		{'18 - 25': 30}, 
+		{'26 - 35': 45}, 
+		{'36 - 45': 27}, 
+		{'45 - 55': 17}
+	]
+});