From 2db515576166c758ff347d5e2473b5ac48bafa4b Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Sat, 21 Apr 2018 19:13:47 +0530
Subject: [PATCH] [docs] Add a CodePen demo

---
 README.md       |  5 ++++-
 docs/index.html | 18 ++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index cb55f845..709e0d58 100644
--- a/README.md
+++ b/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>
diff --git a/docs/index.html b/docs/index.html
index a38c6d5f..4d4ec754 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -56,15 +56,15 @@ <h6 class="margin-vertical-rem">Create a chart</h6>
 
       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 @@ <h6 class="margin-vertical-rem">Create a chart</h6>
     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 @@ <h6 class="margin-vertical-rem">
             </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>