tui_editor-rails 1.0.2.0

data/vendor/assets/components/tui-chart/docs/wiki/chart-types-line-area-combo.md

@@ -0,0 +1,78 @@
+## Line &  Area Combo chart
+* This section describes how to create line &  area combo chart with options.
+* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.
+
+***
+
+### Data type
+
+The data type of the line & area combo chart is one level deeper than the depth of [basic data type](chart-types-line,area.md#basic-data-type).
+Features of this data type, you will need to enter the data for each chart type.
+
+```javascript
+var rawData = {
+    categories: ['cate1', 'cate2', 'cate3'],
+    series: {
+        area: [
+            {
+                name: 'Legend1',
+                data: [[4, 6], [6, 8], [8, 10]
+            }
+        ],
+        line: [
+            {
+                name: 'Legend2',
+                data: [5, 7, 9]
+            }
+        ]
+    }
+};
+```
+
+***
+
+### Creating a basic chart
+
+Line & Area Combo chart can use the features and options like line and area chat.
+
+* [Zoom by mouse drag(`zoomable` option)](chart-types-line,area.md#zoom-by-mouse-drag)
+* [Automatically adjusting count of tick(```tickInterval='auto'``` option)](chart-types-line,area.md#automatically-adjusting-count-of-tick)
+* [Dynamically adding data](chart-types-line,area.md#dynamically-adding-data)
+
+##### Example
+
+```javascript
+var rawData = {
+    categories: ['2014.01', '2014.02', '2014.03', ...],
+    series: {
+        area: [
+            {
+                name: 'Effective Load',
+                data: [150, 130, 100, ...]
+            }
+        ],
+        line: [
+            {
+                name: 'Power Usage',
+                data: [72, 80, 110, ...]
+            }
+        ]
+    }
+};
+var options = {
+    xAxis: {
+        tickInterval: 'auto' // automatically adjusting count of tick
+    },
+    series: {
+        zoomable: true // zoom by mouse drag
+    }
+}
+var chart = tui.chart.comboChart(container, rawData, options);
+// dynamically adding data
+chart.addData('newCate', {line:[10], area:[9]});
+```
+![Line & Area Combo Chart](https://cloud.githubusercontent.com/assets/2888775/17206153/5f5c1324-54e9-11e6-8786-c5981d64c2e6.gif)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example08-03-combo-chart-line-and-area.html)_
+
+***

data/vendor/assets/components/tui-chart/docs/wiki/chart-types-line-scatter-combo.md

@@ -0,0 +1,101 @@
+## Line & Scatter Combo chart
+* This section describes how to create line & scatter combo chart with options.
+* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.
+
+***
+
+### Data type
+
+The data type of the line & scatter combo chart is one level deeper than the depth of [basic data type](chart-types-bar,column.md#basic-data-type).
+Features of this data type, you will need to enter the data for each chart type.
+
+
+```javascript
+var rawData = {
+    categories: ['cate1', 'cate2', 'cate3'],
+    series: {
+        Scatter: [
+            {
+                name: 'Legend1',
+                data: [
+                    {
+                        x: 10,
+                        y: 20
+                    }, 
+                    {
+                        x: 25,
+                        y: 10
+                    }, 
+                    {
+                        x: 40,
+                        y: 30
+                    }
+                ]
+            }
+        ],
+        line: [
+            {
+                name: 'Legend2',
+                data: [
+                    {
+                        x: 5,
+                        y: 10
+                    },
+                    {
+                        x: 15, 
+                        y: 20
+                    },
+                    {
+                        x: 40,
+                        y: 60
+                    }
+                ]
+            }
+        ]
+    }
+};
+```
+
+***
+
+### Creating a basic chart
+
+##### Example
+
+```javascript
+var rawData = {
+    //...
+    series: {
+        scatter: [
+                {
+                    name: 'Efficiency',
+                    data: [
+                        {x: 10, y: 20},
+                        {x: 14, y: 30},
+                        ...
+                        {x: 90, y: 85}
+                    ]
+                }
+            ],
+        line: line: [
+                {
+                    name: 'Expenses',
+                    data: [
+                        {x: 15, y: 15},
+                        {x: 30, y: 23},
+                        ...
+                        {x: 90, y: 82}
+                    ]
+                }
+            ]
+    }
+};
+//...
+tui.chart.comboChart(container, rawData);
+```
+![image](https://cloud.githubusercontent.com/assets/7088720/20824269/9af12e9c-b89e-11e6-9e8b-1a617eebba86.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example08-04-combo-chart-line-and-scatter.html)_
+
+***
+

data/vendor/assets/components/tui-chart/docs/wiki/chart-types-map.md

@@ -0,0 +1,153 @@
+## Map chart
+* This section describes how to create a map chart and register map data.
+* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.
+
+***
+
+### How to include map data
+
+Map chart should include the map data, unlike other charts.<br>
+Map data provided by default are stored in a 'dist/maps' folder.<br>
+You should include map data(ex: ```dist/maps/world.js```) after include libraries and `chart.min.js`.
+
+> If you want register custom map, refer to the bottom.
+
+
+```html
+<!-- include libraries -->
+<script src="bower_components/tui-code-snippet/code-snippet.min.js"></script>
+<script src="bower_components/tui-component-effects/effects.min.js"></script>
+<script src="bower_components/raphael/raphael-min.js"></script>
+<!-- include chart.min.js -->
+<script src="bower_components/tui-chart/dist/chart.min.js"></script>
+<!-- include map data (only map chart) -->
+<script src="bower_components/tui-chart/dist/maps/world.js"></script>
+```
+
+***
+
+### Data type
+
+Data type of map chart has been affected in map data.
+
+```javascript
+var rawData = {
+    series: [
+        {
+            code: 'KR',
+            data: 80,
+            name: 'South Korea'
+        },
+        {
+            code: 'JP',
+            data: 70,
+            labelCoordinate: {
+                x: 0.6,
+                y: 0.7
+            }
+        },
+        //...
+    ]
+};
+```
+##### properties
+* code: This is key for match with map data.
+* name: This is label property, and overrides the attributes of map data.
+* labelCoordinate: This is the coordinate property of the label, and overrides the attributes of map data.
+
+***
+
+### Code table for map data
+
+|Map Name|File Name|Code Table Link|Sample Link|
+|---|---|---|:---:|
+|world|world.js|[Code table of World map](code-table-of-world-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-01-map-chart-world-map.html)|
+|south-korea|south-korea.js|[Code table of South Korea map](code-table-of-south-korea-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-02-map-chart-south-korea-map.html)|
+|usa|usa.js|[Code table of USA map](code-table-of-usa-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-03-map-chart-usa-map.html)|
+|china|china.js|[Code table of China map](code-table-of-china-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-04-map-chart-china-map.html)|
+|japan|japan.js|[Code table of Japan map](code-table-of-japan-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-05-map-chart-japan-map.html)|
+|singapore|singapore.js|[Code table of Singapore map](code-table-of-singapore-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-06-map-chart-singapore-map.html)|
+|thailand|thailand.js|[Code table of Thailand map](code-table-of-thailand-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-07-map-chart-thailand-map.html)|
+|taiwan|taiwan.js|[Code table of Taiwan map](code-table-of-taiwan-map.md)|[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example09-08-map-chart-taiwan-map.html)|
+
+
+***
+
+### Creating a basic chart
+
+##### Example
+
+```javascript
+//...
+var rawData = {
+    series: [
+        {
+            code: 'KR',
+            data: 80,
+            name: 'South Korea'
+        },
+        //...
+    ]
+};
+var options = {
+    //...
+    map: 'world'
+};
+tui.chart.mapChart(container, rawData, options);
+```
+
+![Map Chart](https://cloud.githubusercontent.com/assets/2888775/12806980/6abdd4b6-cb4e-11e5-8214-bf77df4069d4.png)
+
+***
+
+### Custom map registration and use
+
+#### Custom map registration
+
+You can register custom map by using the `tui.chart.registerMap`
+
+##### Example
+
+```javascript
+var mapData = [
+    {
+        code: 'MAP_CODE',
+        name: 'map name',
+        path: 'M835.13,346.53L837.55,350.71...', // svg path
+        labelCoordinate: {
+            x: 0.6,
+            y: 0.7
+        }
+    },
+    //...
+];
+tui.chart.registerMap('customMap', mapData);
+```
+##### properties
+* code: This is key for match with map data.
+* name: This is label property, and overrides the attributes of map data.
+* path: This is svg path for drawing map.
+* labelCoordinate: This is the coordinate property of the label, and overrides the attributes of map data.
+
+#### Using the custom map
+
+You can use the custom map by setting the `map` option.
+
+##### Example
+
+```javascript
+var rawData = {
+    series: [
+        {
+            code: 'MAP_CODE',
+            data: 100
+        },
+        //...
+   ]
+};
+var options = {
+    //...
+    map: 'customMap'
+}
+tui.chart.mapChart(container, rawData, options);
+```

data/vendor/assets/components/tui-chart/docs/wiki/chart-types-pie-donut-combo.md

@@ -0,0 +1,98 @@
+## Pie & Donut Combo chart
+* This section describes how to create pie & donut combo chart with options.
+* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.
+
+***
+
+### Data type
+
+The data type of the pie & donut combo chart is one level deeper than the depth of [data type of pie chart](chart-types-pie.md#data-type).<br>
+Features of this data type, you will need to enter the data for each chart type.
+
+```javascript
+var rawData = {
+    categories: ['cate1', 'cate2', 'cate3'],
+    seriesAlias: {
+        pie1: 'pie'
+        donut1: 'pie'
+    },
+    series: {
+        pie1: [
+            {
+                name: 'Legend1',
+                data: 20
+            },
+            {
+                name: 'Legend2',
+                data: 40
+            },
+            {
+                name: 'Legend3',
+                data: 60
+            },
+            {
+                name: 'Legend4',
+                data: 80
+            }
+        ],
+        donut1: [
+            {
+                name: 'Legend5',
+                data: 10
+            },
+            {
+                name: 'Legend6',
+                data: 80
+            },
+            {
+                name: 'Legend7',
+                data: 30
+            },
+            {
+                name: 'Legend8',
+                data: 50
+            }
+        ]
+    }
+};
+```
+
+***
+
+### Creating a basic chart
+
+##### Example
+
+```javascript
+var rawData = {
+    //...
+    seriesAlias: {
+        pie1: 'pie'
+        donut1: 'pie'
+    },
+    series: {
+        pie1: [
+            {
+                name: 'Chrome',
+                data: 40
+            },
+            //...
+        ],
+        donut1: [
+            {
+                name: 'Chrome 1',
+                data: 30
+            },
+            {
+                name: 'Chrome 2',
+                data: 10
+            },
+            //...
+        ]
+    }
+};
+tui.chart.comboChart(container, rawData);
+```
+![Pie & Donut Combo Chart](https://cloud.githubusercontent.com/assets/2888775/15540328/a7c51ac0-22c1-11e6-8727-224089a3f762.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example08-02-combo-chart-pie-and-donut.html)_

data/vendor/assets/components/tui-chart/docs/wiki/chart-types-pie.md

@@ -0,0 +1,186 @@
+## Pie chart
+* This section describes how to create pie chart with options.
+* You can refer to the [Getting started](getting-started.md) for base installation of Toast UI Chart.
+
+***
+
+### Data type
+The data type of the pie chart is simpler than the [basic data type](chart-types-bar,column.md#basic-data-type).
+
+```javascript
+var rawData = {
+    series: [
+        {
+            name: 'Legend1',
+            data: 20
+        },
+        {
+            name: 'Legend2',
+            data: 50
+        },
+        {
+            name: 'Legend3',
+            data: 60
+        },
+        {
+            name: 'Legend4',
+            data: 80
+        },
+        {
+            name: 'Legend5',
+            data: 10
+        },
+        {
+            name: 'Legend6',
+            data: 30
+        }
+    ]
+};
+```
+
+### Creating a basic chart
+
+##### Example
+
+```javascript
+var rawData = {
+    categories: ['Browser'],
+    series: [
+        {
+            name: 'Chrome',
+            data: 46.02
+        },
+        //...
+    ]
+};
+tui.chart.pieChart(container, rawData);
+```
+![Pie Chart](https://cloud.githubusercontent.com/assets/2888775/13131333/2390345e-d62e-11e5-892b-03fb7a8cf5f2.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic.html)_
+
+***
+
+### Displaying a legend label to each center of a piece in the pie graph
+
+If you set `true` to `series.showLegend` option and set 'center' to `series.labelAlign` option, you can display a legend label to each center of a piece of the pie graph.
+
+##### Example
+
+```javascript
+//...
+var options = {
+    series: {
+        showLegend: true,
+        labelAlign: 'center'
+    },
+    legend: {
+        visible: false
+    }
+};
+tui.chart.pieChart(container, rawData, options);
+```
+![Center Legend Pie Chart](https://cloud.githubusercontent.com/assets/2888775/13131315/03314216-d62e-11e5-90f2-4e37ac2ec11c.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-02-pie-chart-center-legend.html)_
+
+***
+
+### Displaying a legend label to outer of pie graph
+If you set 'outer' to `series.labelAlign` option, you can display a legend label to outer of pie graph.
+
+##### Example
+
+```javascript
+//...
+var options = {
+    series: {
+        showLegend: true,
+        labelAlign: 'outer'
+    },
+    legend: {
+        visible: false
+    }
+};
+tui.chart.pieChart(container, rawData, options);
+```
+![Outer Legend Pie Chart](https://cloud.githubusercontent.com/assets/2888775/13131343/387cb7f2-d62e-11e5-8791-a71ab0bed651.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-03-pie-chart-outer-legend.html)_
+
+***
+
+### Creating a donut chart
+
+If you use `radiusRange` option, you can creating a donut chart.<br>
+`radiusRange` option is an array type having a percentage value.
+
+##### Example
+
+```javascript
+//...
+var options = {
+    series: {
+        radiusRange: ['70%', '100%']
+    }
+};
+tui.chart.pieChart(container, rawData, options);
+```
+
+![Donut Chart](https://cloud.githubusercontent.com/assets/2888775/15539508/e81745fc-22bd-11e6-9631-21e7a834ecb4.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-04-pie-chart-donut.html)_
+
+***
+
+### Changing size of radius
+
+Also, if you set only first element at `radiusRange` option, you can change size of radius for pie graph.<br>
+
+
+##### Example
+
+```javascript
+//...
+var options = {
+    series: {
+        radiusRange: ['50%']
+    }
+};
+tui.chart.pieChart(container, rawData, options);
+```
+
+![radiusRatio option](https://cloud.githubusercontent.com/assets/2888775/15539764/4246cb46-22bf-11e6-8c25-1ed9bff44bca.png)
+
+***
+
+### Semi circle pie chart
+
+If you use `startAngle`, `endAngle` options with `radiusRange` option, you can make semi circle chart.
+
+##### Example
+
+```javascript
+var rawData = {
+    categories: ['Browser'],
+    series: [
+        {
+            name: 'Chrome',
+            data: 46.02
+        },
+        //...
+    ]
+};
+var options = {
+    series: {
+        startAngle: -90,
+        endAngle: 90,
+        radiusRange: ['60%', '100%']
+    }
+}
+tui.chart.pieChart(container, rawData, options);
+```
+
+![Semi Circle Donut Chart](https://cloud.githubusercontent.com/assets/2888775/15539472/b105dd62-22bd-11e6-8598-97d446035f60.png)
+
+* _[Sample](https://nhnent.github.io/tui.chart/latest/tutorial-example07-05-pie-chart-semi-circle-donut.html)_