🚀 New WebDataRocks v. 1.4.Check it out!

Browser compatibility

This page contains information about browser versions that WebDataRocks requires.

Starting from version 1.4, WebDataRocks follows the ES6 standard. Hence, the component will work correctly only in browser versions that fully support ES6. You can find these versions in the below table:

BrowserVersion
Chrome51+
Firefox54+
Microsoft Edge15-18, 79+
Opera 38+
Safari 10+
iOS Safari 10+
Internet ExplorerNot supported

Being a successful and competitive developer means always stay aware of the latest updates in your working field. It is equally important to deepen your knowledge and skills according to those updates, too. However, may you not be afraid of this!

Fortunately, we have the Internet to help us accomplish the task of self-education. So, especially for this aim, we’ve prepared a collection of blogs and resources coming handy for people engaged in IT. With such a set, you can be sure that you’re moving with the times!

Resources

SitePoint

Web developers and designers will undoubtedly profit from reading it! The website is self-described as a platform “for web professionals, by web professionals,” so if you categorize yourself as a web-connected person (or desire to become so) – welcome to SitePoint.

You can find here everything you want to know about web-development and even more. Site navigation includes a blog with related articles along with a library containing a good deal of books and online courses.

You may also like: SitePoint has its own forum where you can communicate with like-minded people. Just for fun or to find something out – depends on your choice.

Link: https://www.sitepoint.com/

Smashing Magazine

Do you think that one news website is not enough? Then here’s another publishing resource for you to know the latest trends in web development.

Technical specialists will be interested in reading about JavaScript, frameworks, and software development for mobile platforms. Designers and illustrators can find plenty of articles concerning their field as well.

Additionally, Smashing Magazine offers a collection of books (by the way, paper ones too!).

You may also like: As a nice bonus, the site has blocks with events and job vacancies.

Link: https://www.smashingmagazine.com/

Level Up Coding by GitConnected

One more handy recourse for your consideration. Though it looks like Level Up Coding is generally web-oriented, you can find there amazing articles on other topics, e.g. about work time organizing.

Returning to the web development, notice that the website has lots of information concerning web programming tools. I can also mention articles reviewing the functionality of different frameworks, for instance, React and Vue. Since it’s essential to have a strong knowledge of frameworks, those articles will become beneficial to web developers.

You may also like: Level Up Coding suggests you a special API for creating and editing your developer’s portfolio. The main convenience of this API is that you can share it on various websites and then automatically update on all of them! Visit this page to learn more.

Link: https://levelup.gitconnected.com/

StackExchange

This sounds familiar, doesn’t it? Yes, maybe you’ve thought of StackOverflow. For the record, it is StackExchange’s most viewed and famous “child”. Except for this popular website, StackExchange also hosts many other ones.

Being a network of Q&A websites, it presents you a great variety of communities for every taste: mathematics, web applications, game development, and many others. Thus, if you got stuck with some naughty problem, you can boldly go to StackExchange to ask a question. Be sure that professionals and enthusiasts dwelling on there will help you.

Link: https://stackexchange.com/

GeeksforGeeks

GeeksforGeeks is just a treasure chest for a programmer! With the help of numerous tutorials, you may improve your algorithms understanding, start learning some programming languages, as well as get acquainted with new technologies.

Already feeling assured concerning some topics? In this case, you can share your insights with less skilled technicians.

In a word, GeeksforGeeks is a place to go for people involved in IT.

You may also like: Those yearning to get a job will benefit from a collection of interview questions from different companies such as Amazon or Microsoft.

Link: https://www.geeksforgeeks.org/

Reddit for Developers

As humans must be a part of a community, you can’t just stay beside and read all those fancy programming articles alone. So, the best website to discuss the latest development trends, technical news, any other developers’ issue is… Of course, Reddit for developers!

Make a new exciting post, gather a bunch of comments, and find people with the same interests. This really makes sense: while learning something new and useful to you, you also build an active community ready to interact.

Let me give you a little piece of advice: visit all of dedicated to programming subreddits. To stay as much informed as possible, of course.

Links:

WebsiteSetup

WebsiteSetup.org is a free online resource for learning web development, design and WordPress. It helps people create, customize and improve their websites.

They have more than 80 up-to-date guides, tutorials, and comparisons about CMS platforms, website builders and all sorts of awesome stuff related to web development.

Link: https://websitesetup.org

Blogs

Joel on Software

Joel Spolsky is a co-founder of StackOverflow, former Microsoft program manager, and just a qualified software engineer. Joel’s been into the IT field for almost 30 years now, so he definitely has what to tell you about programming.

Joel’s posts are generally focused on software development, management, and business. Believing his own statistics, Joel’s written about 1444 articles. Enormous number! So, to gain so much useful experience from this knowledgeable man, visit his blog and pick any piece.

Link: https://www.joelonsoftware.com/

David Walsh Blog

David Walsh is a senior software developer for Mozilla and a person expertized in front-end technologies. Therefore, his blog covers subjects directly connected to websites. There you can find excellent articles about CSS, JavaScript, and so on.

David also has a pretty lovely philosophy on learning web technologies: experiment, fail, fix, fail again, fix again, and never give up. As you can notice, this approach can be easily applied to any other educational process.

All the mentioned, as well as David’s focus on open source contributing, make this blog especially an outstanding one.

Link: https://davidwalsh.name/

Overreacted

Greet another prominent person in our list! Dan Abramov is a co-creator of the Redux library for JavaScript working in the Facebook company. As he is also a part of the React team, Dan likes to write about this product (and knows what to tell you, too). Furthermore, even his blog is built with React!

A year ago, Dan Abramov moved from Medium to his own blog, where the time of reading a post is measured in cups of coffee.

This blog isn’t a resource to look through and get informed about the latest news in the IT world. It’s more of a blog for pleasure. After all, it is the feeling you have while reading notes of a person who loves his job, his blog, and is in the right place.

Link: https://overreacted.io/

Robin Wieruch

That’s a blog to enhance your web-development skills! It’s author, Robin Wieruch, is a self-employed programmer, who’s fond of JavaScript. Robin now teaches JS to people through his books and online courses (which can be found on his website) and also provides on-site consulting to companies.

In the blog, Robin writes about everything from tutorials for beginners to Machine Learning in JavaScript.

Many experts in programming, such as already mentioned Dan Abramov, say that Robin offers the content of high quality. For our part, we suggest you check on your own whether that blog is really so useful! Be sure you’ll find lots of exciting stuff to learn there.

Link: https://www.robinwieruch.de/


Oh, one more thing. In case you’re interested not only in reading the news but also studying some topics intensely, consider visiting Coursera. This popular online learning platform suggests lots of high-quality courses in IT.

Moreover, if your field of interest is web development – you are lucky! Especially for you, we made a list of best free online courses for web developers. Enjoy!

If you are already confident in your knowledge and abilities and are looking for an interesting project, then you can find good web developer vacancies on the Jooble.

We made this compilation of resources to save your time and give you additional skills. News websites, a variety of tutorials and online courses, educational blogs – all of this don’t leave you a chance to stay unaware. So, no excuses – just go, read, and do.

This guide will walk you through the process of integrating WebDataRocks with Vue.js.

Prerequisites

Before starting, make sure that Node.js and npm are installed on your machine. 

Next, choose one of the following guides:

  1. Run the sample Vue 2 project from GitHub
  2. Integrate WebDataRocks into a Vue 2 project
  3. Integrate WebDataRocks into a Vue 3 project

Run the sample Vue 2 project from GitHub

Step 1. Download or clone the sample project from GitHub:

git clone https://github.com/WebDataRocks/pivot-vue
cd pivot-vue

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run the project:

npm run serve

The sample project will be available at http://localhost:8080/.

You can shut down the app with Ctrl + C.

Integrate WebDataRocks into a Vue 2 project

The below guidelines describe how to integrate WebDataRocks with Vue 2. If you’re interested in integrating with Vue 3, see this guide: Integrate WebDataRocks into a Vue 3 project.

Step 1. Install the Vue CLI by running the following command:

npm install -g @vue/cli

Skip this step if the Vue CLI is already installed. 

Step 2. Unless you already have the Vue project, create one with the following command:

vue create project-name
cd project-name

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 2 preset.

Step 3. Get the WebDataRocks Vue module from npm:

npm install vue-webdatarocks

Step 4. Register WebDataRocks in your Vue project using one of the following approaches:

  • Register globally in the src/main.js file:
    // other imports
    import Pivot from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';


    Vue.use(Pivot);
    //other code
  • Register locally in the component where you need the pivot table (e.g., src/App.vue):
    <script> 
    import {Pivot} from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';


    // Define WebDataRocks in the list of components
    export default {
    name: 'app',
    components: {
    Pivot,
    }
    }
    </script>

Step 5. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):

<template>
    <div id="app">
        <WebDataRocks
         report="https://cdn.webdatarocks.com/reports/report.json"
         toolbar>
        </WebDataRocks>
    </div>
</template>

Note that the <template> tag must contain only one root <div> element.

Step 6. Run your app:

npm run serve

Your WebDataRocks & Vue 2 project will be available at http://localhost:8080/.

You can shut down the app with Ctrl + C.

Integrate WebDataRocks into a Vue 3 project

Follow the steps below to integrate WebDataRocks with Vue 3.

Step 1. If you don’t have a Vue 3 project, create one:

vue create vue-3-project
cd vue-3-project

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 3 preset. 

Step 2. Install WebDataRocks from npm:

npm install webdatarocks

Step 3. Download the Pivot.vue file from our GitHub and place it in the src/components/ folder.

Step 4. In the main.js file, import webdatarocks.css:

import { createApp } from 'vue'
import App from './App.vue'
import 'webdatarocks/webdatarocks.css'

createApp(App).mount('#app')

Step 5. Import WebDataRocks from Pivot.vue in the component where you need the pivot table (e.g., src/App.vue):

<script>
import Pivot from "./components/Pivot";
 
export default {
    name: "App",
    components: {
        Pivot,
    },
};
</script>

Step 6. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):

<template>
    <div id="app">
        <Pivot
     	 report="https://cdn.webdatarocks.com/reports/report.json"
         toolbar>
        </Pivot>
    </div>
</template>

Step 7. Run the app:

npm run serve

Your WebDataRocks & Vue 3 project will be available at http://localhost:8080/.

See also

WebDataRocks allows visualizing the data from the pivot table using 3rd-party charting libraries. Feel free to use the following tutorials:

Integration with any other charting library is possible via the getData() method.

Software production involves many stages, such as software design, software development, and many more. Software distribution is also an essential part of that process. It is like a logical continuation of development that determines where and how your end-user will get the product.

There are lots of platforms and stores offering themselves as a placement for your software. To decide whether to use this or another platform as a tool of distribution, you should certainly know who is your target audience and which platforms it uses most. 

If you’re a JavaScript developer, you should research how JS libraries are usually distributed. You should adjust to customers and do everything so they can get your library in a way they usually get such software for their projects.

So, as a person interested in spreading the library, you should take two steps:

  • Gather as much information about the most popular platforms for JS software delivery as possible.
  • Do the appropriate actions so that the library becomes available on those platforms.

To help you with the first step, we gathered the most popular ways of JavaScript modules distribution.

Let’s start!

1. Content Delivery Network (CDN)

CDN aims to provide the quick transfer of resources needed for loading the webpage’s content: stylesheets, images, and javascript files. CDNs are becoming increasingly popular, and a significant part of web traffic is served through them. 

Taking into account the availability of CDNs and the ease of use, we’re not surprised by their widespread acclaim.

Having your JS module accessible via CDN will not burden you, but bring many benefits to the users of your library. 

You can start using CDNs with learning more about such CDN providers as Cloudflare, Amazon CloudFront, and Akamai. They are widely known for their reliability and quality of service.

How CDN may come in handy for the end-users:

  • No need to download and copy files to a server, as well as no need to use some extra software like package managers.
  • High availability and high performance in terms of loading scripts.
  • The user’s application will automatically use the latest release of the library.

2. GitHub

First of all, GitHub is a perfect solution for open-source projects. Using GitHub as a repository gives you a community for the project. Thus, besides an additional platform for software distribution, you also get a bunch of people gathered around your library. 

These people are an active network that can report bugs, fix them through pull requests, suggest new awesome features, and so on. It sounds like a good boost to your library’s development, isn’t it?

But even if your JavaScript software is commercial, GitHub is worth using. It can be an excellent option for promoting the library. 

Does your library have any integrations with other libraries, frameworks, and technologies? 

It’s a good idea to add different examples of such integrations to your repository. Thanks to these examples, people may discover your software when googling some related subjects. 

Just a point to remember: GitHub is popular enough to be on the top of Google’s results, so you shouldn’t underestimate its power.

How having your library available through the GitHub may come in handy for the end-users:

  • Easy software downloads and updates.
  • In the case of an open-source project, end-users can take the source code and adjust it to their needs.
  • GitHub is the right place to share different library usage examples.

3. npm registry

The public npm registry is a database containing different JavaScript packages used for different developing purposes. When you use npm or yarn, the package you download is fetched right from that registry. 

Since npm and its analogs are quite popular in web development, publishing your JS library on the npm registry might bring the lion’s share of users to the library. 

How having your library available through the npm registry may come in handy for the end-users:

  • Allows installing the software by using npm, yarn, and other similar package managers.
  • Easy software updates, as well as an option to stick with an exact minor version.

4. The NuGet Gallery

The NuGet Gallery maintains more than 200 000 unique packages for .NET developing. Like the npm registry for npm, it is the storage the NuGet package manager uses when downloading a library for your needs. Thus, if you think your library can be useful for .NET developers, you should certainly create a NuGet package for it. 

How having your library available through the NuGet gallery may come in handy for the end-users:

  • Allows installing the software by using the NuGet package manager, which is pretty convenient to use.
  • Easy package updates and the option to stick with a needed software version.

Though we mentioned lots of software delivery options, the good old download link shouldn’t be forgotten. The download link, together with all the mentioned platforms, is an ultimate set for software delivery.

In this article, we described the most popular ways of software distribution, and we hope they will help you to spread your JavaScript library. So, go ahead and share your software with the world!

? To find more coding tutorials you can go to gitconnected.com.

Collapses all nodes and performs the drill-up of all hierarchies in the slice on the grid.

Example

webdatarocks.collapseAllData();

Check out the CodePen example.

More information

expandAllData(withAllChildren: Boolean)

Expands all nodes and performs the drill-down of all hierarchies in the slice on the grid.

Parameters

Name Type Description
withAllChildren Boolean optional Defines whether to drill down all levels of all hierarchies or not. Set this property to false to expand all nodes and not to drill down hierarchies. Default value is true.

Examples

1) Expand all nodes and drill down all hierarchies in the slice:

webdatarocks.expandAllData();

Check out the CodePen example.

2) Expand all nodes without drilling down the hierarchies in the slice:

webdatarocks.expandAllData(false);

More information

dataloaded: String

The event is triggered once the component loads data.

Example

webdatarocks.on('dataloaded', function(){
alert('Data loaded!');
});

Check out the CodePen example.