Chart and nativeScripts List-view

3 posts, 1 answers
  1. Narayanan
    Narayanan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 26 Oct Link to this post

    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

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 27 Oct Link to this post

    Hello,

    Thank you for your interest in NativeScript.

    I reviewed your problem and found that the problem is due to using `StackLayout` for main 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 and to set the height for rows. For your convenience 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Narayanan
    Narayanan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 27 Oct in reply to nikolay.tsonev Link to this post

    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

     

     

     

     

Back to Top