├── docs ├── .nojekyll ├── images │ ├── bar.png │ ├── pie.png │ ├── line.png │ ├── radar.png │ ├── Charts.gif │ ├── Legends.png │ ├── candle.png │ ├── funnel.png │ ├── pie-area.png │ ├── pie-none.png │ ├── scatter.png │ ├── pie-labels.png │ ├── pie-radius.png │ ├── solidGauge.png │ ├── funnel-labels.png │ ├── funnel-ladder.png │ ├── funnel-left.png │ ├── gantt-step1.png │ ├── gantt-step2.png │ ├── Canviz-100x100.png │ ├── funnel-pyramid.png │ ├── gantt-rowheight.png │ ├── gantt_barheight.png │ ├── multiple-charts.png │ ├── quickstart-pie.png │ ├── funnel-descending.png │ ├── funnel-horizontal.png │ ├── funnel-rectangle.png │ ├── gantt_headerfont1.png │ ├── gantt_headerfont2.png │ ├── quickstart-gantt.png │ ├── funnel-labels-value.png │ ├── gantt-rowHeaderHeight.png │ ├── quickstart-change-type.png │ ├── quickstart-chart-title.png │ ├── quickstart-create-app.png │ ├── quickstart-insert-chart.png │ ├── quickstart-insert-image.png │ ├── data-integration-complete.png │ ├── funnel-labels-percentage.png │ ├── gantt-columnHeadersWidth.png │ ├── quickstart-components-tab.png │ ├── quickstart-create-app-02.png │ ├── quickstart-insert-button.png │ ├── quickstart-move-controls.png │ ├── quickstart-select-screen.png │ ├── contribute-change-chart-type.png │ ├── contribute-copy-chart-source.png │ ├── data-integration-data-test.png │ ├── quickstart-chart-properties.png │ ├── quickstart-import-components.png │ ├── quickstart-insert-ganttchart.png │ ├── quickstart-paste-chart-code.png │ ├── quickstart-size-properties.png │ ├── data-integration-data-property.png │ ├── quickstart-enabled-components.png │ ├── quickstart-ganttchart-properties.png │ └── data-integration-onedrive-connector.png ├── _sidebar.md ├── index.html ├── limitations.md ├── solidGauge.md ├── radar.md ├── pie.md ├── bar.md ├── line.md ├── axes.md ├── scatter.md ├── candle.md ├── README.md ├── funnel.md ├── data-integration.md ├── gantt.md ├── gantt-dynamic.md └── properties.md ├── ChartData.xlsx ├── Chart Components V2.msapp └── README.MD /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ChartData.xlsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/ChartData.xlsx -------------------------------------------------------------------------------- /docs/images/bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/bar.png -------------------------------------------------------------------------------- /docs/images/pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/pie.png -------------------------------------------------------------------------------- /docs/images/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/line.png -------------------------------------------------------------------------------- /docs/images/radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/radar.png -------------------------------------------------------------------------------- /docs/images/Charts.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/Charts.gif -------------------------------------------------------------------------------- /docs/images/Legends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/Legends.png -------------------------------------------------------------------------------- /docs/images/candle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/candle.png -------------------------------------------------------------------------------- /docs/images/funnel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel.png -------------------------------------------------------------------------------- /docs/images/pie-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/pie-area.png -------------------------------------------------------------------------------- /docs/images/pie-none.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/pie-none.png -------------------------------------------------------------------------------- /docs/images/scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/scatter.png -------------------------------------------------------------------------------- /Chart Components V2.msapp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/Chart Components V2.msapp -------------------------------------------------------------------------------- /docs/images/pie-labels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/pie-labels.png -------------------------------------------------------------------------------- /docs/images/pie-radius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/pie-radius.png -------------------------------------------------------------------------------- /docs/images/solidGauge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/solidGauge.png -------------------------------------------------------------------------------- /docs/images/funnel-labels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-labels.png -------------------------------------------------------------------------------- /docs/images/funnel-ladder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-ladder.png -------------------------------------------------------------------------------- /docs/images/funnel-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-left.png -------------------------------------------------------------------------------- /docs/images/gantt-step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt-step1.png -------------------------------------------------------------------------------- /docs/images/gantt-step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt-step2.png -------------------------------------------------------------------------------- /docs/images/Canviz-100x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/Canviz-100x100.png -------------------------------------------------------------------------------- /docs/images/funnel-pyramid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-pyramid.png -------------------------------------------------------------------------------- /docs/images/gantt-rowheight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt-rowheight.png -------------------------------------------------------------------------------- /docs/images/gantt_barheight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt_barheight.png -------------------------------------------------------------------------------- /docs/images/multiple-charts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/multiple-charts.png -------------------------------------------------------------------------------- /docs/images/quickstart-pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-pie.png -------------------------------------------------------------------------------- /docs/images/funnel-descending.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-descending.png -------------------------------------------------------------------------------- /docs/images/funnel-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-horizontal.png -------------------------------------------------------------------------------- /docs/images/funnel-rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-rectangle.png -------------------------------------------------------------------------------- /docs/images/gantt_headerfont1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt_headerfont1.png -------------------------------------------------------------------------------- /docs/images/gantt_headerfont2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt_headerfont2.png -------------------------------------------------------------------------------- /docs/images/quickstart-gantt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-gantt.png -------------------------------------------------------------------------------- /docs/images/funnel-labels-value.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-labels-value.png -------------------------------------------------------------------------------- /docs/images/gantt-rowHeaderHeight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt-rowHeaderHeight.png -------------------------------------------------------------------------------- /docs/images/quickstart-change-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-change-type.png -------------------------------------------------------------------------------- /docs/images/quickstart-chart-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-chart-title.png -------------------------------------------------------------------------------- /docs/images/quickstart-create-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-create-app.png -------------------------------------------------------------------------------- /docs/images/quickstart-insert-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-insert-chart.png -------------------------------------------------------------------------------- /docs/images/quickstart-insert-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-insert-image.png -------------------------------------------------------------------------------- /docs/images/data-integration-complete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/data-integration-complete.png -------------------------------------------------------------------------------- /docs/images/funnel-labels-percentage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/funnel-labels-percentage.png -------------------------------------------------------------------------------- /docs/images/gantt-columnHeadersWidth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/gantt-columnHeadersWidth.png -------------------------------------------------------------------------------- /docs/images/quickstart-components-tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-components-tab.png -------------------------------------------------------------------------------- /docs/images/quickstart-create-app-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-create-app-02.png -------------------------------------------------------------------------------- /docs/images/quickstart-insert-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-insert-button.png -------------------------------------------------------------------------------- /docs/images/quickstart-move-controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-move-controls.png -------------------------------------------------------------------------------- /docs/images/quickstart-select-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-select-screen.png -------------------------------------------------------------------------------- /docs/images/contribute-change-chart-type.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/contribute-change-chart-type.png -------------------------------------------------------------------------------- /docs/images/contribute-copy-chart-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/contribute-copy-chart-source.png -------------------------------------------------------------------------------- /docs/images/data-integration-data-test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/data-integration-data-test.png -------------------------------------------------------------------------------- /docs/images/quickstart-chart-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-chart-properties.png -------------------------------------------------------------------------------- /docs/images/quickstart-import-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-import-components.png -------------------------------------------------------------------------------- /docs/images/quickstart-insert-ganttchart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-insert-ganttchart.png -------------------------------------------------------------------------------- /docs/images/quickstart-paste-chart-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-paste-chart-code.png -------------------------------------------------------------------------------- /docs/images/quickstart-size-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-size-properties.png -------------------------------------------------------------------------------- /docs/images/data-integration-data-property.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/data-integration-data-property.png -------------------------------------------------------------------------------- /docs/images/quickstart-enabled-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-enabled-components.png -------------------------------------------------------------------------------- /docs/images/quickstart-ganttchart-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/quickstart-ganttchart-properties.png -------------------------------------------------------------------------------- /docs/images/data-integration-onedrive-connector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OGcanviz/ChartComponents/HEAD/docs/images/data-integration-onedrive-connector.png -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | !["Canviz Logo"](https://ogcanviz.github.io/ChartComponents/images/Canviz-100x100.png) 2 | 3 | * Main Concepts 4 | * [Quick Start](/) 5 | * [Properties](properties.md) 6 | * [Axes](axes.md) 7 | * [Data Integration](data-integration.md) 8 | * [Limitations](limitations.md) 9 | 10 | * Chart Details 11 | * [Pie](pie.md) 12 | * [Solid Gauge](solidGauge.md) 13 | * [Funnel](funnel.md) 14 | * [Line](line.md) 15 | * [Bar](bar.md) 16 | * [Radar](radar.md) 17 | * [Scatter](scatter.md) 18 | * [Candle Stick](candle.md) 19 | * [Gantt](gantt.md) 20 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Canviz Power Apps Chart Components 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/limitations.md: -------------------------------------------------------------------------------- 1 | # Limitations 2 | 3 | This page describes the currently known limitations of the Canviz Power Apps Chart Components. 4 | 5 | ### Legends 6 | 7 | ![Legends](images/Legends.png) 8 | 9 | Chart legends do not render correctly in all web browsers. This is a browser limitation. The following table describes which web browsers and Power Apps clients support chart legends. 10 | 11 | | | Support | 12 | | :---------------------------- | :-----: | 13 | | **IE11** | **NO** | 14 | | **Edge** | **YES** | 15 | | **Firefox** | **YES** | 16 | | **Chrome** | **YES** | 17 | | **Chrome for Android** | **YES** | 18 | | **Safari on iOS** | **YES** | 19 | | **PowerApps app for Windows** | **NO** | 20 | | **PowerApps app for Android** | **YES** | 21 | | **PowerApps app for iOS** | **YES** | 22 | -------------------------------------------------------------------------------- /docs/solidGauge.md: -------------------------------------------------------------------------------- 1 | # Solid Gauge 2 | 3 | ### Sample 4 | 5 | ![Sample Solid Gauge Chart](images/solidGauge.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: false, 32 | ... 33 | } 34 | ``` 35 | 36 | **Options** 37 | 38 | ```javascript 39 | Table( 40 | { key: "solidGauge.minRadius", value: "0.3" } 41 | ) 42 | ``` 43 | 44 | **Data** 45 | 46 | ```javascript 47 | { 48 | legends: ["Test 1", "Test 1"], 49 | labels: ["Label 1","Label 2","Label 3","Label 4","Label 5"], 50 | table: Table( 51 | { key:"values", values: [90, 20, 40, 80, 50] } 52 | ) 53 | } 54 | ``` 55 | 56 | ### All Options 57 | 58 | | Key | Remark | 59 | | -------------------- | ------------------------------------------------------------ | 60 | | solidGauge.itemGap | Gap between 2 items. The default value is `5`. | 61 | | solidGauge.minRadius | Min radius of the solid gauge chart. The default value is `0.3`. | 62 | 63 | You can also change the style of the chart [axes](axes.md) by using the following options. 64 | 65 | | Key | Default Value | 66 | |:-|:-:| 67 | | x.labels.fontSize | `12` | 68 | | x.labels.fontFamily | | 69 | | x.labels.fontWeight | `bold` | 70 | | x.labels.fontStyle | `normal` | 71 | | x.labels.color | | 72 | | x.labels.additionalStyles | | 73 | | y.labels | `true` | 74 | | y.labels.fontSize | `12` | 75 | | y.labels.fontFamily | | 76 | | y.labels.fontWeight | `bold` | 77 | | y.labels.fontStyle | `normal` | 78 | | y.labels.color | `#333333` | 79 | | y.labels.additionalStyles | | 80 | -------------------------------------------------------------------------------- /docs/radar.md: -------------------------------------------------------------------------------- 1 | # Radar 2 | 3 | ### Sample 4 | 5 | ![Sample Radar Chart](images/radar.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "legends", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "radar.lineWidth", value: "1" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | legends: ["Test 1", "Test 2", "Test 3"], 50 | labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"], 51 | table: Table( 52 | { key:"1.y", values: [500, 500, 500, 500, 500, 500, 500, 500] }, 53 | { key:"2.y", values: [400, 400, 400, 400, 400, 400, 400, 400] }, 54 | { key:"3.y", values: [300, 300, 300, 300, 300, 300, 300, 310] } 55 | ) 56 | } 57 | ``` 58 | 59 | Records `1.y`, `2.y` and `3.y` are the data for the first, second and third legend items. 60 | 61 | ### Options 62 | 63 | | Key | Remark | 64 | | -------------------- | ------------------------------------------------------------ | 65 | | radar.labelsColor | Color of labels of radar angles. The default value is `#000000`. | 66 | | radar.lineWidth | Line width of the radar chart. The default value is `1`. | 67 | | radar.plotLineColor | Color of the plot lines. The default value is `#cccccc`. | 68 | | radar.plotLineWidth | Line width of the plot lines. The default value is `0.5`. | 69 | | radar.backgroundOdd | Background of the odd plot area. The default value is `#FFFFFF`. | 70 | | radar.backgroundEven | Background of the even plot area. The default value is `#FAF4FB`. | 71 | 72 | You can also change the style of [Y Axis](axes.md) of the chart by using the following options. 73 | 74 | | Options of Y Axis | Default Value | 75 | |:-|:-:| 76 | | y.min | `0` | 77 | | y.max | `0` | 78 | | y.step | `0` | 79 | | y.labels.color | `#000000` | 80 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Canviz Power Apps Chart Components 2 | 3 | We created these chart components to supplement and enhance the out of the box charting controls Power Apps comes with. We hope you enjoy using them in your own Power Apps solutions. 4 | 5 | We encourage and welcome community contributions! Please submit a Pull Request to share a new chart or make enhancements to the existing charts. 6 | 7 | ## Get Started 8 | 9 | It's super easy! Read the Quick Start. 10 | 11 | ![Canviz Power Apps Chart Components Animated GIF](/docs/images/Charts.gif) 12 | 13 | ## Charts 14 | 15 | The Canviz Power Apps Chart Components allow you to create several types of charts. 16 | 17 | - Pie 18 | - Solid Gauge 19 | - Funnel 20 | - Line 21 | - Bar 22 | - Radar 23 | - Scatter 24 | - Candle Stick 25 | - Gantt - **Yes, a Gantt chart too!** 26 | 27 | ## How It Works 28 | 29 | Essentially, you add the Canviz Power Apps Chart Components to your Power App then set the properties on the components to specify the data they display and how they look and feel. That's it. Done! 30 | 31 | The chart components evaluate the properties and render the appropriate SVG code to create the charts. Simple, lightweight, fast, and effective. 32 | 33 | ## Contributors ## 34 | | Author(s) | 35 | | ------------------------------------------------- | 36 | | Todd Baginski (Microsoft MVP, Canviz) @tbag | 37 | | Hubert Sui (Canviz) @hubertsui | 38 | | Cloris Sun (Canviz) @cloriss | 39 | | Chad Liu, (Canviz) @chadliuxc | 40 | | Tyler Lu, (Canviz) @TylerLu | 41 | | Catherine Xiao, (Canviz) | 42 | | Cathy Cheng, (Canviz) | 43 | | Matt Schuessler, (Canviz) | 44 | | Christina Wheeler, (Microsoft MVP, Canviz) | 45 | | Emmanuel Gallis (Microsoft MVP) @e-gallis | 46 | 47 | ### Follow Up 48 | 49 | For more awesome Power Apps tips, tricks, and samples, check out our blogs. 50 | 51 | [Todd Baginski's Blog](http://www.toddbaginski.com/blog) 52 | 53 | [Canviz Blog](http://www.canviz.com) 54 | 55 | ## Version history ## 56 | 57 | | Version | Date | Comments | 58 | | ------- | ------------------- | --------------- | 59 | | 1.0 | October 21, 2020 | Initial release | 60 | 61 | ## Disclaimer ## 62 | **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** 63 | -------------------------------------------------------------------------------- /docs/pie.md: -------------------------------------------------------------------------------- 1 | # Pie 2 | 3 | ### Sample 4 | 5 | ![Sample Pie Chart](images/pie.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "labels", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "pie.innerRadius", value: "0.5" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | legends: ["Test 1", "Test 1"], 50 | labels: ["Label 1","Label 2","Label 3","Label 4","Label 5"], 51 | table: Table( 52 | { key:"values", values:[90, 20, 40, 80, 50] } 53 | ) 54 | } 55 | ``` 56 | 57 | ### All Options 58 | 59 | | Key | Remark | 60 | | ------------------------------- | ------------------------------------------------------------ | 61 | | pie.radius | The outer radius of the pie chart. The value is the ratio of the max available radius. Can be `0 ~ 1`. For example, `0.5` means 50% of the chart area.
The default value is `1`. | 62 | | pie.startAngle | The start angle of the pie chart. | 63 | | pie.innerRadius | The inner radius of the pie chart. The value is the ratio of the radius. For example, `0.5` means 50% of the radius. | 64 | | pie.semiCircle | Show pie chart in semi circle. Can be **true** or **false**. | 65 | | pie.roseType | Display pie chart in rose mode. Available values:
`none`:
![Sample Pie Chart](images/pie-none.png)
`radius`:
![Rose Type Radius](images/pie-radius.png)
`area`:
![Rose Type Area](images/pie-area.png) | 66 | | pie.dataLabels | Show data labels or not. Can be **true** or **false**.
![Sample Pie Chart](images/pie-labels.png) | 67 | | pie.dataLabels.fontFamily | Font family of data labels. | 68 | | pie.dataLabels.fontSize | Font size of data labels. | 69 | | pie.dataLabels.fontWeight | Font weight of data labels. | 70 | | pie.dataLabels.fontStyle | Font style of data labels. | 71 | | pie.dataLabels.color | Color of data labels. | 72 | | pie.dataLabels.additionalStyles | Other CSS styles of data labels. | 73 | -------------------------------------------------------------------------------- /docs/bar.md: -------------------------------------------------------------------------------- 1 | # Bar 2 | 3 | ### Sample 4 | 5 | ![Sample Bar Chart](images/bar.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "legends", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "bar.stacked", value: "true" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | legends: ["Test 1", "Test 2", "Test 3"], 50 | labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"], 51 | table: Table( 52 | { key:"1.y", values: [120, 132, 101, 134, 90, 230, 210, 101] }, 53 | { key:"2.y", values: [220, 182, 191, 234, 290, 330, 310, 182] }, 54 | { key:"3.y", values: [150, 232, 201, 154, 190, 330, 410, 190] } 55 | ) 56 | } 57 | ``` 58 | 59 | Records `1.y`, `2.y` and `3.y` are data for the first, second and third legend items. 60 | 61 | ### All Options 62 | 63 | | Key | Remark | 64 | | --------------- | ------------------------------------------------------------ | 65 | | bar.stacked | Should multiple series of the same type be stacked together? Can be **true** or **false**. The default value is `false`. | 66 | | bar.itemGap | Gap between 2 items. The default value is `5`. | 67 | | bar.fillOpacity | Fill opacity of the bar. The default value is `1`. | 68 | | bar.borderWidth | Width of the bar border. The default value is `0`. | 69 | | bar.borderColor | Color of the bar border. The default value is the color of the data series. | 70 | 71 | You can also change the style of the chart [axes](axes.md) with the following options. 72 | 73 | | Options of Axes | Default Value | 74 | |:-|:-:| 75 | | x | `true` | 76 | | x.title | | 77 | | x.title.y | `-10` | 78 | | x.title.align | `right` | 79 | | x.title.fontSize | `14` | 80 | | x.title.fontFamily | | 81 | | x.title.fontWeight | `bold` | 82 | | x.title.fontStyle | `normal` | 83 | | x.title.color | `#333333` | 84 | | x.title.additionalStyles | | 85 | | x.height | `20` | 86 | | x.lineWidth | `1` | 87 | | x.lineColor | `#333333` | 88 | | x.tickLength | `5` | 89 | | x.tickWidth | `1` | 90 | | x.labels | `true` | 91 | | x.labels.format | `0` | 92 | | x.labels.rotation | `0` | 93 | | x.labels.fontSize | `12` | 94 | | x.labels.fontFamily | | 95 | | x.labels.fontWeight | `bold` | 96 | | x.labels.fontStyle | `normal` | 97 | | x.labels.color | `#333333` | 98 | | x.labels.additionalStyles | | 99 | | y | `true` | 100 | | y.title | | 101 | | y.title.align | `right` | 102 | | y.title.fontSize | `14` | 103 | | y.title.fontFamily | | 104 | | y.title.fontWeight | `bold` | 105 | | y.title.fontStyle | `normal` | 106 | | y.title.color | `#333333` | 107 | | y.title.additionalStyles | | 108 | | y.align | `left` | 109 | | y.step | `0` | 110 | | y.min | `0` | 111 | | y.max | `0` | 112 | | y.width | `50` | 113 | | y.lineWidth | `1` | 114 | | y.lineColor | `#333333` | 115 | | y.tickLength | `5` | 116 | | y.tickWidth | `1` | 117 | | y.padTop | `20` | 118 | | y.labels | `true` | 119 | | y.labels.format | `0` | 120 | | y.labels.fontSize | `12` | 121 | | y.labels.fontFamily | | 122 | | y.labels.fontWeight | `bold` | 123 | | y.labels.fontStyle | `normal` | 124 | | y.labels.color | `#333333` | 125 | | y.labels.additionalStyles | | 126 | -------------------------------------------------------------------------------- /docs/line.md: -------------------------------------------------------------------------------- 1 | # Line 2 | 3 | ### Sample 4 | 5 | ![Sample Line Chart](images/line.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "legends", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "line.stacked", value: "true" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | legends: ["Test 1", "Test 2", "Test 3"], 50 | labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"], 51 | table: Table( 52 | { key:"1.y", values: [120, 132, 101, 134, 90, 230, 210, 101] }, 53 | { key:"2.y", values: [220, 182, 191, 234, 290, 330, 310, 182] }, 54 | { key:"3.y", values: [150, 232, 201, 154, 190, 330, 410, 190] } 55 | ) 56 | } 57 | ``` 58 | 59 | Records `1.y`, `2.y` and `3.y` are the data for the first, second and third legend items. 60 | 61 | ### All Options 62 | 63 | | Key | Remark | 64 | | ---------------- | ------------------------------------------------------------ | 65 | | line.stacked | Should multiple series of the same type be stacked together? Can be **true** or **false**. The default value is `false`. | 66 | | line.lineWidth | Line width of the line chart. The default value is `2`. | 67 | | line.fillOpacity | Fill opacity of the line area. The default value is `0`. | 68 | | line.markerSize | Size of the line marker. The default value is `16`. | 69 | | line.marker | Type of the line marker. Can be following values: `circle`. The default value is `circle`. | 70 | 71 | You can also change the style of the chart [axes](axes.md) by using the following options. 72 | 73 | | Options of Axes | Default Value | 74 | |:-|:-:| 75 | | x | `true` | 76 | | x.title | | 77 | | x.title.y | `-10` | 78 | | x.title.align | `right` | 79 | | x.title.fontSize | `14` | 80 | | x.title.fontFamily | | 81 | | x.title.fontWeight | `bold` | 82 | | x.title.fontStyle | `normal` | 83 | | x.title.color | `#333333` | 84 | | x.title.additionalStyles | | 85 | | x.height | `20` | 86 | | x.lineWidth | `1` | 87 | | x.lineColor | `#333333` | 88 | | x.tickLength | `5` | 89 | | x.tickWidth | `1` | 90 | | x.labels | `true` | 91 | | x.labels.format | `0` | 92 | | x.labels.rotation | `0` | 93 | | x.labels.fontSize | `12` | 94 | | x.labels.fontFamily | | 95 | | x.labels.fontWeight | `bold` | 96 | | x.labels.fontStyle | `normal` | 97 | | x.labels.color | `#333333` | 98 | | x.labels.additionalStyles | | 99 | | y | `true` | 100 | | y.title | | 101 | | y.title.align | `right` | 102 | | y.title.fontSize | `14` | 103 | | y.title.fontFamily | | 104 | | y.title.fontWeight | `bold` | 105 | | y.title.fontStyle | `normal` | 106 | | y.title.color | `#333333` | 107 | | y.title.additionalStyles | | 108 | | y.align | `left` | 109 | | y.step | `0` | 110 | | y.min | `0` | 111 | | y.max | `0` | 112 | | y.width | `50` | 113 | | y.lineWidth | `1` | 114 | | y.lineColor | `#333333` | 115 | | y.tickLength | `5` | 116 | | y.tickWidth | `1` | 117 | | y.padTop | `20` | 118 | | y.labels | `true` | 119 | | y.labels.format | `0` | 120 | | y.labels.fontSize | `12` | 121 | | y.labels.fontFamily | | 122 | | y.labels.fontWeight | `bold` | 123 | | y.labels.fontStyle | `normal` | 124 | | y.labels.color | `#333333` | 125 | | y.labels.additionalStyles | | 126 | -------------------------------------------------------------------------------- /docs/axes.md: -------------------------------------------------------------------------------- 1 | # Axes 2 | 3 | You can modify the colors and styles of the axes on the charts. 4 | 5 | Both the X Axis and the Y Axis have similar options you can set on them. 6 | 7 | ### Basic Options 8 | 9 | | Key for X Axis | Key for Y Axis | Remark | 10 | | -------------- | -------------- | --------------------------------------- | 11 | | x | y | true or false to show or hide the axis. | 12 | | x.height | | Height of the x axis. | 13 | | | y.width | Width of the y axis. | 14 | | x.lineWidth | y.lineWidth | Line width of the axis. | 15 | | x.lineColor | y.lineColor | Line color of the axis. | 16 | | x.tickLength | y.tickLength | Tick length of the axis. | 17 | | x.tickWidth | y.tickWidth | Tick width of the axis. | 18 | | y.padRigth | | Padding right of the x axis. | 19 | | | y.padTop | Padding top of the y axis. | 20 | | | y.align | Alignment of the y axis. | 21 | | x.step | y.step | Step of the axis. | 22 | | x.min | y.min | Min value of the axis. | 23 | | x.max | y.max | Max value of the axis. | 24 | 25 | ### Title Options 26 | 27 | | Key for X Axis | For for Y Axis | Remark | 28 | | ------------------------ | ------------------------ | ------------------------------------ | 29 | | x.title | y.title | Title text of the axis. | 30 | | x.title.y | | Y offset of the title of the x axis. | 31 | | x.title.align | y.title.align | Alignment of the title. | 32 | | x.title.fontSize | y.title.fontSize | Font size of the title. | 33 | | x.title.fontFamily | y.title.fontFamily | Font family of the title. | 34 | | x.title.fontWeight | y.title.fontWeight | Font weight of the title. | 35 | | x.title.fontStyle | y.title.fontStyle | Font style of the title. | 36 | | x.title.color | y.title.color | Color of the title. | 37 | | x.title.additionalStyles | y.title.additionalStyles | Additional styles of the title. | 38 | 39 | ### Labels Options 40 | 41 | | Key for X Axis | For for Y Axis | Remark | 42 | | ------------------------- | ------------------------- | --------------------------------------------------------- | 43 | | x.labels | y.labels | true or false to show or hide the labels. | 44 | | x.labels.format | y.labels.format | Format of the labels. | 45 | | x.labels.rotation | | Rotation of the labels. Accepts values between -90 and 90. | 46 | | x.labels.fontSize | y.labels.fontSize | Font size of the labels. | 47 | | x.labels.fontFamily | y.labels.fontFamily | Font family of the labels. | 48 | | x.labels.fontWeight | y.labels.fontWeight | Font weight of the labels. | 49 | | x.labels.fontStyle | y.labels.fontStyle | Font style of the labels. | 50 | | x.labels.color | y.labels.color | Font color of the labels. | 51 | | x.labels.additionalStyles | y.labels.additionalStyles | Additional styles of the labels. | 52 | -------------------------------------------------------------------------------- /docs/scatter.md: -------------------------------------------------------------------------------- 1 | # Scatter 2 | 3 | ### Sample 4 | 5 | ![Sample Scatter Chart](images/scatter.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "legends", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "scatter.fillOpacity", value: "1" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | legends: ["Test 1", "Test 2"], 50 | table: Table( 51 | { key:"1.x", values: [28604, 31163, 1516, 13670, 28599, 29476, 31476, 28666, 1777, 29550, 2076, 12087, 24021, 43296, 10088, 19349, 10670, 26424, 37062] }, 52 | { key:"1.y", values: [77, 77.4, 68, 74.7, 75, 77.1, 75.4, 78.1, 57.7, 79.1, 67.9, 72, 75.4, 76.8, 70.8, 69.6, 67.3, 75.7, 75.4] }, 53 | { key:"1.z", values: [17096869, 27662440, 1154605773, 10582082, 4986705, 56943299, 78958237, 254830, 870601776, 122249285, 20194354, 42972254, 3397534, 4240375, 38195258, 147568552, 53994605, 57110117, 252847810] }, 54 | { key:"2.x", values: [44056, 43294, 13334, 21291, 38923, 37599, 44053, 42182, 5903, 36162, 1390, 34644, 34186, 64304, 24787, 23038, 19360, 38225, 53354] }, 55 | { key:"2.y", values: [81.8, 81.7, 76.9, 78.5, 80.8, 81.9, 81.1, 82.8, 66.8, 83.5, 71.4, 80.7, 80.6, 81.6, 77.3, 73.13, 76.5, 81.4, 79.1] }, 56 | { key:"2.z", values: [23968973, 35939927, 1376048943, 11389562, 5503457, 64395345, 80688545, 329425, 1311050527, 126573481, 25155317, 50293439, 4528526, 5210967, 38611794, 143456918, 78665830, 64715810, 321773631] } 57 | ) 58 | } 59 | ``` 60 | 61 | * Records whose key starts with `1.` are data for the first legend item, and records whose key starts with `2.` are data for the second legend item. 62 | 63 | * Records whose key ends with `.x` and `.y` determine the positions of points, and records whose key ends with `.z` determine the sizes of points. 64 | 65 | ### All Options 66 | 67 | | Key | Remark | 68 | | ------------------- | ------------------------------------------------------------ | 69 | | scatter.maxSize | Max size of the scatter marker. The default value is `20`. | 70 | | scatter.minSize | Min size of the scatter marker. The default value is `10`. | 71 | | scatter.fillOpacity | Fill opacity of the scatter marker. The default value is `1`. | 72 | | scatter.borderWidth | Width of the border of the scatter marker. The default value is `0`. | 73 | | scatter.borderColor | Color of the border of the scatter marker. The default value is the color of the data series. | 74 | 75 | You can also change the style of the chart [axes](axes.md) by using the following options. 76 | 77 | | Options of Axes | Default Value | 78 | |:-|:-:| 79 | | x | `true` | 80 | | x.title | | 81 | | x.title.y | `-10` | 82 | | x.title.align | `right` | 83 | | x.title.fontSize | `14` | 84 | | x.title.fontFamily | | 85 | | x.title.fontWeight | `bold` | 86 | | x.title.fontStyle | `normal` | 87 | | x.title.color | `#333333` | 88 | | x.title.additionalStyles | | 89 | | x.step | `0` | 90 | | x.min | `0` | 91 | | x.max | `0` | 92 | | x.height | `20` | 93 | | x.lineWidth | `1` | 94 | | x.lineColor | `#333333` | 95 | | x.tickLength | `5` | 96 | | x.tickWidth | `1` | 97 | | x.labels | `true` | 98 | | x.labels.format | `0` | 99 | | x.labels.rotation | `0` | 100 | | x.labels.fontSize | `12` | 101 | | x.labels.fontFamily | | 102 | | x.labels.fontWeight | `bold` | 103 | | x.labels.fontStyle | `normal` | 104 | | x.labels.color | `#333333` | 105 | | x.labels.additionalStyles | | 106 | | y | `true` | 107 | | y.title | | 108 | | y.title.align | `right` | 109 | | y.title.fontSize | `14` | 110 | | y.title.fontFamily | | 111 | | y.title.fontWeight | `bold` | 112 | | y.title.fontStyle | `normal` | 113 | | y.title.color | `#333333` | 114 | | y.title.additionalStyles | | 115 | | y.align | `left` | 116 | | y.step | `0` | 117 | | y.min | `0` | 118 | | y.max | `0` | 119 | | y.width | `50` | 120 | | y.lineWidth | `1` | 121 | | y.lineColor | `#333333` | 122 | | y.tickLength | `5` | 123 | | y.tickWidth | `1` | 124 | | y.padTop | `20` | 125 | | y.labels | `true` | 126 | | y.labels.format | `0` | 127 | | y.labels.fontSize | `12` | 128 | | y.labels.fontFamily | | 129 | | y.labels.fontWeight | `bold` | 130 | | y.labels.fontStyle | `normal` | 131 | | y.labels.color | `#333333` | 132 | | y.labels.additionalStyles | | 133 | -------------------------------------------------------------------------------- /docs/candle.md: -------------------------------------------------------------------------------- 1 | # Candle Stick 2 | 3 | ### Sample 4 | 5 | ![Sample Candle Stick Chart](images/candle.png) 6 | 7 | **Type Property** 8 | To use the Candle Stick chart use **Candle** as the Type property in the Chart component. 9 | 10 | The following property values create the sample chart pictured above. 11 | 12 | **Title** 13 | 14 | ```javascript 15 | { 16 | text: "Test Candle Stick", 17 | ... 18 | } 19 | ``` 20 | 21 | **Subtitle** 22 | 23 | ```javascript 24 | { 25 | text: "", 26 | ... 27 | } 28 | ``` 29 | 30 | **Legend** 31 | 32 | ```javascript 33 | { 34 | enabled: false 35 | ... 36 | } 37 | ``` 38 | 39 | **Options** 40 | 41 | ```javascript 42 | Table( 43 | { key: "", value: "" } 44 | ) 45 | ``` 46 | 47 | **Data** 48 | 49 | ```javascript 50 | { 51 | labels: ["2013/1/24", "2013/1/25", "2013/1/28", "2013/1/29", "2013/1/30", "2013/1/31", "2013/2/1", "2013/2/4", "2013/2/5", "2013/2/6", "2013/2/7", "2013/2/8", "2013/2/18", "2013/2/19", "2013/2/20", "2013/2/21", "2013/2/22", "2013/2/25", "2013/2/26", "2013/2/27", "2013/2/28"], 52 | table: Table( 53 | { key:"open", values: [2320.26, 2300, 2295.35, 2347.22, 2360.75, 2383.43, 2377.41, 2425.92, 2411, 2432.68, 2430.69, 2416.62, 2441.91, 2420.26, 2383.49, 2378.82, 2322.94, 2320.62, 2313.74, 2297.77, 2322.32] }, 54 | { key:"close", values: [2320.26, 2291.3, 2346.5, 2358.98, 2382.48, 2385.42, 2419.02, 2428.15, 2433.13, 2434.48, 2418.53, 2432.4, 2421.56, 2382.91, 2397.18, 2325.95, 2314.16, 2325.82, 2293.34, 2313.22, 2365.59] }, 55 | { key:"lowest", values: [2287.3, 2288.26, 2295.35, 2337.35, 2347.89, 2371.23, 2369.57, 2417.58, 2403.3, 2427.7, 2394.22, 2414.4, 2415.43, 2373.53, 2370.61, 2309.17, 2308.76, 2315.01, 2289.89, 2292.03, 2308.92] }, 56 | { key:"highest", values: [2362.94, 2308.38, 2346.92, 2363.8, 2383.76, 2391.82, 2421.15, 2440.38, 2437.42, 2441.73, 2433.89, 2443.03, 2444.8, 2427.07, 2397.94, 2378.82, 2330.88, 2338.78, 2340.71, 2324.63, 2366.16] } 57 | ) 58 | } 59 | ``` 60 | 61 | Data categories include `open`, `close`, `lowest` and `highest`. Refer to this [Candlestick chart](https://en.wikipedia.org/wiki/Candlestick_chart) article for more details about these data categories and how they correlate to how the chart looks. 62 | 63 | ### Options 64 | 65 | | Key | Remark | 66 | | ---------------------- | ------------------------------------------------------------ | 67 | | candle.downColor | Bar color if close price is less than open price. The default value is `#00da3c`. | 68 | | candle.upColor | Bar color if close price is larger than open price. The default value is `#ec0000`. | 69 | | candle.downBorderColor | Border color if close price is less than open price. The default value is `#008f28`. | 70 | | candle.upBorderColor | Border color if close price is larger than open price. The default value is `#8a0000`. | 71 | | candle.itemGap | Gap between 2 items. The default value is `5`. | 72 | | candle.fillOpacity | Fill opacity of the bar. The default value is `1`. | 73 | | candle.borderWidth | Width of the border. The default value is `1`. | 74 | 75 | You can also change the style of the chart [axes](axes.md) with the following options. 76 | 77 | | Options of Axes | Default Value | 78 | |:-|:-:| 79 | | x | `true` | 80 | | x.title | | 81 | | x.title.y | `-10` | 82 | | x.title.align | `right` | 83 | | x.title.fontSize | `14` | 84 | | x.title.fontFamily | | 85 | | x.title.fontWeight | `bold` | 86 | | x.title.fontStyle | `normal` | 87 | | x.title.color | `#333333` | 88 | | x.title.additionalStyles | | 89 | | x.height | `20` | 90 | | x.lineWidth | `1` | 91 | | x.lineColor | `#333333` | 92 | | x.tickLength | `5` | 93 | | x.tickWidth | `1` | 94 | | x.labels | `true` | 95 | | x.labels.format | `0` | 96 | | x.labels.rotation | `-40` | 97 | | x.labels.fontSize | `12` | 98 | | x.labels.fontFamily | | 99 | | x.labels.fontWeight | `bold` | 100 | | x.labels.fontStyle | `normal` | 101 | | x.labels.color | `#333333` | 102 | | x.labels.additionalStyles | | 103 | | y | `true` | 104 | | y.title | | 105 | | y.title.align | `right` | 106 | | y.title.fontSize | `14` | 107 | | y.title.fontFamily | | 108 | | y.title.fontWeight | `bold` | 109 | | y.title.fontStyle | `normal` | 110 | | y.title.color | `#333333` | 111 | | y.title.additionalStyles | | 112 | | y.align | `left` | 113 | | y.step | `0` | 114 | | y.min | `0` | 115 | | y.max | `0` | 116 | | y.width | `50` | 117 | | y.lineWidth | `1` | 118 | | y.lineColor | `#333333` | 119 | | y.tickLength | `5` | 120 | | y.tickWidth | `1` | 121 | | y.padTop | `20` | 122 | | y.labels | `true` | 123 | | y.labels.format | `0` | 124 | | y.labels.fontSize | `12` | 125 | | y.labels.fontFamily | | 126 | | y.labels.fontWeight | `bold` | 127 | | y.labels.fontStyle | `normal` | 128 | | y.labels.color | `#333333` | 129 | | y.labels.additionalStyles | | 130 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | In this guide, you will learn how to quickly use the Canviz Power Apps Chart Components in a Power App. You will create a Canvas Power App, import the Canviz Power Apps Chart Components, and add a pie chart to the Canvas Power App. You will also learn how to change the Pie chart to a different chart type. 4 | 5 | > **Note:** The estimated time to complete these steps is 5-15 minutes. 6 | 7 | When you are done your charts will look like this. 8 | 9 | ![](images/quickstart-pie.png) 10 | 11 | ![](images/quickstart-change-type.png) 12 | 13 | ### Create a Canvas Power App 14 | 15 | Navigate to https://web.powerapps.com, then click **Canvas app from blank**: 16 | 17 | ![Create PowerApps](images/quickstart-create-app.png) 18 | 19 | Enter an **App name**, select a **Format**, and click **Create**. 20 | 21 | ![](images/quickstart-create-app-02.png) 22 | 23 | ### Enable Components Feature 24 | 25 | The Components feature should be enabled by default. Double check it is enabled. 26 | 27 | 1. Click **File**. 28 | 2. Click **Settings** > **Advanced settings**. 29 | 3. Ensure the **Components** feature is turned on. 30 | 31 | ![](images/quickstart-enabled-components.png) 32 | 33 | Click the back arrow at the top left to navigate back to Power Apps Studio. 34 | 35 | ### Import Chart Components 36 | 37 | Download the **[Chart Components V2.msapp](https://github.com/OGcanviz/ChartComponents/blob/master/Chart%20Components%20V2.msapp)** file. The **Chart Components V2.msapp** file contains the Canviz Power Apps Chart Components. Remember where you save the **Chart Components V2.msapp** file. 38 | 39 | Click **Insert**, then click **Components** > **Import component**. 40 | 41 | ![](images/quickstart-import-components.png) 42 | 43 | Click **Upload file**, and select the **Chart Components V2.msapp** file you downloaded, then click **Open**. 44 | 45 | Wait for a little bit and the Canviz Power Apps Chart Components will appear in the **Components** tab. 46 | 47 | ![](images/quickstart-components-tab.png) 48 | 49 | ### Add a Pie Chart 50 | 51 | Click the **Screens** tab, then select **Screen1**. 52 | 53 | ![](images/quickstart-select-screen.png) 54 | 55 | In the tree view, click **Insert**. 56 | 57 | Expand the **Custom** section, then click **Chart**. 58 | 59 | ![](images/quickstart-insert-chart.png) 60 | 61 | ### Configure Chart Appearance 62 | 63 | Select the newly added chart component, then configure the chart properties to adjust how it looks. 64 | 65 | To make a Pie chart, enter Pie in the Type property. Pie is the default Type property. 66 | * **Type**: Pie 67 | 68 | ![](images/quickstart-chart-properties.png) 69 | 70 | To change the size of the chart, click the Advanced tab and change the Height and Width properties. 71 | * **Size**: 360 × 360 72 | 73 | ![](images/quickstart-size-properties.png) 74 | 75 | * **Title**: To change the Title, edit the Title property. The Title property is a record property. Edit the value in the formula bar. Update the value for the text field in the Title property to "Favorite Types of Movies". 76 | 77 | ![](images/quickstart-chart-title.png) 78 | 79 | * **Subtitle**: The Subtitle is also a record property. Set its text field to empty to hide it. 80 | 81 | ```javascript 82 | { 83 | text: "", 84 | ... 85 | } 86 | ``` 87 | * **Options**: Options allow you to configure the look and feel of the chart to a large degree. For example, to change the size of the inner radius for the pie chart, simply set the pie.InnerRadius property. Update the Options property with the following code. For more details about the various options properties, please see the dcoumentation page for each chart. 88 | 89 | ```javascript 90 | Table( 91 | { key:"pie.innerRadius", value:"0.7" } 92 | ) 93 | ``` 94 | 95 | ### Define Chart Data 96 | 97 | * **Data**: Just like the name says, this property contains the data the chart renders. Update the Data property with the following code. Keep in mind, this property can be set at runtime so you can make these charts dynamic. 98 | 99 | ```javascript 100 | { 101 | labels: ["Comedy","Action","Romance", "Drama"], 102 | table: Table( 103 | { key:"values", values: [4, 5, 6, 1] } 104 | ) 105 | } 106 | ``` 107 | 108 | > **Note:** To learn how to integrate dynamic data sources with your charts see [this article](data-integration.md). 109 | 110 | To create a Gantt chart follow the [Gantt chart instructions](gantt.md). 111 | 112 | Now take a look at your chart! 113 | 114 | ![](images/quickstart-pie.png) 115 | 116 | ## Other Chart Types 117 | 118 | To implement other chart types simply change the **Type** property for the Chart component. 119 | 120 | The following Types are currently available. 121 | 122 | - Pie 123 | - Solid Gauge (SolidGauge) 124 | - Funnel 125 | - Line 126 | - Bar 127 | - Radar 128 | - Scatter 129 | - Candle Stick (Candle) 130 | 131 | For example, to change the chart to a Solid Gauge chart, select the Chart component, then change the **Type** property to **Solid Gauge**. 132 | 133 | ![](images/quickstart-change-type.png) 134 | 135 | > **Note:** The Gantt chart uses a seperate component. To create a Gantt chart follow the [Gantt chart instructions](gantt.md). 136 | -------------------------------------------------------------------------------- /docs/funnel.md: -------------------------------------------------------------------------------- 1 | # Funnel 2 | 3 | ### Sample 4 | 5 | ![Sample Funnel Chart](images/funnel.png) 6 | 7 | The following property values create the sample chart pictured above. 8 | 9 | **Title** 10 | 11 | ```javascript 12 | { 13 | text: "Test Title 1", 14 | ... 15 | } 16 | ``` 17 | 18 | **Subtitle** 19 | 20 | ```javascript 21 | { 22 | text: "", 23 | ... 24 | } 25 | ``` 26 | 27 | **Legend** 28 | 29 | ```javascript 30 | { 31 | enabled: true, 32 | source: "labels", 33 | ... 34 | } 35 | ``` 36 | 37 | **Options** 38 | 39 | ```javascript 40 | Table( 41 | { key: "funnel.mode", value: "ladder" } 42 | ) 43 | ``` 44 | 45 | **Data** 46 | 47 | ```javascript 48 | { 49 | labels: ["Label 1","Label 2","Label 3","Label 4","Label 5","Label 6","Label 7"], 50 | table: Table( 51 | { key:"values", values: [520, 200, 380, 400,510, 650, 710] } 52 | ) 53 | } 54 | ``` 55 | 56 | ### All Options 57 | 58 | | Key | Remark | 59 | | ----------------------- | ------------------------------------------------------------ | 60 | | funnel.mode | The funnel chart has 3 modes: **ladder**, **rectangle** and **pyramid**. The default value is `ladder`.
`ladder`
![Funnel Chart in Ladder Mode](images/funnel-ladder.png)
`rectangle`
![Funnel Chart in Rectangle Mode](images/funnel-rectangle.png)
`pyramid`
![Funnel Chart in Pyramid Mode](images/funnel-pyramid.png)
In pyramid mode, the area (**not height**) of parts are calculated from input values. | 61 | | funnel.sort | You can sort input values. The direction can be **none**, **ascending** and **descending**. The default value is `none`.
For example, sorting in descending direction looks like this:
![Funnel Chart in Descending Mode](images/funnel-descending.png) | 62 | | funnel.orientation | You can display the chart in different orientations, **vertical** and **horizontal**. The default value is `vertical`.
Horizontal mode looks like this:
![Funnel Chart in Horizontal Mode](images/funnel-horizontal.png) | 63 | | funnel.align | You can also align all bars to one side. In horizontal mode, you can use **top**, **middle** and **bottom**. In vertical mode, you can use **left**, **center** and **right**. The default value is `center`.
For example, align to the left looks like this:
![Funnel Chart in Left Mode](images/funnel-left.png) | 64 | | funnel.maxBarLength | You can change the max bar length of the chart. Can be **0~1**. The default value is `1`. | 65 | | funnel.itemGap | You can change gap between two bars. The default value is `10`. | 66 | | funnel.connectorColor | You can change the color of the gap. The default value is data color. | 67 | | funnel.connectorOpacity | You can also change the opacity of the gap fill. The default value is `0.3`. | 68 | 69 | #### Label Options 70 | 71 | A funnel chart can display up to 3 labels. When all 3 labels are enabled, it looks like this: 72 | 73 | ![Funnel Labels](images/funnel-labels.png) 74 | 75 | From left to right they are: **labels**, **value labels**, and **percentage labels**. 76 | 77 | | Key | Remark | 78 | | ------------------------------------------------------------ | ------------------------------------------------------------ | 79 | | funnel.labels
funnel.labels.value
funnel.labels.percentage | Should the chart display labels or not? Can be **true** or **false**. The default value is `false`. | 80 | | funnel.labels.value.dx
funnel.labels.percentage.dx | X Offset of labels. | 81 | | funnel.labels.value.dy
funnel.labels.percentage.dy | X Offset of labels. | 82 | | funnel.labels.percentage.mode | How to calculate the percentage value.
Available values:
`sum`: value / sum of all values
`max`: value / max value
`last`: value / value of last data. | 83 | | funnel.labels.align | Alignment of the labels. Can be **left**, **center** and **right**. The default value is `center`. | 84 | | funnel.labels.verticalAlign | Vertical Alignment of the labels. Can be **top**, **middle** and **bottom**. The default value is `middle`. | 85 | | funnel.labels.fontSize
funnel.labels.value.fontSize
funnel.labels.percentage.fontSize | Font size of labels. | 86 | | funnel.labels.fontFamily
funnel.labels.value.fontFamily
funnel.labels.percentage.fontFamily | Font family of labels. | 87 | | funnel.labels.fontWeight
funnel.labels.value.fontWeight
funnel.labels.percentage.fontWeight | Font weight of labels, can be CSS font weight values. | 88 | | funnel.labels.fontStyle
funnel.labels.value.fontStyle
funnel.labels.percentage.fontStyle | Font style of labels, can be CSS font style values. | 89 | | funnel.labels.color
funnel.labels.value.color
funnel.labels.percentage.color | Color of labels. The default value is `#ffffff`. | 90 | | funnel.labels.additionalStyles
funnel.labels.value.additionalStyles
funnel.labels.percentage.additionalStyles | You can add other CSS style rules here. | 91 | 92 | 93 | -------------------------------------------------------------------------------- /docs/data-integration.md: -------------------------------------------------------------------------------- 1 | # Data Integration 2 | 3 | In this guide, we will show you how to connect charts to dynamic data. 4 | 5 | ### Prerequisites 6 | 7 | First follow the steps in the [Quick Start guide](/). This guide will show you how to display data from an Excel Workbook stored in One Drive for Business in the Solid Gauge chart you created in the [Quick Start guide](/). 8 | 9 | ### Upload Excel File To OneDrive for Business 10 | 11 | 1. Download the [ChartData.xlsx](/../master/ChartData.xlsx) Excel Workbook and save it to your computer. 12 | 1. Log in to OneDrive for Business and upload the **ChartData.xlsx** file. 13 | 1. Remember where you upload the file. 14 | 15 | ### Add One Drive for Business Connection 16 | 17 | Now you will connect the PowerApp to the Excel file you uploaded to OneDrive. The Excel files has a Data Table in it named Movies. 18 | 19 | 1. In the Power Apps editor, open the Power App you created in the Quick Start guide. 20 | 1. Expand the left menu. 21 | 1. Select **Data**. 22 | 1. In the searchbox, enter **OneDrive for Business**. 23 | 1. Select the **OneDrive for Business** connector in the list. 24 | ![](images/data-integration-onedrive-connector.png) 25 | 1. Click **Add a connection**. 26 | 1. Click **Connect**. 27 | 1. Log in if prompted. 28 | 1. Browse to the OneDrive location where you saved the ChartData.xlsx file. 29 | 1. Select the **ChartData.xlsx** file. 30 | 1. Check the **Movies** checkbox. 31 | 1. Click **Connect**. 32 | 33 | ### Return Data From Excel 34 | 35 | 1. Add a button to the Power App. 36 | 1. Change the button's **Text** property to: 37 | ```Get Data From Excel``` 38 | 1. Add the following code to the Button's **OnSelect** event to return the data from Excel and store it in a local collection named **colMovies**. 39 | ```ClearCollect(colMovies, Movies)``` 40 | 1. Hold down the **ALT key on the keyboard** and click the **Get Data From Excel** button. 41 | 1. Click **File**. 42 | 1. Click **Collections**. 43 | 1. Click **colMovies**. 44 | You should now see the following data in the collection. If you do not see any data in the gallery at this point then recheck your work. Do not continue until you have data in the colMovies collection. 45 | ![](images/data-integration-data-test.png) 46 | 47 | ### Configure Chart To Use Dynamic Data 48 | 49 | 1. Select the chart component you configured to display as a Solid Gauge. 50 | 1. Select the **Data** property in the dropdown list. 51 | 1. Replace the Data property with the following code. This code tells the chart to use a global variable named **gblData** for the data in the chart. Anytime the value of **gblData** changes the chart will automatically update. Nice! 52 | ``` 53 | gblData 54 | ``` 55 | ![](images/data-integration-data-property.png) 56 | 57 | ### Process Data And Bind To Chart 58 | 59 | 1. Add another Button to the Power App. 60 | 1. Change the button's **Text** property to: 61 | ```Process And Bind Data``` 62 | 1. Add the following code the the **OnSelect** event to create the **gblData** global variable with data from the colMovies collection. 63 | ``` 64 | Set( 65 | gblData, 66 | { 67 | //Use the Genre column to specify the labels 68 | labels: ForAll( 69 | colMovies.Genre, 70 | Genre 71 | ), 72 | //Use the Votes column to specify the data 73 | table: Table( 74 | { 75 | key: "values", 76 | values: ForAll( 77 | colMovies.Votes, 78 | Votes 79 | ) 80 | } 81 | ) 82 | } 83 | ); 84 | ``` 85 | 86 | ### Test 87 | 88 | 1. Hold down the **ALT key on the keyboard** and click the **Process And Bind Data** button. 89 | 1. You should now see the following data in the chart. 90 | ![](images/data-integration-complete.png) 91 | 92 | > **Note:** This example illustrates a two stage process to acquire the data, then bind it to the chart when a button is clicked. The example was created like this to make it clear how to do each part. **This two stage process is not required.** You can also return and process the data without any user interaction by simply moving the code from both of the button **OnSelect** events to the Power App's **OnStart** event or to an **OnVisible** event for any screen, like this: 93 | 94 | ``` 95 | ClearCollect(colMovies, Movies); 96 | Set( 97 | gblData, 98 | { 99 | //Use the Genre column to specify the labels 100 | labels: ForAll( 101 | colMovies.Genre, 102 | Genre 103 | ), 104 | //Use the Votes column to specify the data 105 | table: Table( 106 | { 107 | key: "values", 108 | values: ForAll( 109 | colMovies.Votes, 110 | Votes 111 | ) 112 | } 113 | ) 114 | } 115 | ); 116 | ``` 117 | ### Another Approach 118 | Instead of using the ForAll loop to populate the global variable bound to the data property, you can follow the pattern Jese Navaranjan demonstrates in [this video](https://www.youtube.com/watch?v=wyG-4XoLpvE). It's quite elegant! Thanks for sharing, Jese! 119 | 120 | ### Celebrate 121 | 122 | Congratulations, now you know a pattern to integrate the charts with any data source. 123 | 124 | Now take a moment to spread the word about these lovely components! :) 125 | -------------------------------------------------------------------------------- /docs/gantt.md: -------------------------------------------------------------------------------- 1 | # Gantt Chart 2 | 3 | ### Prerequisites 4 | 5 | First follow the steps in the [quick start guide](/) to Create a Canvas Power App, Enable the Components Feature, and Import the Canviz Power Apps Chart Components. 6 | 7 | After you have the prerequisites completed, then continue and add the Gantt chart component to a Canvas Power App. 8 | 9 | ### Add a Gantt Chart 10 | 11 | In the Power Apps editor open the **Tree view**. 12 | 13 | Click the **Screens** tab, then select **Screen1**. 14 | 15 | ![](images/quickstart-select-screen.png) 16 | 17 | In the left menu, click **Insert**. 18 | 19 | Expand the **Custom** section, then click **GanttChart**. 20 | 21 | ![](images/quickstart-insert-ganttchart.png) 22 | 23 | Select the newly added chart component, then configure the chart properties. 24 | 25 | ![](images/quickstart-ganttchart-properties.png) 26 | 27 | - **Size**: To change the size of the chart, click the Advanced tab and change the Height and Width properties. In this example we use 1150 × 640. 28 | 29 | - **Title**: To change the Title, edit the Title property. The Title property is a record property. Edit the value in the formula bar. Update the value for the text field in the Title property to "Important Project". 30 | 31 | ![](images/quickstart-chart-title.png) 32 | 33 | - **Subtitle**: The Subtitle is also a record property. Set its text field to empty to hide it. 34 | 35 | ```javascript 36 | { 37 | text: "", 38 | ... 39 | } 40 | ``` 41 | 42 | - **Options**: Options allow you to configure the look and feel of the chart to a large degree. For example, to set the start date for the chart simply set the gantt.startDate property. Update the Options property with the following code. For more details about the various options properties, please see the documentation below. 43 | 44 | ```javascript 45 | Table( 46 | {key:"gantt.type", value:"month"}, 47 | {key:"gantt.step", value:"3"}, 48 | {key:"gantt.startDate", value:"01/18/2018"}, 49 | {key:"gantt.endDate", value:"06/25/2018"}, 50 | 51 | {key:"gantt.lineColor", value:"#5a5252"}, 52 | {key:"gantt.fontColor", value:"#5a5252"}, 53 | 54 | {key:"gantt.rowHeaderFontSize", value:"15"}, 55 | {key:"gantt.columnHeaderFontSize", value:"12"}, 56 | 57 | {key:"gantt.barHeight", value:"20"}, 58 | {key:"gantt.rowHeight", value:"50"} 59 | ) 60 | ``` 61 | 62 | - **Data**: Just like the name says, this property contains the data the chart renders. Update the Data property with the following code. Keep in mind, this property can be set at runtime so you can make these charts dynamic. 63 | 64 | ```javascript 65 | { 66 | legends: ["Label1","Label2","Label3","Label4","Label5"], 67 | clabels: ["Process 1","Process 2","Process 3","Process 4","Process 5"], 68 | intervals: Table( 69 | {start:"01/10/2018",end:"02/01/2018",colorindex:1,process:1}, 70 | {start:"03/10/2018",end:"05/01/2018",colorindex:2,process:2}, 71 | {start:"03/10/2018",end:"05/01/2018",colorindex:3,process:3}, 72 | {start:"03/10/2018",end:"04/10/2018",colorindex:4,process:4}, 73 | {start:"02/11/2018",end:"04/11/2018",colorindex:5,process:5} 74 | ) 75 | } 76 | ``` 77 | 78 | Now take a look at your chart! 79 | 80 | ![](images/quickstart-gantt.png) 81 | 82 | ### All Options 83 | 84 | | Key | Remark | 85 | | -------------------------- | ------------------------------------------------------------ | 86 | | gantt.type | Gantt chart type. Currently supports two types, **month** means chart is separated by month, **week** means chart is separated by week. | 87 | | gantt.step | Gantt chart step number, step number value means unit. For example, **1** means one week/month:
![](images/gantt-step1.png)**
3 **means three weeks/months.
![](images/gantt-step2.png) | 88 | | gantt.startDate | Gantt chart start date string, date formatter is **mm/dd/yyyy**, for example **01/18/2019**. | 89 | | gantt.endDate | Gantt chart end date string, date formatter is **mm/dd/yyyy**, for example **09/28/2019**. | 90 | | gantt.lineColor | Gantt chart table line color string, for example **#5a5252**. | 91 | | gantt.fontColor | Gantt chart table headers font color string, for example **#5f5f5f**. | 92 | | gantt.barHeight | Gantt chart bar height, formatter should be valid number string![](images/gantt_barheight.png) | 93 | | gantt.rowHeight | Gantt chart each row height, formatter should be valid number string.
![](images/gantt-rowheight.png) | 94 | | gantt.rowHeaderHeight | Gantt chart row headers height, formatter should be valid number string.
![](images/gantt-rowHeaderHeight.png) | 95 | | gantt.rowHeaderFontSize | Gantt chart row headers font size, formatter is number, for example **15** means **15px**
![](images/gantt_headerfont1.png) | 96 | | gantt.columnHeaderWidth | Gantt chart column headers width, formatter should be valid number string.
![](images/gantt-columnHeadersWidth.png) | 97 | | gantt.columnHeaderFontSize | Gantt chart row headers font size, formatter is number string, for example **12** means **12px**
![](images/gantt_headerfont2.png) | 98 | 99 | ### All Data 100 | 101 | | Key | Remark | 102 | | --------- | ------------------------------------------------------------ | 103 | | legends | Legends labels array. | 104 | | clabels | Column headers labels. | 105 | | intervals | Bar recorders table.
**start**: Bar start date, date formatter is **mm/dd/yyyy**, for example **01/10/2018**.
**end**: Bar end date, date formatter is **mm/dd/yyyy**, for example **03/15/2018**.
**colorindex**: Bar color index, should be keep same with legend index.
**process**: Bar row location index. | 106 | -------------------------------------------------------------------------------- /docs/gantt-dynamic.md: -------------------------------------------------------------------------------- 1 | # Gantt Chart 2 | 3 | ### Prerequisites 4 | 5 | First follow the steps in the [quick start guide](/) to Create a Canvas Power App, Enable the Components Feature, and Import the Canviz Power Apps Chart Components. 6 | 7 | After you have the prerequisites completed, then continue and add the Gantt chart component to a Canvas Power App. 8 | 9 | ### Add a Gantt Chart 10 | 11 | In the Power Apps editor open the **Tree view**. 12 | 13 | Click the **Screens** tab, then select **Screen1**. 14 | 15 | ![](images/quickstart-select-screen.png) 16 | 17 | In the left menu, click **Insert**. 18 | 19 | Expand the **Custom** section, then click **GanttChart**. 20 | 21 | ![](images/quickstart-insert-ganttchart.png) 22 | 23 | Select the newly added chart component, then configure the chart properties. 24 | 25 | ![](images/quickstart-ganttchart-properties.png) 26 | 27 | - **Size**: To change the size of the chart, click the Advanced tab and change the Height and Width properties. In this example we use 1150 × 640. 28 | 29 | - **Title**: To change the Title, edit the Title property. The Title property is a record property. Edit the value in the formula bar. Update the value for the text field in the Title property to "Important Project". 30 | 31 | ![](images/quickstart-chart-title.png) 32 | 33 | - **Subtitle**: The Subtitle is also a record property. Set its text field to empty to hide it. 34 | 35 | ```javascript 36 | { 37 | text: "", 38 | ... 39 | } 40 | ``` 41 | 42 | - **Options**: Options allow you to configure the look and feel of the chart to a large degree. For example, to set the start date for the chart simply set the gantt.startDate property. Update the Options property with the following code. For more details about the various options properties, please see the documentation below. 43 | 44 | ```javascript 45 | Table( 46 | {key:"gantt.type", value:"month"}, 47 | {key:"gantt.step", value:"3"}, 48 | {key:"gantt.startDate", value:"01/18/2018"}, 49 | {key:"gantt.endDate", value:"06/25/2018"}, 50 | 51 | {key:"gantt.lineColor", value:"#5a5252"}, 52 | {key:"gantt.fontColor", value:"#5a5252"}, 53 | 54 | {key:"gantt.rowHeaderFontSize", value:"15"}, 55 | {key:"gantt.columnHeaderFontSize", value:"12"}, 56 | 57 | {key:"gantt.barHeight", value:"20"}, 58 | {key:"gantt.rowHeight", value:"50"} 59 | ) 60 | ``` 61 | 62 | - **Data**: Just like the name says, this property contains the data the chart renders. Update the Data property with the following code. Keep in mind, this property can be set at runtime so you can make these charts dynamic. 63 | 64 | ```javascript 65 | { 66 | legends: ["Label1","Label2","Label3","Label4","Label5"], 67 | clabels: ["Process 1","Process 2","Process 3","Process 4","Process 5"], 68 | intervals: Table( 69 | {start:"01/10/2018",end:"02/01/2018",colorindex:1,process:1}, 70 | {start:"03/10/2018",end:"05/01/2018",colorindex:2,process:2}, 71 | {start:"03/10/2018",end:"05/01/2018",colorindex:3,process:3}, 72 | {start:"03/10/2018",end:"04/10/2018",colorindex:4,process:4}, 73 | {start:"02/11/2018",end:"04/11/2018",colorindex:5,process:5} 74 | ) 75 | } 76 | ``` 77 | 78 | Now take a look at your chart! 79 | 80 | ![](images/quickstart-gantt.png) 81 | 82 | ### All Options 83 | 84 | | Key | Remark | 85 | | -------------------------- | ------------------------------------------------------------ | 86 | | gantt.type | Gantt chart type. Currently supports two types, **month** means chart is separated by month, **week** means chart is separated by week. | 87 | | gantt.step | Gantt chart step number, step number value means unit. For example, **1** means one week/month:
![](images/gantt-step1.png)**
3 **means three weeks/months.
![](images/gantt-step2.png) | 88 | | gantt.startDate | Gantt chart start date string, date formatter is **mm/dd/yyyy**, for example **01/18/2019**. | 89 | | gantt.endDate | Gantt chart end date string, date formatter is **mm/dd/yyyy**, for example **09/28/2019**. | 90 | | gantt.lineColor | Gantt chart table line color string, for example **#5a5252**. | 91 | | gantt.fontColor | Gantt chart table headers font color string, for example **#5f5f5f**. | 92 | | gantt.barHeight | Gantt chart bar height, formatter should be valid number string![](images/gantt_barheight.png) | 93 | | gantt.rowHeight | Gantt chart each row height, formatter should be valid number string.
![](images/gantt-rowheight.png) | 94 | | gantt.rowHeaderHeight | Gantt chart row headers height, formatter should be valid number string.
![](images/gantt-rowHeaderHeight.png) | 95 | | gantt.rowHeaderFontSize | Gantt chart row headers font size, formatter is number, for example **15** means **15px**
![](images/gantt_headerfont1.png) | 96 | | gantt.columnHeaderWidth | Gantt chart column headers width, formatter should be valid number string.
![](images/gantt-columnHeadersWidth.png) | 97 | | gantt.columnHeaderFontSize | Gantt chart row headers font size, formatter is number string, for example **12** means **12px**
![](images/gantt_headerfont2.png) | 98 | 99 | ### All Data 100 | 101 | | Key | Remark | 102 | | --------- | ------------------------------------------------------------ | 103 | | legends | Legends labels array. | 104 | | clabels | Column headers labels. | 105 | | intervals | Bar recorders table.
**start**: Bar start date, date formatter is **mm/dd/yyyy**, for example **01/10/2018**.
**end**: Bar end date, date formatter is **mm/dd/yyyy**, for example **03/15/2018**.
**colorindex**: Bar color index, should be keep same with legend index.
**process**: Bar row location index. | 106 | -------------------------------------------------------------------------------- /docs/properties.md: -------------------------------------------------------------------------------- 1 | # Chart Properties 2 | 3 | In the [Quick Start](/), you learned how to update some of the chart component properties and how to create and customize a Pie chart. 4 | 5 | In this guide, you will learn more details about the properties you can use to configure the charts. 6 | 7 | ### Type 8 | 9 | The Type property determines the kind of chart to display. We have implemented the following types of charts so far. Would you like to add another to the library? That would be awesome! Please send us a Pull Request! 10 | 11 | * Pie 12 | * Solid Gauge 13 | * Funnel 14 | * Line 15 | * Bar 16 | * Radar 17 | * Scatter 18 | * Candle 19 | 20 | > **Note**: The Gantt chart uses different data payload schema and we created a separate component for it. [Learn more and create a](gantt.md) Gannt chart. 21 | 22 | ### Colors 23 | 24 | The property accepts a series of colors: 25 | 26 | ```javascript 27 | ["#31825d", "#30a667", "#5ec16c", "#f6c790", "#f7c772", "#f7b45b", "#f68f64", "#d46068", "#946eb0", "#769acc", "#60c5ea"] 28 | ``` 29 | 30 | They are used by the various labels and legends. 31 | 32 | [All CSS color values](https://www.w3schools.com/colors/default.asp) are allowed. For examples: `Blue`, `#808080`. 33 | 34 | > **Note**: This also applies to other color fields, such as title color, line color, etc. 35 | 36 | ### Title 37 | 38 | This record property controls the title text and style. It accepts the following fields: 39 | 40 | | Name | Remark | 41 | | ---------------- | ------------------------------------------------------------ | 42 | | text | Text of the title.
You may set it to empty to hide the title. | 43 | | height | Height of the title. | 44 | | align | Alignment of the title.
Available values: left, center and right. | 45 | | paddingTop | Padding top of the title. | 46 | | fontSize | Font size of the title. | 47 | | fontFamily | Font family of the title. | 48 | | fontWeight | Font weight of the title.
Available values: normal and bold. | 49 | | fontStyle | Font style of the title.
Available values: normal and italic. | 50 | | color | Color of the title. | 51 | | additionalStyles | | 52 | 53 | > **Note**: the available values for align, font weight and font style also apply to the same types of fields in other properties. 54 | 55 | ### Subtitle 56 | 57 | This record property controls the text and styles of the subtitle. It has the same fields as the title property. 58 | 59 | ### Legend 60 | 61 | This record property controls the styles of the legend. 62 | 63 | | Name | Remark | 64 | | ---------- | ------------------------------------------------------------ | 65 | | enable | Show or hide the legend. Available values: true and false. | 66 | | source | Data source of the legend. Available values:
labels: get items from the Data property's labels field
legends: get items from the Data property's legends field | 67 | | placement | Position of the legend. Available values: top, right, left and bottom. | 68 | | width | Width of the legend. Effective when placement is set to left or right. | 69 | | height | Height of the legend. Effective when placement is set to top or bottom. | 70 | | itemGap | Gap between legend items. | 71 | | fontSize | Font size of the legend. | 72 | | fontFamily | Font family of the legend. | 73 | | fontWeight | Font weight of the legend. | 74 | | fontStyle | Font style of the legend. | 75 | | color | Color of the legend. | 76 | | align | Align of the legend. | 77 | 78 | ### Options 79 | 80 | This property allows you to control even more details of the chart: 81 | 82 | * X and Y Axes: 83 | 84 | ```javascript 85 | Table( 86 | { key:"x.labels.color", value:"#336699" } 87 | { key:"y.labels.fontWeight", value:"bold" } 88 | ) 89 | ``` 90 | 91 | For more details, please check [Axes](axes.md). 92 | 93 | * Chart special settings: 94 | 95 | ```javascript 96 | Table( 97 | { key:"pie.radius", value:"0.95" }, 98 | { key:"pie.innerRadius", value:"0.75" } 99 | ) 100 | ``` 101 | 102 | For more details, please check the documentation for each chart type. 103 | 104 | ### Data 105 | 106 | Legends, labels and values are set via this property. Below is sample data for radar chart. The data, just like all the properties, may be passed in dynamically at run time. 107 | 108 | ```javascript 109 | { 110 | legends: ["Test 1", "Test 2", "Test 3"], 111 | labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"], 112 | table: Table( 113 | { key:"1.y", values: [500, 500, 500, 500, 500, 500, 500, 500] }, 114 | { key:"2.y", values: [400, 400, 400, 400, 400, 400, 400, 400] }, 115 | { key:"3.y", values: [300, 300, 300, 300, 300, 300, 300, 310] } 116 | ) 117 | } 118 | ``` 119 | 120 | For more details, please check the documentation for each chart type. 121 | 122 | > **Known Issue**: 123 | > By default, the Canviz Power Apps Chart Components support a maximum of 100 points. If you wish to modify the code to support more points, for example 400, then add the following record to a charts Options property: 124 | > 125 | > ```javascript 126 | > { key: "indexes", value: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20" } 127 | > ``` 128 | > 129 | > The value contains 20 continuous numbers starting at 1, and separated by commas. 20 × 20 = 400 130 | --------------------------------------------------------------------------------