Chart and nativeScripts List-view

[Narayanan]

Hi,

If I use Chart alone it works. If I use ListView alone it works. When I put then in the same page only the first in the order appears. What am I doing wrong or how can I achive. I also would need to have multiple chart on the same page. Can I achieve it ?

Here is my XML.. the js is from your samples, so I am not attaching.

<Page 

  xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" 
  xmlns:chart="nativescript-telerik-ui-pro/chart">
  <StackLayout>
    <StackLayout orientation="horizontal">
      <Button class="btn btn-primary btn-rounded-sm" text="Create Trip" tap="{{ createTrip }}" />
      <Button class="btn btn-primary btn-outline btn-rounded-sm" text="Home" tap="{{ home }}" />
      <Button class="btn btn-primary btn-rounded-lg" text="Logout SF" tap="{{ logout }}" />
    </StackLayout>
    <StackLayout>
    <chart:RadCartesianChart id="cartesianChart">
      <chart:RadCartesianChart.series>
        <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
          <chart:LineSeries.horizontalAxis>
            <chart:CategoricalAxis/>
          </chart:LineSeries.horizontalAxis>
          <chart:LineSeries.verticalAxis>
            <chart:LinearAxis/>
          </chart:LineSeries.verticalAxis>
        </chart:LineSeries>
      </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
    </StackLayout>
    <!-- this is not appearing --->
    <GridLayout>
      <ListView class="list-group" id="tripList" items="{{ tripList }}">
        <ListView.itemTemplate>
          <StackLayout class="list-group-item" orientation="vertical">
            <GridLayout columns="*,*,*">
              <Label class="list-group-item-text" col="0" id="distance" text="{{distance}}"/>
              <Label col="1" id="duration" text="{{duration}}"/>
              <Label col="2" id="duration" text="{{startTime}}"/>
            </GridLayout>
          </StackLayout>
        </ListView.itemTemplate>
      </ListView>
    </GridLayout>
    <!-- this is not appearing - -->
  </StackLayout>
</Page>

Thanks

Narayan

[Nikolay Tsonev]

Hello,

Thank you for your interest in NativeScript.

I reviewed your problem and found that the problem is due to using `StackLayout` for container in your XML and the inner components height will not be set properly . To address the problem, you should replace the main StackLayout with GridLayout set the height for rows. For your I am attaching sample code.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" xmlns:chart="nativescript-telerik-ui-pro/chart">
<GridLayout rows="70 * *" columns="*">
    <StackLayout row="0" orientation="horizontal">
      <Button class="btn btn-primary btn-rounded-sm" text="Create Trip" tap="{{ createTrip }}" />
      <Button class="btn btn-primary btn-outline btn-rounded-sm" text="Home" tap="{{ home }}" />
      <Button class="btn btn-primary btn-rounded-lg" text="Logout SF" tap="{{ logout }}" />
    </StackLayout>
    <chart:RadCartesianChart id="cartesianChart" row="1">
      <chart:RadCartesianChart.series>
        <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
          <chart:LineSeries.horizontalAxis>
            <chart:CategoricalAxis/>
          </chart:LineSeries.horizontalAxis>
          <chart:LineSeries.verticalAxis>
            <chart:LinearAxis/>
          </chart:LineSeries.verticalAxis>
        </chart:LineSeries>
      </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
    <!-- this is not appearing --->
    <GridLayout row="2">
      <ListView class="list-group" id="tripList" items="{{ tripList }}">
        <ListView.itemTemplate>
          <StackLayout class="list-group-item" orientation="vertical">
            <GridLayout columns="*,*,*">
              <Label class="list-group-item-text" col="0" id="distance" text="{{distance}}"/>
            </GridLayout>
          </StackLayout>
        </ListView.itemTemplate>
      </ListView>
    </GridLayout>
    <!-- this is not appearing - -->
</GridLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  var array=[
            { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24 },
            { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25 },
            { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23 },
            { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24 },
            { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21 }
        ];
  var array2=[{distance:200}, {distance:400}, {distance:800}]
  page.bindingContext = {categoricalSource:array, tripList:array2};
}

I hope this information helps

Regards,
nikolay.tsonev
Telerik by Progress

[Narayanan]

Hi Nikolay.tsonev,

Yes, it worked fine. Thanks for taking time and posting it.

A suggestion,
The example I saw from the forum http://www.telerik.com/forums/nativescript-ui-pro-chart-e3270ce9be96  only helped me to get my first chart working.

The getting started was not that helpful to get started. http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Chart/getting-started  

In other words for nativescript folks who are trying the product. We need something like.. main-page.ts, main-page.js and main-page.xml

Thanks