<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Peity Charts</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a>Graphs</a>
            </li>
            <li class="active">
                <strong>Peity Charts</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInDown">

    <div class="row">
        <div class="col-lg-5">
            <div class="jumbotron">
                <h1>Peity Charts</h1>

                <p>Is a perfect library for inline graphics visualization data.</p>

                <p><a href="http://benpickles.github.io/peity/" target="_blank" class="btn btn-primary btn-lg" role="button">Learn more about Peity</a>
                </p>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Pie Charts
                        <small>With custom colors.</small>
                    </h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered white-bg">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart.data" options="main.PieChart.options"></pie-chart>
                            </td>
                            <td rowspan="6">

                                <p class="p-lg">
                                    To create Peity Chart in angular you just need to define <strong>data</strong> and <strong>options</strong> for chart in your controller.
                                    Then create element with atribute with chart type. For example with Pie chart type.
                                    <br/>
                                    <br/>
                                <code>&lt;pie-chart data="main.PieChart.data" <br/>options="main.PieChart.options"&gt;&lt;/pie-chart&gt;</code>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart2.data" options="main.PieChart2.options"></pie-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart3.data" options="main.PieChart3.options"></pie-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart4.data" options="main.PieChart4.options"></pie-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart5.data" options="main.PieChart5.options"></pie-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <pie-chart data="main.PieChart6.data" options="main.PieChart6.options"></pie-chart>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Line and Bars Charts</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered white-bg">
                        <thead>
                        <tr>
                            <th>Graph</th>
                            <th>Code</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <line-chart data="main.LineChart.data" options="main.LineChart.options"></line-chart>
                            </td>
                            <td rowspan="6">

                                <p class="p-lg">
                                    <strong>Example</strong> for pie, line and bar chart.
                                    <br/>
                                    <br/>
                                    <code>&lt;pie-chart data="main.PieChart.data" options="main.PieChart.options"&gt;&lt;/pie-chart&gt;</code>
                                    <code>&lt;line-chart data="main.LineChart.data" options="main.LineChart.options"&lt;&gt;/line-chart&gt;</code>
                                    <code>&lt;bar-chart data="main.BarChart.data" options="main.BarChart.options"&gt;&lt;/line-bar&gt;</code>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <line-chart data="main.LineChart4.data" options="main.LineChart4.options"></line-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <line-chart data="main.LineChart2.data" options="main.LineChart2.options"></line-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <line-chart data="main.LineChart3.data" options="main.LineChart3.options"></line-chart>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <bar-chart data="main.BarChart2.data" options="main.BarChart2.options"></line-bar>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <bar-chart data="main.BarChart3.data" options="main.BarChart3.options"></line-bar>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>