How to visualize sketched charts in Vue.js using RoughViz

introduce

A chart is a graphical representation of data used to make a data set easier to read and to make it easy to distinguish between its parts. While most users are used to seeing clean and formal diagrams, some users prefer to see hand-drawn or sketched diagrams, which is where roughViz comes in.

roughViz is a JavaScript library based on D3.js and Rough.js. The library is designed to help build diagrams that look like sketches or hand drawings, like the example below.

In this guide, you'll learn how to use vue-roughviz to display sketch-like diagrams in your Vue.js applications, and how to configure your Vue applications using vue-cli.

Prerequisites

This tutorial assumes that the following prerequisites are met:

• Basic understanding of Vue.js
• A local development environment for Node.js and familiarity with the Node package manager (npm)
• A text editor such as Visual Studio Code or Atom
  

start

If you don’t have vue-cli installed yet, run the following command to install the latest version.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Now, create a new vue application:

vue create my-app

Note: This process may take several minutes. Once that's done, we can move into our new application root directory:

cd my-app

The process described in detail above creates a new Vue.js application. To make sure everything is set up, run npm run serve . When you visit http://localhost:8080, you should see “Welcome to Your Vue.js app page” in your browser.

Add vue-roughviz

vue-roughviz is a Vue.js wrapper for RoughViz.js. This makes the library accessible as a component, allowing for seamless reuse in Vue.js based projects.

To include vue-roughviz in our project, run:

npm install vue-roughviz

vue-roughViz component

vue-roughviz provides all rawViz chart style components, including:

• roughBar——rawViz bar chart component
• roughBarH——roughViz horizontal bar chart component
• roughDonut——roughViz donut chart component
• roughPie——roughViz pie chart
• roughLine——roughViz line chart component
• roughScatter——roughViz scatter chart component
• roughStackedBar——roughViz stacked bar chart component
  

use

After adding vue-roughviz to your project, the next step is to open the project folder in your preferred text editor.

When you open the src/App.vue file, the initial content should look similar to the following:

If your view looks like the above, go ahead and delete all of its contents and replace it with the following code:

<template>
 
 <div id="app">
  
 <rough-bar :data="{
    labels: ['North', 'South', 'East', 'West'],
    values: [10, 5, 8, 3],
   }" title="Regions" roughness="8" :colors="['red', 'orange', 'blue', 'skyblue']" stroke="black" stroke-width="3" fill-style="cross-hatch" fill-weight="3.5" />
 
 </div>

</template>

Code Description

• import ... — This line of code imports the rawBar component from the vue-roughviz we installed earlier.
• export default {} — This block is to make the previously imported component (roughBar) available in our application.
• <rough-bar :data="[...]" /> — This is where we call the outer rawBar component, the properties specified in these components are required props.
  

vue-roughviz props

The only required prop is data, which is the data used to construct the chart. This can be a string or an object.

If an object is selected, it must contain labels and values ​​keys. If a string is used instead, the string must be the URL of a csv or tsv file. In this file, you must also specify labels and values ​​as separate attributes representing each column.

Other useful props include:

1. title - specifies the chart title
2. Roughness - the level of roughness of the chart
3. stroke——the color of the bar stroke
4. stroke-width
5. fill-weight – specifies the thickness of the inner path color.
6. fill-style——Bar fill style, can be one of the following:

• dashed
• solid
• zigzag-line
• cross-hatch
• hachure
• zigzag

run

To preview our application, run npm run serve. If you followed the above steps correctly, accessing http://localhost:8080 should allow you to view the graph displayed in your browser.

Loading data from external API

Let's do a little experiment and display the last 10 days of Bitcoin's price history in our chart. In this experiment, we will use the Coingecko API.

Why choose Coingecko? Unlike other cryptocurrency APIs, Coingecko is free and does not require an API key to get started, which is ideal for our experiments.

Go ahead and replace src/App.vue with the following code

<template>
 
 <div id="app">
  
 <div>
   
  <rough-bar v-if="chartValue.length > 0" :data="{
     labels: chartLabel,
     values: chartValue,
    }" title="BTC - 10 Days" roughness="3" stroke="black" stroke-width="1" fill-style="zig-zag" fill-weight="2" />
  
 </div>
 
 </div>

</template>

We create an asynchronous method loadData() that fetches the Bitcoin price history from the coingecko API and loops through the returned data. We separate the date from the price and use the returned dates as chart labels and the prices as chart values. And beforeMount(), that is, before our application is mounted to the view, we call the loadData() function created earlier.

Running our application, you should see the new changes to our graph as follows:

The above is the details of how to use RoughViz to visualize sketch charts in Vue.js. For more information about RoughViz visualization of sketch charts in Vue.js, please pay attention to other related articles on 123WORDPRESS.COM!