sparklines

[angus]

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.

[Nikolay Tsonev]

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

[angus]

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

 

[Nikolay Tsonev]

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

[angus]

Thanks Nikolay.

That should do the trick.

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

[Nikolay Tsonev]

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

[angus]

Thanks for the clarification.