[docs] Add a CodePen demo

README.md

@@ -6,7 +6,10 @@
     <p align="center">
         <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
         <a href="https://frappe.github.io/charts">
-            <b>Explore Demos »</b>
+            <b>Explore Demos » </b>
+        </a>
+        <a href="https://codepen.io/pratu16x7/pen/wjKBoq">
+            <b> Edit at CodePen »</b>
         </a>
     </p>
 </div>

docs/index.html

@@ -56,15 +56,15 @@
 
       datasets: [
         {
-          label: "Some Data", chartType: 'bar',
+          name: "Some Data", chartType: 'bar',
           values: [25, 40, 30, 35, 8, 52, 17, -4]
         },
         {
-          label: "Another Set", chartType: 'bar',
+          name: "Another Set", chartType: 'bar',
           values: [25, 50, -10, 15, 18, 32, 27, 14]
         },
         {
-          label: "Yet Another", chartType: 'line',
+          name: "Yet Another", chartType: 'line',
           values: [15, 20, -3, -15, 58, 12, -17, 37]
         }
       ],
@@ -78,7 +78,7 @@
     title: "My Awesome Chart",
     type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
     height: 300,
-    colors: ['purple', '#ffa3ef', 'red'],
+    colors: ['purple', '#ffa3ef', 'light-blue'],
 
     tooltipOptions: {
       formatTooltipX: d => (d + '').toUpperCase(),
@@ -230,6 +230,16 @@
             </div>
           </div>
 
+          <div class="col-sm-10 push-sm-1">
+            <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
+              data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
+                See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
+                by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
+                <a href="https://codepen.io">CodePen</a>.
+            </p>
+            <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+          </div>
+
           <div class="col-sm-10 push-sm-1">
               <div class="dashboard-section">
                 <h6 class="margin-vertical-rem">Available options:</h6>