Liya Gebre

Liya Gebre

1607959200

A Powerful Chart / Graph Plugin, Supporting Line, Bar, Pie, Radar, Bubble

Installation

  • tns plugin add @nativescript-community/ui-chart

Usage

For gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):

import { install } from '@nativescript-community/ui-chart';
install();

You can also check Wiki for any useful material.

Plain NativeScript

IMPORTANT: Make sure you include xmlns:ch="@nativescript-community/ui-chart" on the Page element.

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ch="@nativescript-community/ui-chart">
    <ScrollView>
        <StackLayout>
            <Label text="Line Chart" fontSize="20"/>
            <ch:LineChart id="line-chart" backgroundColor="lightgray" width="300" height="350" loaded="onLineChartLoaded"/>
        </StackLayout>
    </ScrollView>
</Page>

TypeScript

import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

export function onLineChartLoaded(args) {
    const chart = args.object as LineChart;

    chart.setScaleEnabled(true);
    chart.setDragEnabled(true);

    const data = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(data, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

NativeScript + Vue

Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
<LineChart ref="chart" width="300" height="400" @loaded="onChartLoaded"> </LineChart>
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
onChartLoaded() {
    const chart = this.$refs.chart['nativeView'] as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

NativeScript + Angular

Register the element in app.module.ts

registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
<LineChart width="300" height="400" (loaded)="onChartLoaded($event)"> </LineChart>
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
onChartLoaded(args) {
    const chart = args.object as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

About

This plugin is based on MPAndroidChart, a powerful & easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of MPAndroidChart and the rest of his team.

Instead of directly importing existing native libraries, this library has been rewritten in TypeScript, using @nativescript-community/ui-canvas plugin API as a basis. Plugin ‘ui-canvas’ is an extremely powerful tool that converts Android Native Canvas API to a cross-platform API for NativeScript framework. In few words, ‘ui-chart’ has the same code-base for both Android and iOS.

Additionally, @nativescript-community/gesturehandler plugin is used for handling chart gestures.

In short, these are the benefits of rewriting library into a NativeScript plugin:

  • Same codebase for Android and iOS. Makes maintaining the library very easy.
  • Smaller apps size because there are no native libs or native frameworks to consume space. All done with the power of {N}

Originally, the main goal was to prevent the need for marshalling all datasets. This is extremely heavy, costly and unnecessary!

Upon running demo samples, one can conclude it is the fastest drawing library, in comparison to nativescript-ui-chart and nativescript-mpchart.

That is because:

  • It does not marshal or recreate any subset of the data sets, but directly uses the provided array instead
  • It can share the same data array between multiple datasets
  • It can still use the power of native arrays to NOT marshal arrays of positions while drawing lines with @nativescript-community/ui-canvas

Documentation

The NativeScript ‘ui-chart’ plugin is based on the MPAndroidChart library. In few words, its API is identical. The possibility to add API reference will be considered in the future.

Download Details:

Author: nativescript-community

Source Code: https://github.com/nativescript-community/ui-chart

#vue #vuejs #javascript

What is GEEK

Buddha Community

A Powerful Chart / Graph Plugin, Supporting Line, Bar, Pie, Radar, Bubble
Einar  Hintz

Einar Hintz

1593235440

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today’s world. A huge amount of data is being generated and analyzed every day. So communicating the insights from that data becomes crucial. Charts help visualize the data and communicate the result of the analysis with charts, it becomes easy to understand the data.

There are a lot of libraries for angular that can be used to build charts. In this blog, we will look at one such library, NGX-Charts. We will see how to use it in angular and how to build data visualizations.

What we will cover:

  1. Installing ngx-chart.

  2. Building a vertical bar graph.

  3. Building a pie chart.

  4. Building an advanced pie chart.

A brief introduction about NGX-Charts

NGX-Chart charting framework for angular2+. It’s open-source and maintained by Swimlane.

NGX-Charts does not merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functions, scales, axis and shape generators, etc. By having Angular do all of the renderings it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.

NGX-Charts supports various chart types like bar charts, line charts, area charts, pie charts, bubble charts, doughnut charts, gauge charts, heatmap, treemap, and number cards.

Installation and Setup

1. Install the ngx-chart package in your angular app.

npm install @swimlane/ngx-charts --save

2. At the time of installing or when you serve your application is you get an error:

ERROR in The target entry-point "@swimlane/ngx-charts" has missing dependencies: - @angular/cdk/portal

You also need to install angular/cdk

npm install @angular/cdk --save

3. Import NgxChartsModule from ‘ngx-charts’ in AppModule

4. NgxChartModule also requires BrowserAnimationModule. Import is inAppModule.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxChartsModule }from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgxChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Amazing! Now we can start using ngx-chart component and build the graph we want.

In the AppComponent we will provide data that the chart will represent. It’s a sample data for vehicles on the road survey.

#angular #angular 6 #scala #angular #angular 9 #bar chart #charting #charts #d3 charts #data visualisation #ngx #ngx charts #pie

How To Create Dynamic Pie Chart In Laravel 8

Hello Friends,

In this tutorial I will show you how to create dynamic pie chart in laravel 8, Pie charts are use to representing data in graphics view, for creation of dynamic pie chart example you need to create model, controller, route, blade file and database, So if you will follow my tutorial step by step then defiantly you will get output of dynamic pie chart example.

So, let’s start.

How To Create Dynamic Pie Chart In Laravel 8

https://websolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel-8

#how to create dynamic pie chart in laravel 8 #laravel #laravel8 #dynamic pie chart #pie chart #pie chart in laravel 8

Liya Gebre

Liya Gebre

1607959200

A Powerful Chart / Graph Plugin, Supporting Line, Bar, Pie, Radar, Bubble

Installation

  • tns plugin add @nativescript-community/ui-chart

Usage

For gestures to work, make sure to add the following code block inside main application file (e.g. app.ts):

import { install } from '@nativescript-community/ui-chart';
install();

You can also check Wiki for any useful material.

Plain NativeScript

IMPORTANT: Make sure you include xmlns:ch="@nativescript-community/ui-chart" on the Page element.

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ch="@nativescript-community/ui-chart">
    <ScrollView>
        <StackLayout>
            <Label text="Line Chart" fontSize="20"/>
            <ch:LineChart id="line-chart" backgroundColor="lightgray" width="300" height="350" loaded="onLineChartLoaded"/>
        </StackLayout>
    </ScrollView>
</Page>

TypeScript

import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

export function onLineChartLoaded(args) {
    const chart = args.object as LineChart;

    chart.setScaleEnabled(true);
    chart.setDragEnabled(true);

    const data = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(data, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

NativeScript + Vue

Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
<LineChart ref="chart" width="300" height="400" @loaded="onChartLoaded"> </LineChart>
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
onChartLoaded() {
    const chart = this.$refs.chart['nativeView'] as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

NativeScript + Angular

Register the element in app.module.ts

registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart);
<LineChart width="300" height="400" (loaded)="onChartLoaded($event)"> </LineChart>
import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';
onChartLoaded(args) {
    const chart = args.object as LineChart;
    chart.backgroundColor = 'white';

    // enable touch gestures
    chart.setTouchEnabled(true);

    chart.setDrawGridBackground(false);

    // enable scaling and dragging
    chart.setDragEnabled(true);
    chart.setScaleEnabled(true);

    // force pinch zoom along both axis
    chart.setPinchZoom(true);

    // disable dual axis (only use LEFT axis)
    chart.getAxisRight().setEnabled(false);

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.setData(ld);
}

About

This plugin is based on MPAndroidChart, a powerful & easy to use chart library. Therefore, special thanks goes to Philipp Jahoda, the creator of MPAndroidChart and the rest of his team.

Instead of directly importing existing native libraries, this library has been rewritten in TypeScript, using @nativescript-community/ui-canvas plugin API as a basis. Plugin ‘ui-canvas’ is an extremely powerful tool that converts Android Native Canvas API to a cross-platform API for NativeScript framework. In few words, ‘ui-chart’ has the same code-base for both Android and iOS.

Additionally, @nativescript-community/gesturehandler plugin is used for handling chart gestures.

In short, these are the benefits of rewriting library into a NativeScript plugin:

  • Same codebase for Android and iOS. Makes maintaining the library very easy.
  • Smaller apps size because there are no native libs or native frameworks to consume space. All done with the power of {N}

Originally, the main goal was to prevent the need for marshalling all datasets. This is extremely heavy, costly and unnecessary!

Upon running demo samples, one can conclude it is the fastest drawing library, in comparison to nativescript-ui-chart and nativescript-mpchart.

That is because:

  • It does not marshal or recreate any subset of the data sets, but directly uses the provided array instead
  • It can share the same data array between multiple datasets
  • It can still use the power of native arrays to NOT marshal arrays of positions while drawing lines with @nativescript-community/ui-canvas

Documentation

The NativeScript ‘ui-chart’ plugin is based on the MPAndroidChart library. In few words, its API is identical. The possibility to add API reference will be considered in the future.

Download Details:

Author: nativescript-community

Source Code: https://github.com/nativescript-community/ui-chart

#vue #vuejs #javascript

How To Create Dynamic Bar Chart In Laravel

Today I will show you how to create dynamic bar chart in laravel, dynamic bar charts are use to representing data in graphics view, for creation of dynamic bar chart example you need to create route, controller, blade file and database, So if you will follow my tutorial step by step then definitely you will get output.

So, let’s start.

Read More : How To Create Dynamic Bar Chart In Laravel
https://websolutionstuff.com/post/how-to-create-dynamic-bar-chart-in-laravel


Read Also : How To Create Dynamic Pie Chart In Laravel
https://websolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel

Thanks for reading !!

#laravel #dynamic bar chart #bar chart #bar chart in laravel

How To Create Dynamic Pie Chart In Laravel

Today i will show you how to create dynamic pie chart in laravel, charts are use to representing data in graphics view, for creation of dynamic pie chart example you need to create route, controller, blade file and database, So if you will follow my tutorial step by step then definatly you will get output.

So, let’s start.

Read More : https://websolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel


Read Also : Bootstrap Session Timeout Example In Laravel

Thanks For Reading !!

#laravel #pie chart #jquery #chart #php #dynamic pie chart in laravel