Skip to content
Permalink
Browse files

chore: update 'chart' demo for nativescript-ui-chart v4.0.1

  • Loading branch information...
NSBuildUser
NSBuildUser committed Apr 17, 2019
1 parent f7597b0 commit 36038f3a96cf6194fadfce0392e1d51f1b670d73
Showing with 606 additions and 527 deletions.
  1. +1 −1 chart/README.md
  2. +27 −21 chart/app/examples/annotations/grid-line-page.xml
  3. +13 −11 chart/app/examples/annotations/plot-band-page.xml
  4. +13 −10 chart/app/examples/axes/date-time-axes/date-time-axes-page.xml
  5. +9 −8 chart/app/examples/axes/label-visibility/label-visibility-page.xml
  6. +13 −17 chart/app/examples/axes/multiple/multiple-axes-page.xml
  7. +6 −8 chart/app/examples/axes/negative-values/negative-values-page.xml
  8. +17 −22 chart/app/examples/behaviors/chart-datapoint-selection-page.xml
  9. +5 −7 chart/app/examples/behaviors/chart-pan-zoom-page.xml
  10. +20 −16 chart/app/examples/behaviors/chart-pie-selection-page.xml
  11. +12 −11 chart/app/examples/behaviors/chart-series-selection-page.xml
  12. +16 −4 chart/app/examples/behaviors/chart-trackball-content-page.xml
  13. +21 −23 chart/app/examples/behaviors/chart-trackball-page.xml
  14. +1 −1 chart/app/examples/data-models/categorical-data-model.ts
  15. +33 −7 chart/app/examples/legend/chart-legend-page.xml
  16. +6 −6 chart/app/examples/series/area/area-series-page.xml
  17. +13 −18 chart/app/examples/series/area/stacked-area-series-page.xml
  18. +9 −10 chart/app/examples/series/bar/bar-series-page.xml
  19. +0 −1 chart/app/examples/series/bar/range-bar-series-page.xml
  20. +13 −18 chart/app/examples/series/bar/stacked-bar-series-page.xml
  21. +14 −14 chart/app/examples/series/financial/candlestick-series-page.xml
  22. +14 −14 chart/app/examples/series/financial/ohlc-series-page.xml
  23. +6 −6 chart/app/examples/series/line/line-series-page.xml
  24. +35 −23 chart/app/examples/series/pie/pie-series-page.xml
  25. +6 −6 chart/app/examples/series/spline/spline-area-series-page.xml
  26. +8 −8 chart/app/examples/styling/styling-axes-page.xml
  27. +23 −21 chart/app/examples/styling/styling-grid-page.xml
  28. +35 −23 chart/app/examples/styling/styling-labels-page.xml
  29. +59 −44 chart/app/examples/styling/styling-pie-series-page.xml
  30. +52 −47 chart/app/examples/styling/styling-selection-page.xml
  31. +29 −30 chart/app/examples/styling/styling-series-page.xml
  32. +15 −9 chart/app/examples/styling/styling-ticks-page.xml
  33. +31 −31 chart/app/navigation/categories-view-model.ts
  34. +1 −1 chart/app/navigation/options-menu/options-page.xml
  35. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/area-series.png
  36. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/bar-series.png
  37. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/bubble-series.png
  38. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/candlestick-series.png
  39. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/customization.png
  40. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/datapoint-selection.png
  41. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/date-time-axis.png
  42. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/grid-line.png
  43. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/label-visibility.png
  44. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/legend-area-selected.png
  45. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/legend.png
  46. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/line-series.png
  47. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/multiple-axes.png
  48. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/negative-values.png
  49. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/ohlc-series.png
  50. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/pan-and-zoom.png
  51. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/pie-selection.png
  52. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/pie-series.png
  53. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/plot-band.png
  54. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/range-bar-series.png
  55. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/scatter-bubble-series.png
  56. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/scatter-series.png
  57. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/series-selection.png
  58. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/spline-area-series.png
  59. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/spline-series.png
  60. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/stacked-area-series.png
  61. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/stacked-bar-series.png
  62. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-axes.png
  63. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-bar-series.png
  64. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-grid.png
  65. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-labels.png
  66. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-series-selection.png
  67. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-series.png
  68. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/styling-ticks.png
  69. BIN chart/e2e/resources/images/chart-js-android/Android GoogleAPI Emulator/trackball.png
  70. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/area-series.png
  71. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/bar-series.png
  72. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/bubble-series.png
  73. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/candlestick-series.png
  74. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/customization.png
  75. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/datapoint-selection.png
  76. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/date-time-axis.png
  77. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/grid-line.png
  78. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/label-visibility.png
  79. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/legend-area-selected.png
  80. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/legend.png
  81. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/line-series.png
  82. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/multiple-axes.png
  83. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/negative-values.png
  84. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/ohlc-series.png
  85. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/pan-and-zoom.png
  86. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/pie-selection.png
  87. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/pie-series.png
  88. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/plot-band.png
  89. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/range-bar-series.png
  90. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/scatter-bubble-series.png
  91. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/scatter-series.png
  92. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/series-selection.png
  93. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/spline-area-series.png
  94. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/spline-series.png
  95. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/stacked-area-series.png
  96. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/stacked-bar-series.png
  97. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-axes.png
  98. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-bar-series.png
  99. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-grid.png
  100. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-labels.png
  101. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-series-selection.png
  102. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-series.png
  103. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/styling-ticks.png
  104. BIN chart/e2e/resources/images/chart-js-ios/iPhone X/trackball.png
  105. +21 −21 chart/e2e/tests.e2e.ts
  106. +9 −9 chart/e2e/tests2.e2e.ts
@@ -4,4 +4,4 @@ This is a demo application that showcases the plugin in action.

# Running the application

If you are coming here for the first time after cloning the repository make sure to build the plugin's code located in the `src` folder. To build it simply run the `npm run postclone` scripts in `src`. After that you can use the NativeScripty CLI commands like `tns run` as usual.
Make sure you are using the latest NativeScript CLI version by running `npm i nativescript -g`. Then run `tns run android` or `tns run ios` depending on the platform you want to run the application on.
@@ -1,27 +1,33 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:ScatterSeries.horizontalAxis>
<chart:LinearAxis minimum="0" maximum="80" id="hAxis"/>
</chart:ScatterSeries.horizontalAxis>
<chart:ScatterSeries.verticalAxis>
<chart:LinearAxis id="vAxis"/>
</chart:ScatterSeries.verticalAxis>
<chart:RadCartesianChart.series>
<chart:ScatterSeries seriesName="SavingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Savings">
</chart:ScatterSeries>
<chart:ScatterSeries seriesName="SalarySeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Salary">
</chart:ScatterSeries>
<chart:ScatterSeries seriesName="SpendingsSeries" items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings">
</chart:ScatterSeries>
</chart:RadCartesianChart.series>
<chart:ScatterSeries.horizontalAxis>
<chart:LinearAxis minimum="0" maximum="80" id="hAxis"/>
</chart:ScatterSeries.horizontalAxis>
<chart:ScatterSeries.verticalAxis>
<chart:LinearAxis id="vAxis"/>
</chart:ScatterSeries.verticalAxis>

<chart:RadCartesianChart.series>
<chart:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Savings"></chart:ScatterSeries>
<chart:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Salary"></chart:ScatterSeries>
<chart:ScatterSeries items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings"></chart:ScatterSeries>
</chart:RadCartesianChart.series>

<!-- >> grid-line-annotations -->
<chart:RadCartesianChart.annotations>
<chart:ChartGridLineAnnotation axisId="hAxis" hidden="false" value="50" zPosition="AboveSeries" strokeWidth="1" strokeColor="#EB916580" />
<chart:ChartGridLineAnnotation axisId="vAxis" hidden="false" value="10000" zPosition="AboveSeries" strokeWidth="1" strokeColor="#65BFEB80" />
<chart:ChartPlotBandAnnotation axisId="hAxis" hidden="false" value="20" zPosition="AboveSeries" minValue="60" maxValue="70" fillColor="#A1FAC980" strokeColor="#A1FAC980"/>
<chart:ChartPlotBandAnnotation axisId="vAxis" hidden="false" value="20000" zPosition="AboveSeries" minValue="2500" maxValue="5000" fillColor="#AC74E880" strokeColor="#AC74E880"/>
<!-- >> grid-line-annotations -->
<chart:RadCartesianChart.annotations>
<chart:ChartGridLineAnnotation axisId="hAxis" hidden="false" value="50" zPosition="AboveSeries"
android:strokeWidth="4" ios:strokeWidth="10" strokeColor="#EB916580">
</chart:ChartGridLineAnnotation>
<chart:ChartGridLineAnnotation axisId="vAxis" hidden="false" value="10000" zPosition="AboveSeries"
android:strokeWidth="4" ios:strokeWidth="10" strokeColor="#DEBFEB80">
</chart:ChartGridLineAnnotation>
<chart:ChartPlotBandAnnotation axisId="hAxis" hidden="false" value="20" zPosition="AboveSeries"
minValue="60" maxValue="70" fillColor="#A1FAC980" strokeColor="#A1FAC980">
</chart:ChartPlotBandAnnotation>
<chart:ChartPlotBandAnnotation axisId="vAxis" hidden="false" value="20000" zPosition="AboveSeries"
minValue="2500" maxValue="5000" fillColor="#AC74E880" strokeColor="#AC74E880">
</chart:ChartPlotBandAnnotation>
</chart:RadCartesianChart.annotations>
<!-- << grid-line-annotations -->
<!-- << grid-line-annotations -->
</chart:RadCartesianChart>
</navigation:ExamplePage>
@@ -1,20 +1,22 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis/>
</chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis id="verBarAxis"/>
</chart:RadCartesianChart.verticalAxis>

<chart:RadCartesianChart.series>
<chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
<chart:BarSeries.horizontalAxis>
<chart:CategoricalAxis id="horBarAxis"/>
</chart:BarSeries.horizontalAxis>
<chart:BarSeries.verticalAxis>
<chart:LinearAxis id="verBarAxis"/>
</chart:BarSeries.verticalAxis>
</chart:BarSeries>
<chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount"></chart:BarSeries>
</chart:RadCartesianChart.series>
<!-- >> plot-band-annotations -->

<!-- >> plot-band-annotations -->
<chart:RadCartesianChart.annotations>
<chart:ChartPlotBandAnnotation axisId="verBarAxis" minValue="2" maxValue="4" zPosition="AboveSeries" strokeWidth="2" fillColor="#DDFFFF00" strokeColor="Red" strokeDashPattern="3,3,5,5"/>
<chart:ChartPlotBandAnnotation axisId="verBarAxis" minValue="2" maxValue="4" zPosition="AboveSeries"
strokeWidth="2" fillColor="#DDFFFF00" strokeColor="Red" strokeDashPattern="3,3,5,5">
</chart:ChartPlotBandAnnotation>
</chart:RadCartesianChart.annotations>
<!-- << plot-band-annotations -->
<!-- << plot-band-annotations -->
</chart:RadCartesianChart>
</navigation:ExamplePage>
@@ -1,15 +1,18 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:RadCartesianChart.series>
<chart:LineSeries items="{{ dateTimeSource }}" categoryProperty="timeStamp" valueProperty="Amount">
<chart:LineSeries.horizontalAxis>
<chart:DateTimeContinuousAxis minimum="01/02/2015" maximum="01/10/2015" majorStep="Month" dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"/>
</chart:LineSeries.horizontalAxis>
<chart:LineSeries.verticalAxis>
<chart:LinearAxis/>
</chart:LineSeries.verticalAxis>
</chart:LineSeries>
</chart:RadCartesianChart.series>
<chart:RadCartesianChart.horizontalAxis>
<chart:DateTimeContinuousAxis
minimum="01/02/2015" maximum="01/10/2015"
majorStep="Month" dateFormat="MMM-dd"
labelFitMode="Rotate" labelRotationAngle="1.2">
</chart:DateTimeContinuousAxis>
</chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis/>
</chart:RadCartesianChart.verticalAxis>

<chart:RadCartesianChart.series>
<chart:LineSeries items="{{ dateTimeSource }}" categoryProperty="timeStamp" valueProperty="Amount"/>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</navigation:ExamplePage>
@@ -1,14 +1,15 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis lastLabelVisibility="Hidden"
ios:firstLabelVisibility="Hidden" ios:plotMode="OnTicks">
</chart:CategoricalAxis>
</chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis/>
</chart:RadCartesianChart.verticalAxis>
<chart:RadCartesianChart.series>
<chart:AreaSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
<chart:AreaSeries.horizontalAxis>
<chart:CategoricalAxis lastLabelVisibility="Hidden" ios:firstLabelVisibility="Hidden" ios:plotMode="OnTicks"/>
</chart:AreaSeries.horizontalAxis>
<chart:AreaSeries.verticalAxis>
<chart:LinearAxis />
</chart:AreaSeries.verticalAxis>
</chart:AreaSeries>
<chart:AreaSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount"></chart:AreaSeries>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</navigation:ExamplePage>
@@ -1,25 +1,21 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:RadCartesianChart.series>
<chart:LineSeries seriesName="RateA" items="{{ rateA }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"/>

<chart:LineSeries seriesName="RateB" items="{{ rateB }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount" />

<chart:LineSeries seriesName="RateC" items="{{ rateC }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"/>

<chart:BarSeries seriesName="Total" items="{{ total }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount">
<chart:BarSeries.verticalAxis>
<chart:LinearAxis horizontalLocation="Right"/>
</chart:BarSeries.verticalAxis>
</chart:BarSeries>
</chart:RadCartesianChart.series>

<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis horizontalLocation="Left"/>
<chart:LinearAxis horizontalLocation="Left"/>
</chart:RadCartesianChart.verticalAxis>

<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis verticalLocation="Down" />
<chart:CategoricalAxis verticalLocation="Bottom"/>
</chart:RadCartesianChart.horizontalAxis>

<chart:RadCartesianChart.series>
<chart:BarSeries items="{{ total }}" categoryProperty="Country" valueProperty="Amount">
<chart:BarSeries.verticalAxis>
<chart:LinearAxis horizontalLocation="Right"/>
</chart:BarSeries.verticalAxis>
</chart:BarSeries>
<chart:LineSeries items="{{ rateA }}" categoryProperty="Country" valueProperty="Amount"/>
<chart:LineSeries items="{{ rateB }}" categoryProperty="Country" valueProperty="Amount"/>
<chart:LineSeries items="{{ rateC }}" categoryProperty="Country" valueProperty="Amount"/>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</navigation:ExamplePage>
@@ -1,18 +1,16 @@
<!-- >> negative-values -->
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">
<chart:RadCartesianChart id="cartesianChart">
<chart:RadCartesianChart.series>
<chart:SplineAreaSeries seriesName="SplineArea" items="{{ negativeValues }}" categoryProperty="Period" valueProperty="Amount">
</chart:SplineAreaSeries>
</chart:RadCartesianChart.series>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis allowZoom="true" minimum="-50" maximum="50"/>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis allowZoom="true" minimum="-50" maximum="50"/>
</chart:RadCartesianChart.verticalAxis>

<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis allowZoom="true"/>
<chart:CategoricalAxis allowZoom="true"/>
</chart:RadCartesianChart.horizontalAxis>

<chart:RadCartesianChart.series>
<chart:SplineAreaSeries items="{{ negativeValues }}" categoryProperty="Period" valueProperty="Amount"></chart:SplineAreaSeries>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</navigation:ExamplePage>
<!-- << negative-values -->
@@ -1,27 +1,22 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">

<chart:RadCartesianChart>
<chart:RadCartesianChart>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis/>
</chart:RadCartesianChart.verticalAxis>
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis/>
</chart:RadCartesianChart.horizontalAxis>

<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis horizontalLocation="Left" labelTextColor="Green" labelSize="10" lineColor="Red" lineThickness="1" /></chart:RadCartesianChart.verticalAxis>
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis verticalLocation="Bottom" labelTextColor="Red" labelSize="10" lineColor="Red" lineThickness="1" /></chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.series>
<chart:RadCartesianChart.series>
<chart:BarSeries legendTitle="Bar series" selectionMode="DataPoint"
items="{{ sourceItems }}" categoryProperty="Name" valueProperty="Sales">
</chart:BarSeries>
</chart:RadCartesianChart.series>

<chart:BarSeries
selectionMode="DataPoint"
seriesName="Bars"
legendTitle="Bar series"
valueProperty="Sales"
categoryProperty="Name"
items="{{ sourceItems }}">
</chart:BarSeries>

</chart:RadCartesianChart.series>

<chart:RadCartesianChart.legend>
<chart:RadLegendView position="Top" title="Financial data" height="150"/>
</chart:RadCartesianChart.legend>
</chart:RadCartesianChart>
<chart:RadCartesianChart.legend>
<chart:RadLegendView position="Top" title="Financial data" height="150"/>
</chart:RadCartesianChart.legend>
</chart:RadCartesianChart>

</navigation:ExamplePage>
</navigation:ExamplePage>
@@ -2,23 +2,21 @@
<!-- >> pan-and-zoom -->
<chart:RadCartesianChart id="PanZoomChart" >
<chart:RadCartesianChart.series>

<chart:BarSeries seriesName="Bar" items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="SecondVal">
<chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="SecondVal">
<chart:BarSeries.verticalAxis>
<chart:LinearAxis horizontalLocation="Right" allowZoom="true" allowPan="true"/>
<chart:LinearAxis horizontalLocation="Right" allowZoom="true" allowPan="false"/>
</chart:BarSeries.verticalAxis>
</chart:BarSeries>

<chart:LineSeries seriesName="Line" items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
<chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
<chart:LineSeries.verticalAxis>
<chart:LinearAxis horizontalLocation="Left" allowZoom="true"/>
<chart:LinearAxis horizontalLocation="Left" allowPan="false" allowZoom="true"/>
</chart:LineSeries.verticalAxis>
</chart:LineSeries>

</chart:RadCartesianChart.series>

<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis allowPan="true" allowZoom="true"/>
<chart:CategoricalAxis allowPan="false" allowZoom="true"/>
</chart:RadCartesianChart.horizontalAxis>

</chart:RadCartesianChart>
@@ -1,20 +1,24 @@
<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-ui-chart" xmlns="http://www.nativescript.org/tns.xsd">

<chart:RadPieChart id="pieChart">
<!-- >> datapoint-selection -->
<chart:RadPieChart.series>
<chart:PieSeries selectionMode="DataPoint" outerRadiusFactor="0.8" expandRadius="0.2" showLabels="true"
items="{{ sourceItems }}" valueProperty="Sales" >
<chart:PieSeries.labelStyle>
<chart:PointLabelStyle margin="15"/>
</chart:PieSeries.labelStyle>
</chart:PieSeries>
</chart:RadPieChart.series>
<!-- << datapoint-selection -->
<chart:RadPieChart.legend>
<chart:RadLegendView position="Top" title="My pie data" />
</chart:RadPieChart.legend>

</chart:RadPieChart>
<chart:RadPieChart id="pieChart">
<!-- >> datapoint-selection -->
<chart:RadPieChart.series>
<chart:PieSeries
selectionMode="DataPoint"
outerRadiusFactor="0.8"
expandRadius="0.2"
showLabels="true"
items="{{ sourceItems }}"
valueProperty="Sales" >
<chart:PieSeries.labelStyle>
<chart:PointLabelStyle margin="15"/>
</chart:PieSeries.labelStyle>
</chart:PieSeries>
</chart:RadPieChart.series>
<!-- << datapoint-selection -->
<chart:RadPieChart.legend>
<chart:RadLegendView position="Top" title="My pie data" />
</chart:RadPieChart.legend>
</chart:RadPieChart>

</navigation:ExamplePage>

0 comments on commit 36038f3

Please sign in to comment.
You can’t perform that action at this time.