How To Interact With Google Chart

A few days ago Corey Thompson added events to the charts of my previous tutorial. I admit that I have deliberately left the subject. However, I took advantage of the question to investigate a little deeper on how to make the various graphs more interesting.

First of all, here’s what I want to achieve:

In summary, these are two different actions. The first allows you to change the zoom of the scatter plot using two sliders. The second event allows you to retrieve the data of the selected item and display some additional information. But before you can do this, you need to clean up the code.

Clean up the code

In this post I continue the tutorial from a few weeks ago:

• Visualize Your Medium Stats With Svelte and JavaScript

All the code, from this tutorial and the previous ones, is available in the repository

• el3um4s/medium-stats

Compared to the first part, I changed the structure of the project to simplify.

First I decided not to pass the data through props but to use a Svelte store. In this way I can group all methods more logically, simplifying their modification and eliminating duplicates.

I create the StorePartnerProgram.ts file and start importing the TS types I need, as well as the writable module:

I create the store and prepare it for export:

So I group all the various methods I have already talked about in new files and import them:

Finally I add the various methods to the store:

After incorporating the various methods in partnerProgram I can call them directly from the various components.

For example, I can get the list of articles of the month by simply writing:

Change the zoom of the scatter plot

After cleaning up the code I can start thinking about how to improve the various graphics. The first thing I need is something to see in more detail the relationship between the length of the various posts and their yield. I think the best solution may be to add two sliders, one horizontal, the other vertical.

The first thing is to understand how to create the two sliders. We can have fun creating them from scratch or rely on something ready. For the moment I have chosen the easy way. On the Internet you can find several interesting components. I decided to use Simon Goellner’s Range Slider.

I install the component in my project using:

npm install svelte-range-slider-pips --save-dev

Then I import the component into GoogleChartScatter.svelte:

I can use it easily:

There are some points to understand. I need to set the range of numbers. It is better to calculate them immediately so that you can return to the original view later:

The second point concerns how to intercept the two inputs. To do this I create an array with only two elements. The first indicates the smaller value, the second the greater:

Then I just have to join the pieces, using the bind:property directive to… bind the values:

This is for the sliders. I have to slightly modify the graph as well. Or, better, the hAxis and vAxis properties by binding them to the values of the sliders.

Add an event when we select a value in the chart

The second event allows me to see some additional information when I select an element in a chart. So I switch to the GoogleChartPie.svelte chart and start modifying it to get this:

To generate events within a Svelte component I use createEventDispatcher:

I can create an event linked to the selection of an element using:

I use the Google Chart select event to retrieve the values to pass out of the component.

Before going on, a note on the events of Google Charts. There are 3 events that can be called from (almost) any chart:

• select
• error
• ready

But if we want to use other events we have to register them. For example to listen for the on mouse over event:

Or the onmouseout event:

Show a preview of the story

What I want to get is a quick way to figure out which story a data is referring to. To do this, I also pass the ID of the story to the graph:

I can then edit the component in the MonthlyAmounts.svelte file

To get the post data starting from its ID I use the getStoryById function:

To preview I created a CardStory.svelte component:

I can use this component on the various pages by simply passing it the history data to show:

Well, that’s it for today.