Sha256: 97f1269998da510e86d5291435c1502bee89e74027689efc628cbe21858c7601
Contents?: true
Size: 1.97 KB
Versions: 1
Compression:
Stored size: 1.97 KB
Contents
# Getting started ## Download You should download Toast UI Chart files and associated libraries. This is dependent on tui.code-snippet, tui.component-effects and Raphael.js. #### Install with Bower Using Bower, you can download them easily. The downloaded file will be saved in "bower_components" directory. If you want to know more about the Bower, please refer to the [http://bower.io/](http://bower.io/). ``` bower install tui-chart ``` ## Include files Now, let's include the downloaded files. ```html <!-- include application-chart.min.css --> <link rel="stylesheet" type="text/css" href="bower_components/tui-chart/dist/chart.min.css" /> <!-- include libraries --> <script src="bower_components/tui-code-snippet/code-snippet.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> ``` ## Create Chart If you included files, now you can create a chart. The following example is creating a bar chart. ```javascript var container = document.getElementById('container-id'), data = { categories: ['cate1', 'cate2', 'cate3'], series: [ { name: 'Legend1', data: [20, 30, 50] }, { name: 'Legend2', data: [40, 40, 60] }, { name: 'Legend3', data: [60, 50, 10] }, { name: 'Legend4', data: [80, 10, 70] } ] }, options = { chart: { width: 500, height: 400, title: 'Chart Title' }, yAxis: { title: 'Y Axis Title' }, xAxis: { title: 'X Axis Title' } }; tui.chart.barChart(container, data, options); ```
Version data entries
1 entries across 1 versions & 1 rubygems
Version | Path |
---|---|
tui_editor-rails-1.0.2.0 | vendor/assets/components/tui-chart/docs/wiki/getting-started.md |