Abigail  Cassin

Abigail Cassin

1593220660

Frontend Go — interacting with Graphics and Charts

In previous posts (entry point), I described how it’s possible to use Go for both frontend and backend for a toy application. This initial work was basic and I wanted to delve a little deeper. Here I report on my experience getting a (slightly) more sophisticated frontend operational using Go.

I wanted to have a basic frontend that could display chart(ish) content; initially, I considered using simple graphics as the basis for the charts, based on some observations that this can be easier than working with D3. Subsequently, I considered how interaction with Apache ECharts, a feature-rich Javascript charts library, works from Go. As with the previous posts, the frontend work was all based on .

Adding charts based on SVG

I first checked out how to display SVG content within vectyvecty itself does not (currently) have specific SVG supports, but I found a relatively new Go package— `[nathanhacks/svg] — which focuses on providing SVG support within this context. Using this library, it was possible to generate simple line charts, pie charts and bar charts as can be seen in the video below.

As the library is still new, work is ongoing on maturing the capabilities and interfaces. The library provides basic primitives for interacting with SVG graphics based on the SVG Web API; concepts and API calls defined there map very directly to the library capabilities. One interesting aspect of the SVG model is that there is flexibility on defining which part of the co-ordinate system to display and, indeed, this can be modified dynamically to provide different visual effects such as motion and panning. This means that in principle it is possible to choose arbitrary areas of a plane on which to place the graphic and display it. This was useful when displaying a pie chart: it’s most convenient to work with the part of the plane centred on (0, 0) rather than having this point at the top left of the viewport.

Another issue which was not apparent at the outset —primarily due to my lack of SVG knowledge — was that it has a quite [sophisticated path model]US/docs/Web/SVG/Attribute/d#Path_commands)which is used as the basis for creating all but the simplest shapes: to generate segments of a pie chart, for example, it was necessary to construct a filled path of the correct shape — see below for basic idea.

func renderSector() *vecty.HTML {

  openingAngle=initialPercentage*2*math.Pi
  segmentAngle=additionalPercentage*2*math.Pi
  p := path.MoveTo(0, 0)
  x = float64(rx) * math.Cos(openingAngle)
  y = -float64(ry) * math.Sin(openingAngle)
  p = p.LineTo(x, y)
  closingAngle = openingAngle + segmentAngle
  x = float64(rx) * math.Cos(closingAngle )
  y = -float64(ry) * math.Sin(closingAngle)
  p = p.Arc(rx, ry, 0.0, 0, 0, x, y)
  p = p.ClosePath()
  image := []svg.Component{
    attr.Class("svg-image"),
    attr.Width(300),
    attr.Height(300),
    attr.ViewBox(0, 0, 100, 100),
    attr.Stroke("red"),
    svgelem.Path(attr.Stroke("red"), attr.Fill("red"), attr.D(p)),
   }
  return elem.Div(
    vecty.Markup(
      vecty.Class("chart-panel"),
    ),
    svg.Render(image),
  )
}

#front-end-development #javascript

What is GEEK

Buddha Community

Frontend Go — interacting with Graphics and Charts
Fannie  Zemlak

Fannie Zemlak

1599854400

What's new in the go 1.15

Go announced Go 1.15 version on 11 Aug 2020. Highlighted updates and features include Substantial improvements to the Go linker, Improved allocation for small objects at high core counts, X.509 CommonName deprecation, GOPROXY supports skipping proxies that return errors, New embedded tzdata package, Several Core Library improvements and more.

As Go promise for maintaining backward compatibility. After upgrading to the latest Go 1.15 version, almost all existing Golang applications or programs continue to compile and run as older Golang version.

#go #golang #go 1.15 #go features #go improvement #go package #go new features

Hire Frontend Developers

Create a new web app or revamp your existing website?

Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence. Hence, to build a visually appealing web app front-end development is required.

At HourlyDeveloper.io, you can Hire FrontEnd Developers as we have been actively working on new frontend development as well as frontend re-engineering projects from older technologies to newer.

Consult with experts: https://bit.ly/2YLhmFZ

#hire frontend developers #frontend developers #frontend development company #frontend development services #frontend development #frontend

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

Arun A

1622790351

Blazor Charts Component | Interactive Live Charts | Syncfusion

Blazor Charts is a well-crafted charting component to visualize data. It contains a rich UI gallery of 30+ charts and graphs, ranging from line to financial that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also comes with features such as zooming, panning, tooltip, crosshair, trackball, highlight, and selection.

#charts #blazor #best #interactive charts #chart types

Go-chart: A Basic Charting Library in Go

go-chart

Package chart is a very simple golang native charting library that supports timeseries and continuous line charts.

Master should now be on the v3.x codebase, which overhauls the api significantly. Per usual, see examples for more information.

Installation

To install chart run the following:

> go get -u github.com/wcharczuk/go-chart

Most of the components are interchangeable so feel free to crib whatever you want.

Output Examples

Spark Lines:

Single axis:

Two axis:

Other Chart Types

Pie Chart:

The code for this chart can be found in examples/pie_chart/main.go.

Stacked Bar:

The code for this chart can be found in examples/stacked_bar/main.go.

Code Examples

Actual chart configurations and examples can be found in the ./examples/ directory. They are simple CLI programs that write to output.png (they are also updated with go generate.

Usage

Everything starts with the chart.Chart object. The bare minimum to draw a chart would be the following:


import (
    ...
    "bytes"
    ...
    "github.com/wcharczuk/go-chart" //exposes "chart"
)

graph := chart.Chart{
    Series: []chart.Series{
        chart.ContinuousSeries{
            XValues: []float64{1.0, 2.0, 3.0, 4.0},
            YValues: []float64{1.0, 2.0, 3.0, 4.0},
        },
    },
}

buffer := bytes.NewBuffer([]byte{})
err := graph.Render(chart.PNG, buffer)

Explanation of the above: A chart can have many Series, a Series is a collection of things that need to be drawn according to the X range and the Y range(s).

Here, we have a single series with x range values as float64s, rendered to a PNG. Note; we can pass any type of io.Writer into Render(...), meaning that we can render the chart to a file or a resonse or anything else that implements io.Writer.

API Overview

Everything on the chart.Chart object has defaults that can be overriden. Whenever a developer sets a property on the chart object, it is to be assumed that value will be used instead of the default.

The best way to see the api in action is to look at the examples in the ./_examples/ directory.

Design Philosophy

I wanted to make a charting library that used only native golang, that could be stood up on a server (i.e. it had built in fonts).

The goal with the API itself is to have the "zero value be useful", and to require the user to not code more than they absolutely needed.

Contributions

Contributions are welcome though this library is in a holding pattern for the forseable future.

Download Details:

Author: wcharczuk
Source Code: https://github.com/wcharczuk/go-chart 
License: MIT license

#go #golang #chart #svg