FILL UP MY CHART

FILL UP MY CHART

PUT SOME DATA

IN IT!

new phone, who dis?

tara z manicsic

developer advocate

PROGRESS

@tzmanics

github.com/tzmanics

what are we all doing here?

what  why  who  how

no, no, i mean in this session

what  

  • creating data visualizations

  • binding an array of data

  • using 2-way binding w/ user input

  • binding live data

why  

basically, there's a lot of data out there & we don't always attain it the same way

who  

...is this session for?

  • anyone who wants to learn how to share their data

  • familiarity with Angular helps but this can also be your glimpse into the Angular world 😘

how  

  • app created using the Angular CLI (@angular/cli)

  • chart components made using Kendo UI for Angular

  • grabbing data from Google Trends, input components & GitHub

npm i @angular/cli -g
ng new fill-up-my-chart

install the Angular CLI

create your project

npm install --save @progress/kendo-angular-charts

Chart Components

using Kendo UI for Angular

Kendo UI

Angular

  • high-performance Angular UI components without any jQuery dependencies
  • easy to implement: install, import, inlcude
  • take full advantage of the framework’s native performance capabilities like Ahead of Time Compilation (AOT), Angular Universal, and Tree Shaking

swimming in series types

Categorical

area & verticalArea + stacked

bar & column + stacked

box plot

bullet

line & vertical line

radar

rangeBar

waterfall

Scatter

scatterLine

scatterArea

bubble

polar

Circular

pie

donut

Freeform

funnel

Sparkline Charts 😍

graphojis

installing & importing

npm install --save @progress/kendo-angular-charts @progress/kendo-angular-intl @progress/kendo-drawing hammerjs
[data]="item.data"

one-way binding

[

]

property binding

src/app/app.module.html

[

]

[(ngModel)] = "puppyInput"

two-way binding

[(

)]

<input [value] = "puppyInput"

(input) = "puppyInput" = $event.target.value">

two-way binding

[(

)]

[(ngModel)]="puppyInput"
[(ngModel)] ="puppyInput"

two-way binding

[(

)]

event & property binding

[(

)]

binding to live data

https://github.com/telerik/ng2-dashboard

[

]

still just binding the data property

observables

http://developer.telerik.com/

GitHub Service

THANK YOU!

tara z manicsic

developer advocate

PROGRESS

@tzmanics

github.com/tzmanics

https://slides.com/tzmanics/fill-up-my-chart

🎶 Fill Up My Chart, Put Some Data In It 🎶

By Tara Z. Manicsic

🎶 Fill Up My Chart, Put Some Data In It 🎶

You have the data, now how do you feed it to a chart so that you can actually see what the data means? In this talk we'll write the code to go from data source to visualization with three different strategies: from a file, from user input (using two-way data binding & from a live data source that's ever-changing. We live in a world with a ridiculous amount of data, let's use it!

  • 2,088