Update docs sample

rohitkr · rohitkr · commit a7ae2468a1fe · 2017-01-12T16:00:02.000+05:30
diff --git a/example/src/index.html b/example/src/index.html
diff --git a/example/src/js/ex1.js b/example/src/js/ex1.js
@@ -41,7 +41,6 @@ var myDataSource = {
 
 	revenueChartConfigs = {
 		id: "revenue-chart",
-	    renderAt: "revenue-chart-container",
 		type: "column2d",
 		width:600,
 	    height: 400,
diff --git a/example/src/js/ex10.js b/example/src/js/ex10.js
@@ -602,14 +602,13 @@ FusionCharts.ready(function () {
 
     var fc_configs_object = {
         type: 'usa',
-        renderAt: 'map-container',
         width: '600',
         height: '400',
         dataFormat: 'json',
         dataSource: myDataSource
     };
     ReactDOM.render(
         <ReactFC {...fc_configs_object} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('map-container')
     );
 });
diff --git a/example/src/js/ex2.js b/example/src/js/ex2.js
@@ -44,7 +44,6 @@ FusionCharts.ready(function () {
     }
     var props_pie_chart = {
         id: "pie_chart",
-        renderAt: "pie_chart_container",
         type: "pie3d",
         width:600,
         height: 400,
@@ -53,6 +52,6 @@ FusionCharts.ready(function () {
     };
     ReactDOM.render(
         <ReactFC {...props_pie_chart} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 })
diff --git a/example/src/js/ex3.js b/example/src/js/ex3.js
@@ -192,7 +192,6 @@ FusionCharts.ready(function () {
     }
     var props_multi_chart = {
         id: "multi_chart",
-        renderAt: "multi_chart_container",
         type: "mscombi2d",
         width:600,
         height: 400,
@@ -201,6 +200,6 @@ FusionCharts.ready(function () {
     };
     ReactDOM.render(
         <ReactFC {...props_multi_chart} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 })
diff --git a/example/src/js/ex4.js b/example/src/js/ex4.js
@@ -11,7 +11,6 @@ charts(FusionCharts);
 FusionCharts.ready(function () {
     var props_column_chart = {
         id: "column_chart",
-        renderAt: "column_chart_container",
         type: "column2d",
         width:600,
         height: 400,
@@ -20,6 +19,6 @@ FusionCharts.ready(function () {
     };
     ReactDOM.render(
         <ReactFC {...props_column_chart} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 })
diff --git a/example/src/js/ex4a.js b/example/src/js/ex4a.js
@@ -11,7 +11,6 @@ charts(FusionCharts);
 FusionCharts.ready(function () {
     var props_column_chart = {
         id: "column_chart",
-        renderAt: "column_chart_container",
         type: "column2d",
         width:600,
         height: 400,
@@ -20,6 +19,6 @@ FusionCharts.ready(function () {
     };
     ReactDOM.render(
         <ReactFC {...props_column_chart} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 })
diff --git a/example/src/js/ex5.js b/example/src/js/ex5.js
@@ -54,7 +54,6 @@ FusionCharts.ready(function () {
         render: function () {
             var props_col_chart = {
                 id: "column_chart",
-                renderAt: "column_chart_container",
                 type: "column2d",
                 width:600,
                 height: 400,
@@ -89,6 +88,6 @@ FusionCharts.ready(function () {
 
     ReactDOM.render(
         <FCDashboard />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 });
diff --git a/example/src/js/ex6.js b/example/src/js/ex6.js
@@ -39,7 +39,6 @@ FusionCharts.ready(function () {
     };
     var props_column_chart = {
         id: "column_chart",
-        renderAt: "column_chart_container",
         type: "column2d",
         width:600,
         height: 380,
@@ -53,6 +52,6 @@ FusionCharts.ready(function () {
     };
     ReactDOM.render(
         <ReactFC {...props_column_chart} />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 })
diff --git a/example/src/js/ex7.js b/example/src/js/ex7.js
@@ -57,7 +57,6 @@ FusionCharts.ready(function () {
         render: function () {
             var props_col_chart = {
                 id: "column_chart",
-                renderAt: "column_chart_container",
                 type: "column2d",
                 width:600,
                 height: 400,
@@ -95,6 +94,6 @@ FusionCharts.ready(function () {
 
     ReactDOM.render(
         <FCDashboard />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 });
diff --git a/example/src/js/ex8.js b/example/src/js/ex8.js
@@ -97,7 +97,6 @@ FusionCharts.ready(function () {
             // Initialize configurations for FusionCharts
             var props_col_chart = {
                 id: "column_chart",
-                renderAt: "column_chart_container",
                 className: "inline_div",
                 type: "column2d",
                 dataFormat: "json",
@@ -110,7 +109,6 @@ FusionCharts.ready(function () {
             var props_pie_chart = {
                 type: "pie2D",
                 id: "pie_chart",
-                renderAt: "pie_chart_container",
                 className: "inline_div",
                 dataFormat: "json",
                 defaultCenterLabel: "Total revenue: $64.08K",
@@ -153,6 +151,6 @@ FusionCharts.ready(function () {
 
     ReactDOM.render(
         <FCApp />,
-        document.getElementById('fc_react_app')
+        document.getElementById('chart-container')
     );
 });
diff --git a/example/src/js/ex9.js b/example/src/js/ex9.js
@@ -105,7 +105,6 @@ FusionCharts.ready(function () {
 
     var revenueChartConfigs = {
         type: 'column2d',
-        renderAt: 'revenue-chart-container',
         width: '400',
         height: '400',
         dataFormat: 'json',
diff --git a/example/src/js/gtd-custom.js b/example/src/js/gtd-custom.js
@@ -414,7 +414,6 @@ var GTDDashboard = function (options) {
                 /** Configuration options --- Column Chart for "Number of Attacks by Year" **/
                 numberOfAttacksConfigs = {
                     id: "attacks-column-chart",
-                    renderAt: "attacks-column-chart-container",
                     type: "column2d",
                     width: 725,
                     height: 250,
@@ -471,7 +470,6 @@ var GTDDashboard = function (options) {
                 /** Configuration options --- Pie Chart for "Number of Casualties" **/
                 numberOfCasualtiesConfigs = {
                     id: "casulty-pie-chart",
-                    renderAt: "casulty-pie-chart-container",
                     type: "pie2d",
                     width:475,
                     height: 500,
@@ -484,7 +482,6 @@ var GTDDashboard = function (options) {
                 /** Configuration options --- Map for "Number of Attacks by Country" **/
                 numberOfAttacksByCountryConfigs = {
                     id: "attacks-map",
-                    renderAt: "attacks-map-container",
                     type: "Worldwithcountries",
                     width: 725,
                     height: 500,
diff --git a/example/src/script.js b/example/src/script.js
@@ -11,36 +11,49 @@ window.ReactDOM = ReactDOM;
 
 var code = {
     "ex1": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/f0b2e0ms/'
     },
     "ex2": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/3r627e9h/'
     },
     "ex3": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/m18qaekm/'
     },
     "ex4": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': ''
     },
     "ex4a": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': ''
     },
     "ex5": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/bj0snLsg/'
     },
     "ex6": {
+        'html': `<div id="chart-container"></div>
+<p>The value that you have selected is: <span id="value">nothing</span></p>`,
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/9ora4yc5/'
     },
     "ex7": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/mqhk1nud/'
     },
     "ex8": {
+        'html': `<p>Click on the slice of pie</p>
+<div id="chart-container"></div>`,
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/97s74d1q/'
     },
     "ex9": {
+        'html': '<div id="chart-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/asg7eqb0/'
     },
     "ex10": {
+        'html': '<div id="map-container"></div>',
         'jsfiddle': 'http://jsfiddle.net/fusioncharts/o0uze2Lv/'
     }
 }
@@ -97,18 +110,19 @@ $('.examples').on('click',function() {
         }
     });
 
-    jQuery.get({
-        url: "../src/views/" + exampleId + ".html",
-        // contentType: 'application/json',
-        dataType: 'html',
-        success: function (data) {
-            data = "\n" + data.replace(/\</g, '&lt;');
-            $('#html_code code.language-markup').html(data);
-            Prism.highlightAll();
-        }
-    });
+    // jQuery.get({
+    //     url: "../src/views/" + exampleId + ".html",
+    //     // contentType: 'application/json',
+    //     dataType: 'html',
+    //     success: function (data) {
+    //         data = "\n" + data.replace(/\</g, '&lt;');
+    //         $('#html_code code.language-markup').html(data);
+    //         Prism.highlightAll();
+    //     }
+    // });
 
-    // $('#html_code code.language-markup').html(code[exampleId].html);
+    $('#html_code code.language-markup').html('\n' + code[exampleId].html.replace(/\</g, '&lt;'));
+    // $('#html_code code.language-markup').html('\nHello world');
     // $('#javascript_code code.language-javascript').html(code[exampleId].javascript);
 
     previous = this.id;
diff --git a/example/src/views/ex10.html b/example/src/views/ex10.html
@@ -7,7 +7,7 @@
         </style>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="map-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex10.js"></script>
diff --git a/example/src/views/ex2.html b/example/src/views/ex2.html
@@ -4,7 +4,7 @@
     <title>Building FusionCharts with React</title>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex2.js"></script>
diff --git a/example/src/views/ex3.html b/example/src/views/ex3.html
@@ -4,7 +4,7 @@
     <title>Building FusionCharts with React</title>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex3.js"></script>
diff --git a/example/src/views/ex4.html b/example/src/views/ex4.html
@@ -4,7 +4,7 @@
     <title>Building FusionCharts with React</title>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex4.js"></script>
diff --git a/example/src/views/ex4a.html b/example/src/views/ex4a.html
@@ -4,7 +4,7 @@
     <title>Building FusionCharts with React</title>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex4a.js"></script>
diff --git a/example/src/views/ex5.html b/example/src/views/ex5.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="../style.css"/>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
         <script src="../common.js"></script>
         <script src="../bundle.js"></script>
         <script src="../js/ex5.js"></script>
diff --git a/example/src/views/ex6.html b/example/src/views/ex6.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="../style.css"/>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
         <p style="text-align:center;" style="margin-top:0px">The value that you have selected is: <span id="value">nothing</span></p>
         <script src="../common.js"></script>
         <script src="../bundle.js"></script>
diff --git a/example/src/views/ex7.html b/example/src/views/ex7.html
@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="../style.css"/>
 </head>
 <body>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
         <script src="../common.js"></script>
         <script src="../bundle.js"></script>
         <script src="../js/ex7.js"></script>
diff --git a/example/src/views/ex8.html b/example/src/views/ex8.html
@@ -3,12 +3,16 @@
 <head>
     <title>Building FusionCharts with React</title>
         <style type="text/css">
-            .inline_div {display: inline-block;}
+            #fc_dashboard>div{
+	              display: inline-block;
+	               *zoom: 1; *display: inline;
+	               width: 49%;
+	       }
         </style>
 </head>
 <body>
     <p style="text-align:center;">Click on the slice of pie</p>
-    <div style="text-align:center;" id="fc_react_app"></div>
+    <div style="text-align:center;" id="chart-container"></div>
     <script src="../common.js"></script>
     <script src="../bundle.js"></script>
     <script src="../js/ex8.js"></script>
