Business

Theming with Picasso.js

Picasso.js is a powerful charting library that plays really well within the Qlik Sense ecosystem to build simple or very complex visualization.By leve... Show More

Picasso.js is a powerful charting library that plays really well within the Qlik Sense ecosystem to build simple or very complex visualization.

By leveraging its component-based nature, you can combine the building blocks to create virtually any type of chart.

To learn more about Picasso.js, I recommend the following resources:

Creating Picasso chart with data from Qlik: https://community.qlik.com/t5/Qlik-Design-Blog/Qlik-Engine-and-Picasso-js/ba-p/1706241
What makes Picasso unique: https://community.qlik.com/t5/Qlik-Design-Blog/Picasso-js-What-separates-it-from-other-visualization-libraries/ba-p/1829951
An advanced chart using Picasso: https://community.qlik.com/t5/Qlik-Design-Blog/Create-a-Slope-chart-with-tooltips-and-brushing-using-Nebula-js/ba-p/1827168

The full documentation of the library can be found on qlik.dev at https://qlik.dev/libraries-and-tools/picassojs. Navigating the documentation is easy, you can dig deeper into the main concepts, learn more about the different types of supported scales, but more importantly discover the different components that you can mix and match to create unique visualizations.

A feature of Picasso that I really like but is not very clear from the docs is Theming.

Picasso.js is themeable meaning that you can easily control the look and feel across all visualizations by creating a theme and changing a few base variables.

To do that, you simply pass in a theme object when instantiating Picasso js as follows:

…
Import picassojs from ‘picasso.js’;
…
  const picasso = picassojs({
    style: {
      '$font-color': '#FF00FF',
      '$font-size': '10px',
      '$font-family': 'Arial',
      '$font-size--l': '16px',
      '$guide-color': '#00FF00',
      '$shape': { // for use with type point component
      fill: '#00FF00',
      strokeWidth: 1,
      stroke: 'rgba(255, 255, 255, 0.2)',
      shape: 'star',
     },
    },
    palettes: [{
      key: 'categorical',
      colors: [
        chroma.bezier(['#00FF00', '#0000FF']).scale().colors(5),
      ],
    }, {
      key: 'sequential',
      colors: [
        ['#00FF00', '#0000FF'],
      ],
    }],
  });

Notice that you can change the labels’ font styling, colors, and even shapes of points (star, triangle, etc..) on the style object, and also pass in a color palette for categorical and sequential color scales.

The result looks like this (the ugly colors are for demo purposes only!)

Below is the complete code of the settings file and attached is the full project to run and edit.

/* eslint-disable no-unused-vars */
import {
  useElement,
  useState,
  useStaleLayout,
  useRect,
  useEffect,
} from '@nebula.js/stardust';
import picassojs from 'picasso.js';
import picassoQ from 'picasso-plugin-q';

import chroma from 'chroma-js';

export default function supernova() {
  const picasso = picassojs({
    style: {
      '$font-color': '#FF00FF',
      '$font-size': '10px',
      '$font-family': 'Arial',
      '$font-size--l': '16px',
      '$guide-color': '#00FF00',
      // $shape: { // for use with type point component
      //   fill: '#00FF00',
      //   strokeWidth: 1,
      //   stroke: 'rgba(255, 255, 255, 0.2)',
      //   shape: 'box',
      // },
    },
    palettes: [{
      key: 'categorical',
      colors: [
        chroma.bezier(['#00FF00', '#0000FF']).scale().colors(5),
      ],
    }, {
      key: 'sequential',
      colors: [
        ['#00FF00', '#0000FF'],
      ],
    }],
  });

  picasso.use(picassoQ);

  return {
    qae: {
      properties: {
        qHyperCubeDef: {
          qDimensions: [],
          qMeasures: [],
          qInitialDataFetch: [{ qWidth: 2, qHeight: 5000 }],
          qSuppressZero: false,
          qSuppressMissing: true,
        },
        showTitles: true,
        title: '',
        subtitle: '',
        footnote: '',
      },
      data: {
        targets: [
          {
            path: '/qHyperCubeDef',
            dimensions: {
              min: 1,
              max: 1,
            },
            measures: {
              min: 1,
              max: 1,
            },
          },
        ],
      },
    },
    component() {
      const element = useElement();
      const layout = useStaleLayout();
      const rect = useRect();

      const [instance, setInstance] = useState();

      useEffect(() => {
        const p = picasso.chart({
          element,
          data: [],
          settings: {},
        });

        setInstance(p);

        return () => {
          p.destroy();
        };
      }, []);

      useEffect(() => {
        if (!instance) {
          return;
        }

        instance.update({
          data: [
            {
              type: 'q',
              key: 'qHyperCube',
              data: layout.qHyperCube,
            },
          ],
          settings: {
            scales: {
              x: {
                data: {
                  extract: {
                    field: 'qDimensionInfo/0',
                  },
                },
              },
              y: {
                data: { field: 'qMeasureInfo/0' },
                invert: true,
                expand: 0.1,
              },
              c: {
                data: { field: 'qMeasureInfo/0' },
                type: 'color',
              },
            },
            components: [
              {
                type: 'axis',
                dock: 'left',
                scale: 'y',
              },
              {
                type: 'axis',
                dock: 'bottom',
                scale: 'x',
                settings: {
                  line: {
                    show: true,
                  },
                },
              },
              {
                type: 'grid-line',
                x: 'x',
                y: 'y',
              },
              {
                key: 'bars',
                type: 'box',
                data: {
                  extract: {
                    field: 'qDimensionInfo/0',
                    props: {
                      start: 0,
                      end: { field: 'qMeasureInfo/0' },
                    },
                  },
                },
                settings: {
                  major: { scale: 'x' },
                  minor: { scale: 'y' },
                  box: {
                    fill: { scale: 'c', ref: 'end' },
                  },
                },
              },
            ],
          },
        });
      }, [layout, instance]);

      useEffect(() => {
        if (!instance) {
          return;
        }
        instance.update();
      }, [rect.width, rect.height, instance]);
    },
  };
}

Show Less

0

2

2091

Japan

【オンデマンド配信】データリテラシーでビジネスを加速：受け身から能動的な分析への移行に不可欠な要件

企業におけるデータの役割が急速に進化し続ける中、データリテラシーはこれまで以上に重要になっています。データリーダーは、受け身の BI モデルからアクティブインテリジェンスへと移行し始めています。リアルタイムのインサイトにアクセスし、迅速な意思決定と情報に基づいたリアルタイムのアクションを起こすには... Show More

企業におけるデータの役割が急速に進化し続ける中、データリテラシーはこれまで以上に重要になっています。データリーダーは、受け身の BI モデルからアクティブインテリジェンスへと移行し始めています。リアルタイムのインサイトにアクセスし、迅速な意思決定と情報に基づいたリアルタイムのアクションを起こすには、能動的な分析への移行が不可欠です。

迅速な意思決定ができていない最大の障壁の 1 つにデータリテラシー不足が挙げられます。つまり、データを読み取り、活用、分析し、データとのコミュニケーションスキルが不足しているのです。かつてないほどデータから得られる機会が増えている今、情報に基づいたアクションを取るためには、必要なスキルアップと文化の変革を早急に検討する必要があります。

本 Web セミナーでは、新着レポート「データリテラシー：スキルアップの革新」の調査結果をはじめ、受け身の分析から能動的な分析に移行して、ビジネスの加速およびデータリテラシーを促進する方法をご紹介します。

能動的な分析への移行におけるデータリテラシーの重要性について、ぜひご確認ください。

※ 参加費無料。パソコン・タブレット・スマートフォンで、どこからでもご視聴いただけます。日本語字幕付きでお届けします。

今すぐ視聴する

Show Less

0

368

Design

Combo Chart extension for Qlik Sense

As we were working on one of our projects, we had the need of creating multiple combo charts. The problem was that we could not change the colors to m... Show More

As we were working on one of our projects, we had the need of creating multiple combo charts. The problem was that we could not change the colors to match our mashup/webpage. So, I decided to make an extension, that gives full control of the chart appearance and it's labels. The same as my Barchart extension this is wrapping text labels underneath the bars. If you still have problems with the text, then just increase the width of the bars and everything should be back in place.

Installation

- [Download zip file](https://github.com/yianni-ververis/SenseUI-ComboChart/archive/master.zip)

- Desktop - Unzip at the extension folder (C:\Users\<user>\Documents\Qlik\Sense\Extensions\SenseUIComboChart)

- Server - Upload the zip file

Usage

Dimensions and Measures

- Set 1 dimension for the x Axis

- Set 1 Measure for an additional Line Chart

General Settings

- Font Size

- Font Color

- Display the Legend

- Enable/Disable Selections

Bar Chart Settings

- Bar Color

- Bar Hover Color

- Bar Width (0 for auto scaling)

- Bar Border Color

- Bar Border Width

Line Chart Settings

- Line Color

- Line Width

- Dot Color

- Dot Stroke Color

- Dot Stroke Width

- Dot Radius

Barnch: http://branch.qlik.com/#!/project/5894e07a75db504d76ac3123

Git: GitHub - yianni-ververis/SenseUI-ComboChart: Qlik Sense Combo Chart

Yianni

Show Less

4

2

8767

Explore Qlik Gallery

Qlik Sense Education and Learning - Project - TC Ice Cream Inc.

The TC Ice Cream Application project provides students a structured approached to learn the basics of Qlik Sense. A variety of visualizations, maste... Show More

The TC Ice Cream Application project provides students a structured approached to learn the basics of Qlik Sense. A variety of visualizations, master dimensions/measures and variable input are topics that are covered within the project.

This video provides an overview of the project:

https://youtu.be/XM1sa_hyRi8

Business Requirements Document:

https://drive.google.com/file/d/1vUNgJQB0ZyJuTzlIBL-T7Q41u4YjbvmN/view

Videos related to the development and functionality of the TC Ice Cream Application can be found on the following You Tube Playlist :

https://www.youtube.com/watch?v=1h_Pvr-aiT4&list=PLl4F1FsqnyHD6Wz9Q63qxqp9EnIpkqfNt

If you have any questions please let me know.

Thanks - Jerry

Show Less

2

4445

Qlik Academic Program

Which Data Literacy persona are you?

Every month our Academic Program team meets with our Educator Ambassadors to get inspired by guest speakers and customer stories or knowledge share an... Show More

Every month our Academic Program team meets with our Educator Ambassadors to get inspired by guest speakers and customer stories or knowledge share and ask questions. Some of our most interesting sessions are those in which our Educator Ambassadors present on how they incorporate the Academic Program into their teaching.

There are a variety of ways in which educators have used our program, from embedding the assessments to including portions of the instructor led training videos in classes. However, it is often the case that students starting the course have different strengths and weaknesses, and varying levels of data literacy. During our meeting last Friday one of our educators explained that his students are required to take a Qlik data literacy assessment before beginning their course, this then helps to him to understand what training and resources could be useful to the students. This level test, our Data Literacy Persona Assessment, is provided for free by Qlik. It can be accessed through our ‘Data Literacy Program’ which you can navigate to inside the ‘Self-Paced Learning’ section.

It can be found at the bottom of the page under the subheading ‘Assessments’, you will then be directed to sign in with your Qlik ID to gain access to the test.

Our Data Literacy Persona test takes minutes, it includes 15 different questions and can be used to assess your current knowledge level and then establish the next steps in your training. Some of the questions are geared towards those already working in industry; however, it is still possible to answer the questions as a student to better understand both knowledge level and attitude. For example, are you a data newcomer? Someone who understands the importance of data but still needs to learn the foundations. This test will help you find that out, and once you have the results, you will be provided with a custom learning plan to help you get started on your journey.

Your learning plan will detail a variety of ways to get started, whether that be content available to you through the Qlik Continues Classroom, interesting YouTube videos or blogs and podcasts. The learning plan is themed around the crucial indicators of data literacy, for example reading, working with, analyzing and communicating with data. It is intended to be done over the course of 8 weeks, giving you optimum time to dip in and out of study when it’s most convenient.

If you have recently gotten access to the Academic Program but you don’t know where to start with all the resources available to you, then understanding your knowledge level with our Data Literacy Persona test could help you take that first step. To understand more about how you can access the test through our Academic Program, go to qlik.com/academicprogram.

Show Less

0

2

1395

Explore Qlik Gallery

Kobe - Basketball Career Highlights

Kobe - Basketball Career Highlights Vizlib The Kobe Bryant app was designed as a tribute to the Black Mamba and his incredible career in the NBA... Show More

Kobe - Basketball Career Highlights

The Kobe Bryant app was designed as a tribute to the Black Mamba and his incredible career in the NBA. Over 20 seasons with the Lakers, he owned the court with his favored shot: the Jump Shot. Analyzing his game is my small way of taking time to respect his work and contributions. Inspired by work from the LA Times. Data from Kaggle.

Discoveries

Out of 30,697 shots, Kobe's favorite type was the jump shot. He was dominant across the entire NBA for 20 seasons. He could score from nearly any position on the half court, and had a number past half court as well.

Impact

Using sports data in this fashion on a scatter plot is applicable to many business use cases where positional data is present. Mapping over top of images like a basketball court, warehouse floorplan, or airport terminals opens up a wide array of possibilities of displaying data in more consumable ways.

Audience

Data geeks, Qlik dorks, and sports nerds will love this branded app.

Data and advanced analytics

Visualizing 30K+ points on a scatter usually yields little insight - but by combining with the basketball court as the background, the data comes to life to tell a story.

Show Less

3

16

5727

Japan

【オンデマンド配信】Qlik Espresso Web セミナーシリーズ

Qlik Espresso Web セミナーシリーズでは、Qlik 製品のプロフェッショナル達が Qlik 製品の簡単な概要、製品デモンストレーション、使用例についてご紹介します。本 Web セミナーは、毎月 1回・最大 30分間の内容でお送りします。コーヒーを飲みながら、短時間でお気軽に参加でき... Show More

Qlik Espresso Web セミナーシリーズでは、Qlik 製品のプロフェッショナル達が Qlik 製品の簡単な概要、製品デモンストレーション、使用例についてご紹介します。
本 Web セミナーは、毎月 1回・最大 30分間の内容でお送りします。

コーヒーを飲みながら、短時間でお気軽に参加できる Web セミナーシリーズです。ぜひ、ご視聴ください。

※ 参加費無料。パソコン・タブレット・スマートフォンで、どこからでもご視聴いただけます。

オンデマンド配信：
データをビジネス成果へ結びつけるデータ活用プラットフォームとは -「目的」ではなく「手段」としてのデータ活用 -

ビジネスにおけるデータ活用。かねてよりその重要性が説かれていましたが、新型コロナウイルスによって加速度を増し、今後ますます重要度が高まっていくと予想されています。リアルタイムなデータのビジネスへの活用が企業の将来を左右する、と言っても過言ではありません。
この講演では、Qlik が掲げるビジョンである「アクティブインテリジェンス」」を具現化するリアルタイムのデータ活用プラットフォームと、その具体例についてご紹介します。

オンデマンド配信：
『DNP の価値創造プロセス』を実現するためのデータ利活用の推進

DNP 様におけるビジネス推進のためのデータ利活用について、インタビュー形式で実際の取り組みを具体的に語っていただきます。ビジネス課題を解決するためのアクションと成果とは？Qlik 導入を機に全社におけるデータ活用への取り組み、今後の展望などを語っていただきます。ぜひ、ご参加ください。

今すぐ視聴する

Show Less

0

445

Explore Qlik Gallery

Self Service Analytics Template

Self Service Analytics Template Imaps Intelligence The purpose of the app is to provide a simple interface for a Business User get an answer abo... Show More

Self Service Analytics Template

The purpose of the app is to provide a simple interface for a Business User get an answer about the data with only 3 clicks.