July 2020 Summaries

Highcharts, initially created as a simple charting tool for monitoring snow depth, has evolved into a popular visualization library known for its interactive features and ease of use. This tutorial demonstrates how to build an e-commerce dashboard using Cube.js and Highcharts, incorporating various Highcharts modules such as Maps, Stock, and Solid Gauge. Despite some parts being outdated, the guide outlines the process of setting up a PostgreSQL database with Cube.js as the backend and creating a React-based frontend application. It explains the use of Cube's data schema for multidimensional analysis and guides users through the steps of generating and configuring the necessary components. The tutorial also explains how to use the Highcharts API for rendering charts, with a focus on setting static chart options, adding data, and passing it to the Highcharts component. The complete source code and a live demo are available online for further exploration.

The text explains how to create a custom query builder using Cube client libraries in Vue.js, building on a previous tutorial for React. It describes how developers can leverage the scoped slots technique to implement their own render logic, offering flexibility in creating a tailored UI with a minimal API. The tutorial guides users through setting up a demo backend with Cube, using a PostgreSQL database, and configuring the environment. It then details how to set up a Vue project with Vuetify for UI components, and how to incorporate Cube Vue client, Vue Chartkick, and Chart.js for rendering data visualizations. The tutorial demonstrates creating a simple query builder that allows users to select metrics and dimensions for grouping, culminating in a functional application where users can test their queries and visualizations. Additional features such as filters, date ranges, and chart type selectors are highlighted, with references to further examples and source code available on Github, encouraging user feedback through a Slack Community.