Skip to content

Commit

Permalink
Preparing for releasing 3.8 version
Browse files Browse the repository at this point in the history
- Creating website versioned docs the version
- Bumping lightweight-charts version on the website

At this stage it won't be possible to build a website until the package will be published though.
But this-is-fine.png
  • Loading branch information
timocov committed Feb 17, 2022
1 parent ad277c6 commit 8e14f59
Show file tree
Hide file tree
Showing 12 changed files with 976 additions and 1 deletion.
2 changes: 1 addition & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@tsconfig/docusaurus": "~1.0.4",
"cross-env": "~7.0.3",
"docusaurus-plugin-typedoc": "0.16.7",
"lightweight-charts": "~3.7.0",
"lightweight-charts": "~3.8.0",
"prism-react-renderer": "~1.2.1",
"raw-loader": "~4.0.2",
"react": "~17.0.1",
Expand Down
119 changes: 119 additions & 0 deletions website/versioned_docs/version-3.8/android.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
---
id: android
description: You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
keywords:
- charts
- android
- canvas
- charting library
- charting
- html5 charts
- financial charting library
sidebar_position: 7
---

# Android wrapper

:::note
You can find the source code of the Lightweight Charts Android wrapper in [this repository](https://github.com/tradingview/lightweight-charts-android).
:::

You can use Lightweight Charts inside an Android application. To use Lightweight Charts in that context, you can use our Android wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.

## Installation

:::info
Requires minSdkVersion 21, and installed WebView with support of ES6
:::

In `/build.gradle`

```groovy
allprojects {
repositories {
google()
mavenCentral()
}
}
```

In `/gradle_module/build.gradle`

```groovy
dependencies {
//...
implementation 'com.tradingview:lightweightcharts:3.7.0'
}
```

## Usage

Add view to the layout.

```xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.tradingview.lightweightcharts.view.ChartsView
android:id="@+id/charts_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

Configure the chart layout.

```kotlin
charts_view.api.applyOptions {
layout = layoutOptions {
backgroundColor = Color.LTGRAY.toIntColor()
textColor = Color.BLACK.toIntColor()
}
localization = localizationOptions {
locale = "ru-RU"
priceFormatter = PriceFormatter(template = "{price:#2:#3}$")
timeFormatter = TimeFormatter(
locale = "ru-RU",
dateTimeFormat = DateTimeFormat.DATE_TIME
)
}
}
```

Add any series to the chart and store a reference to it.

```kotlin
lateinit var histogramSeries: SeriesApi
charts_view.api.addHistogramSeries(
onSeriesCreated = { series ->
histogramSeries = series
}
)
```

Add data to the series.

```kotlin
val data = listOf(
HistogramData(Time.BusinessDay(2019, 6, 11), 40.01f),
HistogramData(Time.BusinessDay(2019, 6, 12), 52.38f),
HistogramData(Time.BusinessDay(2019, 6, 13), 36.30f),
HistogramData(Time.BusinessDay(2019, 6, 14), 34.48f),
WhitespaceData(Time.BusinessDay(2019, 6, 15)),
WhitespaceData(Time.BusinessDay(2019, 6, 16)),
HistogramData(Time.BusinessDay(2019, 6, 17), 41.50f),
HistogramData(Time.BusinessDay(2019, 6, 18), 34.82f)
)
histogramSeries.setData(data)
```

## How to run the provided example

The [GitHub repository](https://github.com/tradingview/lightweight-charts-android) for lightweight-charts-android contains an example of the library in action.
You can run the example (LighweightCharts.app) by cloning the repository and opening it in Android Studio. You will need to have [NodeJS/NPM](https://nodejs.org/) installed.
159 changes: 159 additions & 0 deletions website/versioned_docs/version-3.8/intro.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
---
slug: /
id: intro
sidebar_position: 0
---

# Getting started

## Installation

The first thing you need to do to use `lightweight-charts` is to install it from [npm](https://www.npmjs.com/):

```console
npm install --save lightweight-charts
```

_Note that the package is shipped with TypeScript declarations, so you can easily use it within TypeScript code._

## Creating a chart

Once the library has been installed in your repo you're ready to create your first chart.

First of all, in a file where you would like to create a chart you need to import the library:

```js
import { createChart } from 'lightweight-charts';
```

[`createChart`](/api/index.md#createchart) is the entry-point for creating charts. You can use it to create as many charts as you need:

```js
import { createChart } from 'lightweight-charts';

// ...

// somewhere in your code
const firstChart = createChart(firstContainer);
const secondChart = createChart(secondContainer);
```

The result of this function is a [`IChartApi`](/api/interfaces/IChartApi.md) object, which you need to use to work with a chart instance.

## Creating a series

Once your chart is created it is ready to display data.

The basic primitive to display a data is [a series](/api/interfaces/ISeriesApi.md).
There are different types of series:

- Area
- Bar
- Baseline
- Candlestick
- Histogram
- Line

To create a series with desired type you need to use appropriate method from [`IChartApi`](/api/interfaces/IChartApi.md).
All of them have the same naming `add<type>Series`, where `<type>` is a type of a series you'd like to create:

```js
import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
const barSeries = chart.addBarSeries();
const baselineSeries = chart.addBaselineSeries();
// ... and so on
```

Please look at [this page](/series-types.md) for more information about different series types.

Note that **a series cannot be transferred from one type to another one** since different series types have different data and options types.

## Setting and updating a data

Once your chart and series are created it's time to set data to the series.

Note that regardless of the series type, the API calls are the same (the type of the data might be different though).

### Setting the data to a series

To set the data (or to replace all data items) to a series you need to use [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) method:

```js
import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
areaSeries.setData([
{ time: '2018-12-22', value: 32.51 },
{ time: '2018-12-23', value: 31.11 },
{ time: '2018-12-24', value: 27.02 },
{ time: '2018-12-25', value: 27.32 },
{ time: '2018-12-26', value: 25.17 },
{ time: '2018-12-27', value: 28.89 },
{ time: '2018-12-28', value: 25.46 },
{ time: '2018-12-29', value: 23.92 },
{ time: '2018-12-30', value: 22.68 },
{ time: '2018-12-31', value: 22.67 },
]);

const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
{ time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);
```

It's pretty easy, isn't it? That's it, your chart is ready to be displayed on the page:

![First simple chart](/img/first-chart.png "First simple chart")

### Updating the data in a series

In a case when your data is updated (e.g. real-time updates) you might want to update the chart as well.

But using [`ISeriesApi.setData`](/api/interfaces/ISeriesApi.md#setdata) very often might affect the performance and we do not recommend to do this.
Also it replaces all series data with the new one, and probably this is not what you're looking for.

Thus, to update the data you can use a method [`ISeriesApi.update`](/api/interfaces/ISeriesApi.md#update).
It allows you to update the last data item or add a new one much faster without affecting the performance:

```js
import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
areaSeries.setData([
// ... other data items
{ time: '2018-12-31', value: 22.67 },
]);

const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
// ... other data items
{ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

// sometime later

// update the most recent bar
areaSeries.update({ time: '2018-12-31', value: 25 });
candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });

// creating the new bar
areaSeries.update({ time: '2019-01-01', value: 20 });
candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 });
```
100 changes: 100 additions & 0 deletions website/versioned_docs/version-3.8/ios.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
id: ios
description: You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.
keywords:
- charts
- iOS
- canvas
- charting library
- charting
- html5 charts
- financial charting library
sidebar_position: 6
---

# iOS wrapper

:::note
You can find the source code of the Lightweight Charts iOS wrapper in [this repository](https://github.com/tradingview/LightweightChartsIOS).
:::

You can use Lightweight Charts inside an iOS application. To use Lightweight Charts in that context, you can use our iOS wrapper, which will allow you to interact with lightweight charts library, which will be rendered in a web view.

## Installation

:::info
Requires iOS 10.0+
:::

### CocoaPods

[CocoaPods](https://cocoapods.org) is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate LightweightCharts into your Xcode project using CocoaPods, specify it in your `Podfile`:

```ruby
pod 'LightweightCharts', '~> 3.7.0'
```

### Swift Package Manager

The [Swift Package Manager](https://swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the `swift` compiler.

Once you have your Swift package set up, adding LightweightCharts as a dependency is as easy as adding it to the `dependencies` value of your `Package.swift`.

```swift
dependencies: [
.package(url: "https://github.com/tradingview/LightweightChartsIOS", .upToNextMajor(from: "3.7.0"))
]
```

## Usage

Once the library has been installed in your repo, you're ready to create your first chart.

First of all, in a file where you would like to create a chart, you need to import the library:

```swift
import LightweightCharts
```

Create instance of LightweightCharts, which is a subclass of UIView, and add it to your view.

```swift
var chart: LightweightCharts!

// ...
chart = LightweightCharts()
view.addSubview(chart)
// ... setup layout
```

Add any series to the chart and store a reference to it.

```swift
var series: BarSeries!

// ...
series = chart.addBarSeries(options: nil)
```

Add data to the series.

```swift
let data = [
BarData(time: .string("2018-10-19"), open: 180.34, high: 180.99, low: 178.57, close: 179.85),
BarData(time: .string("2018-10-22"), open: 180.82, high: 181.40, low: 177.56, close: 178.75),
BarData(time: .string("2018-10-23"), open: 175.77, high: 179.49, low: 175.44, close: 178.53),
BarData(time: .string("2018-10-24"), open: 178.58, high: 182.37, low: 176.31, close: 176.97),
BarData(time: .string("2018-10-25"), open: 177.52, high: 180.50, low: 176.83, close: 179.07)
]

// ...
series.setData(data: data)
```

## How to run the provided example

The [GitHub repository](https://github.com/tradingview/LightweightChartsIOS) for LightweightChartsIOS contains an example of the library in action. To run the example, start by cloning the repository, go to the _Example_ directory, and then run

```sh
pod install
```
2 changes: 2 additions & 0 deletions website/versioned_docs/version-3.8/migrations/_category_.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
label: "Migration guides"
position: 5

0 comments on commit 8e14f59

Please sign in to comment.