KPI and Chart Libary

Present the 3 following points:
What is KPI
Chart libraries - make it easy to check KPI
The issue I faced in the project when using a chart library

Transcript

1. KPI and Chart library Emi Yaegashi Try English LT #3 (2019.11.28)
2. About me • Name: Emi Yaegashi • Softwere Engineer (Python, Rails, Angular) • Twitter: @yae19921110 • Organizer of We are Javascripters! *Find a venue for events.
3. Agenda • What is KPI • Chart libraries - make it easy to check KPI • The issue I faced in the project when using a chart library
4. What is KPI
5. KPI (Key Performance Indicator) • KPI is a measurable value that demonstrates how effectively a company is achieving key business objectives. →KPI is used to check the achievement and the progress to the goal from the current status. [example] Blog: The number of viewer EC site: Conversion rate Diet: Weigh every day
6. Chat libraries - make it easy to check KPI
7. • Chart.js https://www.chartjs.org/ • Highchart.js https://www.highcharts.com/ • D3.js https://d3js.org/ Chart Libraries
8. Chart.js • Configuration is simple. • Chart functions are also simple. (It’s easiest for beginners in 3 chart libraries.) • A lot of Demo for each chart. https://www.chartjs.org/samples/latest/ • Libraries for each JS framework is prepared.
9. Highchart.js • There are a free version and a paid version. • The configuration is a little bit complicated because it has more functions than Chart.js. • A lot of Demo for each chart same as Chart.js. https://www.highcharts.com/demo • Many kind of charts is prepared. (e.g.: stock Chart, heatmap) • Libraries for each JS framework is prepared.
10. D3.js • The configuration is the most complicated in 3 chart libraries. (you can customize the detail of charts, such as scaling, axes, grid, label..etc) • The most kinds of charts is prepared in 3 chart libraries. https://github.com/d3/d3/wiki/Gallery • Libraries for React and Angular are prepared and some charts aren’t covered in ones. (mentioned in next slide.)
11. The issue I faced in the project when using a chart library
12. The issue I faced in the project (Angular) 1. I needed to draw Radar Chart with D3 library for Angular (Angular-nvD3) 2. Basic charts such as Bar charts and Line charts were covered, but Radar Chart wasn't covered. 3. I searched some js libraries and investigated the feasibility. (It takes 1 week to find good one.) I again realized… It’s important to consider the compatibility between a project (JS framework) and the libraries which you want to use.
13. Summary • KPI KPI is a measurable value that demonstrates how effectively a company is achieving key business objectives. • Chart Libraries features You need to draw just simple chart -> ChartJS You need to complicated chart -> Highchart.js or D3.js • The importance when choosing libraries (Not only for Chart libraries) Check 2 points: (1) easy to use ones in your project (2) Compatibility between libraries and your project
14. Thank you for listening! Next time, I’d like to compare and show the best chart libraries for each JS framework.
15. • Chart.js https://eyaegashi.github.io/demo_chart/chart/chart.html • Highchart.js https://eyaegashi.github.io/demo_chart/chart/highchart.html • D3.js https://eyaegashi.github.io/demo_chart/chart/d3.html Sample Page URL