Getting Started - v0.1.0
Pigeon Chart v0.1.0 supports 4 basic chart types: Line, Column, Bar and Pie.
Dependencies
Basic Setup
As soon as you downloaded all the plugins, just includes all the plugins into your project in the order as below:
- AngularJS
- Highcharts
- Underscore
- grouped-categories
- Pigeon Chart
*** If your website is running on PHP, you can just insert the "includes.php" file into your PHP project instead of insert JS file one by one. "includes.php" file is located under "pigeon-chart/php" folder.
Database Configuration
A simple database configuration is required to connect and retrieve the data from SQL database. The database configuration is stored in "pigeon-chart/configdb.php".
How to use?
Pigeon Chart Directive
In order to use pigeon chart, you are required to include "pigeon-chart" HTML tag into your project.
<pigeon-chart query="SELECT name, val FROM web_marketing" title="Total Visitors" subtitle="Web Marketing Companies" type="pie" axisy-title="Total" axisx-title="Web Marketing Company" data-data-label="false">Placeholder for generic chart</pigeon-chart>
Pigeon Chart Settings
-
query - SQL query for data retrieval *Required
-
title - Set a title for your chart.
-
subtitle - Set a subtitle for your chart.
-
type - State the chart type.
-
axisy-title - Set a y-axis title for your chart.
-
axisx-title - Set a x-axis title for your chart.
-
data-data-label (true or false) - set true to enable data labelling and vice versa.
Pigeon Chart Components - Chart Display with different queries
1. Basic Query
<pigeon-chart query="SELECT name, val FROM web_marketing" title="Total Visitors" subtitle="Web Marketing Companies" type="pie" axisy-title="Total" axisx-title="Web Marketing Company" data-data-label="false">Placeholder for generic chart</pigeon-chart>
Pie
Column
2. Query with aggregated function
<pigeon-chart query="SELECT semester, school, gender, COUNT(*) as Total FROM student GROUP BY semester, school, gender" title="Sunway, Swinburne and UCTS" subtitle="Total students" type="column" axisy-title="Total" axisx-title="University" data-data-label="false">Placeholder for generic chart</pigeon-chart>
Bar
Column
3. Multi-series
<pigeon-chart query="SELECT tdate, open, high, low, close FROM quotes WHERE stock = 'DiGi Bhd' LIMIT 20" title="Stock Quotes For DiGi" subtitle="Comparison between open, high, low and close price" type="line" axisy-title="Stock Quotes" axisx-title="Date" data-data-label="false">Placeholder for generic chart</pigeon-chart>
Line
2019 ngPigeon
Designed by all ngPigeon contributors.
Code licensed under MIT License.
