sparklines

7 posts, 2 answers
  1. angus
    angus avatar
    6 posts
    Member since:
    Sep 2012

    Posted 22 Oct Link to this post

    Hi,

    I'm trying to replicate something like sparklines (very popular in finance for a quick overview of last trends) like this :

    https://i.pinimg.com/originals/7e/be/f3/7ebef36d1a934afe954cdb5f880b16c7.jpg

    Is there any chance the UI chart module can replicate something like that?

    I would put them in a RadListView as a column.

    Thanks in advance.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    316 posts

    Posted 23 Oct Link to this post

    Hello Angus,

    First of all, thank you for your interest in UI for NativeScript.
    I review your case and regarding that, I would suggest using RadListView component and to display inside the ListView item RadChart with Area series. For your help, you could review this article form the documentation and the attached sample code.

    XML
    <navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-pro-ui/chart" xmlns:lv="nativescript-pro-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">
        <lv:RadListView items="{{ dataItems }}" >
            <lv:RadListView.itemTemplate>
                 <GridLayout rows="" columns="" height="300">
                    <chart:RadCartesianChart id="cartesianChart">
            <chart:RadCartesianChart.series>
                <chart:AreaSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
                    <chart:AreaSeries.horizontalAxis>
                        <chart:CategoricalAxis/>
                    </chart:AreaSeries.horizontalAxis>
                    <chart:AreaSeries.verticalAxis>
                        <chart:LinearAxis />
                    </chart:AreaSeries.verticalAxis>
                </chart:AreaSeries>
            </chart:RadCartesianChart.series>
        </chart:RadCartesianChart>
         
                </GridLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
    </navigation:ExamplePage>
    TypeScript

    import viewModel = require("./getting-started-model");
    import {ObservableArray} from "data/observable-array";
    import {Observable, fromObject} from "data/observable"
     
    export function onPageLoaded(args){
        var page = args.object;
     
        var obsarray = new ObservableArray([
            fromObject({categoricalSource: [
                { 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 }
            ]}),
            fromObject({categoricalSource: [
                { Country: "Germany2", Amount: 15, SecondVal: 14, ThirdVal: 24 },
                { Country: "France2", Amount: 13, SecondVal: 23, ThirdVal: 25 },
                { Country: "Bulgaria2", Amount: 24, SecondVal: 17, ThirdVal: 23 },
                { Country: "Spain2", Amount: 11, SecondVal: 19, ThirdVal: 24 },
                { Country: "USA2", Amount: 18, SecondVal: 8, ThirdVal: 21 }
            ]})
        ])
        page.bindingContext = {dataItems:obsarray};
    }


    Hope this will help.
    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. angus
    angus avatar
    6 posts
    Member since:
    Sep 2012

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

    Hello Nikolay,

    Thanks for your reply.

    I already have a prototype similar to your code (but for angular). My question was more on the skin/theme/css front.

    I was able to disable the labels on both axis using 

    ```

    <LinearAxis tkCartesianVerticalAxis hidden="true"></LinearAxis>
    <SplineAreaSeries tkCartesianSeries [items]=" categoricalSource" categoryProperty="Country"
    valueProperty="Amount"></SplineAreaSeries>```

    leading to a rendering like this : https://www.dropbox.com/s/kmltjczyb0lc5t1/Capture%20d%27%C3%A9cran%202017-10-23%2008.27.50.png?dl=0

    But I'm unable to find a way to display the first number and the last one on the chart itself (cf. my initial post screenshot), as well as putting indicator in the chart.

    Any idea how to achieve this?

    Thanks

     

  4. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    316 posts

    Posted 23 Oct Link to this post

    Hello Angus,

    Thank you for writing us back,
    If I understand you correctly, you would like to display markers inside the Chart component for specific values on the plot. If this is correct, you need to used Chart: Annotations in the component. More about them could be found here in the documentation and also you could review the sample app in this repository.

    Regarding the label in the Chart, there is no functionality which allows showing only a specific label from the chart. Something that I could suggest for this scenario is to use GridLayout, where you could add two Labels for the values and also you could specify their position. For example: 
    <GridLayout rows="" columns="100 * 100" height="300">
    <Label col="0" text="first value"></Label>
    <RadCartesianChart col="1" id="cartesianChart">
    ......
    </RadCartesianChart>
    <Label col="2" text="first value"></Label>
    </GridLayout>


    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. angus
    angus avatar
    6 posts
    Member since:
    Sep 2012

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

    Thanks Nikolay.

    That should do the trick.

    One last question. Is there any css directives permitting to alter the chart?

  6. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    316 posts

    Posted 23 Oct Link to this post

    Hi,


    The properties which are used for the Charts are specific for the component and the appropriate way to set up them is inline in the XML or HTML code as it is shown in the documentation.

    Let me know if I could assist you further.
    Regards,
    nikolay.tsonev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. angus
    angus avatar
    6 posts
    Member since:
    Sep 2012

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

    Thanks for the clarification.
Back to Top