Skip to main content

· 5 min read
Shawn Cao

Embed a live data story in your blog

As a blog writer, do you dream about embedding a live data graph in your article? It shines your content to be more attractive and makes it much more digestible for your readers, also it makes it more worthwhile for your readers to share with others.

More importantly, what about if the data graph automatically updated, and you don't do anything to get the magic?

For example, current blog embeds a live interactive graph, as shown below (hover mouse over for tooltip):

If this is interesting, please read on…

By the way, prefer watching a video? This video is an explainer of this blog post!


Today, let’s lay out the process of how you can achieve this easily using Columns, you can also follow the 5 simple steps to practice it right away...

Step-1: Find relevant data

Believe it or not, there are tons of data out there await to be analyzed and visualized. When you write about a topic, you need some data points to support it, you either can search open public data or manually create your own data. Public data can usually be found in government departments or various organizations. Data is usually available for download as CSV files.

No matter whether you get data from external sources or manually input it on your own, putting them in a Google Spreadsheet is the best way to have your scenario fully automated.

Step-2: Organize/format data

To get live data to be analyzed as a live graph, you need to keep it as a clean table, a clean table has its first row containing all the column names, and each column has either a text value or number value.

As demo, the data for the above live graph can be found here: Product-Users-Days. From the table, you can see it has each column is named and consistent format of values for each column. Keep it as raw as it is, you don’t need to do any analysis at all, since data analysis and summarization is the job to be done by Columns later.

Step-3: Connect data & Build graph

Connecting a google spreadsheet is very straightforward, you just need to paste your spreadsheet URL or copy its unique ID, and follow the 2 steps connection wizard. Your live connection shall be established on Columns from which you can generate as many beautiful graphs as you want. A simple doc describing the Google Spreadsheet connection can be found here.

Once a data connection is created, you can find it in the data tab of your workspace.

Just to mention, Columns don’t store or copy your data, a live connection is only used to read your data when it needs to be.

Now, it’s time to build something visually. Just open a new visual creator, and start by choosing the data connection we just created. Upon data selection, Columns loads it in our cloud computing cluster, making it ready for a super fast exploration.

A few things to get you started:

  1. Inspect Data: get familiar with your data with a summary of stats, “Inspect Data” gives you the overview of the data you’re working with, including fields and data samples.

  2. Quick Queries: Columns generate some quick queries for you to 1-click to start with some graph ideas, after that, you can continue modifying it to get what you want. You also get a “natural language” input box to type a question, Columns try to understand your question based on your data schema and stats.

Now, after a few clicks - this is what I got using the sample data mentioned earlier, need more polish or not, it is ready to show up lively in your blog post!

Build Graph

Step-4: Share and embed

Saving a graph into your gallery only requires a name. Once it’s sitting on your board, you can set any level of visibility of it: Public Visible to list of invitees For blog post purposes, it’s most likely to be public viewable. Once the setting is turned on, we get a unique URL to this visual story. Also, you got an embeddable code that you can copy/paste into your blog post in HTML format.

Share a visual

From the sharing dialog, you can copy the embed code, it will look like this example:

<iframe
src="https://columns.ai/visual/view/jZorEMEoau0dcl?headless"
style="aspect-ratio: 16/9; width:100%;"
frameborder="0"
allowfullscreen />

We have some documentation on sharing and embedding, please refer to this link.

Step-5: Set up a schedule

This is the last step, after we publish and embed a visual story into my blog post, how can I make it automatically updated if my data changes?

Absolutely, Columns covers that, the only option you need to look at is “Schedule”, from this option, you can set up a scheduler for every individual visual graph, frequency from 1 hour to 30 days, whatever suits your need. We have a doc page on how schedule works.

The only thing you need to do is to just simply update your Google Spreadsheet data and your readers shall see all the fresh live graphs, and you need to do nothing to make this “magic” happen.

Set Schedule

Conclusion

Use data to polish and shine your content writing, using a live graph in your article requires just a little effort. Embed a Columns graph today!

Having any questions? Contact us at support@columns.ai

· 2 min read
Shawn Cao

Live Dashboard Release

Greetings!

Columns is a data storytelling platform, we have continued building storytelling technology for you to do better communication using your data. It is designed to meet these goals, if any of these fails for you, we owe more work to you:

  • Easy to discover and generate visual insights by data analysis.
  • Handy design tools to customize and style a data story.
  • Worry-free sharing with multiple communication methods.

In the last few months, we have received many user requests on building a dashboard. Columns is powered by its own big data computing infrastructure which serves large data set analysis, this distributed system is actually open-sourced, you can find it on GitHub if interested. With the advantage of this infrastructure, we can keep your visual stories in sync with your data.

So today, we introduce you Columns Live Dashboard.

Live Dashboard

First of all, we created a 40s video as an overview, please check it out on Youtube.

On Columns, a dashboard is simply called a page, a simple page that collects and organizes multiple visual graphs together.

The gold part is “LIVE”, now you can flexibly set a “schedule” on any visual story, once set Columns will automatically update the visual story in sync with your data on a schedule.

How to set it up?

It’s simply just these two options in the visual story menu:

  • Schedule
  • Page

setup-live-page

We hope this is helpful for you as well as those who have asked! Here is the document page for the live dashboard feature.

Again, we love to hear your feedback, by any way listed on the contact page.

· One min read
Shawn Cao

Changes list

Today we only present a single update - but BIG!! 🚀🚀🚀🚀🚀 Scheduler Set a schedule to ask Columns auto-update your data story!

If you're a blogger, or marketer to maintain a web page or site where you want to your data graph to keep up with your spreadsheet, this is convinient way to go!

Check out this simple doc now to turn on schedules for your data stories, cheers!

· One min read
Shawn Cao

Changes list

  1. Add new graph type: Word Cloud
    1. It comes with a wizard where you can choose a single key column to render a word cloud.
    2. You can customize its palette to use different color to display text.
    3. General font settings impacts the word in display unless overwrite by settings.
  2. Improved recommendations for Box plot and Word cloud charts.
  3. Fixed a few typos and docs for Boxplot and Word cloud.

· One min read
Shawn Cao

Changes list

  1. Added a few useful chart types.

    • Tree map - useful for . (found in Tree chart settings)
    • Radar.
    • Boxplot, Dot plot in addition to scatter plot. These are useful for statistics.
    • Big Text: when there is only one number in your query result.
  2. Improved time config in data importing. Timeline function is even more powerful with forecasting.

  3. Support compressed CSV/TSV - these type of files are usually highly compressible. It makes uploading large files much faster and saving lots of storage space.

  4. Better filtering usability - you can easily filter an item from dimension or metric list, also enjoy the auto complete features in fitler editing.

  5. Full tested SSO + team management feature including team workspace.

Upcoming

Columns will bring in a rich text editor where you can easily query and charting your data in a doc. Please get in touch if you are interested in private beta testing.

· One min read
Shawn Cao

Changes list

  1. Completely new visual story workspace

    • Work with multiple different data sources in one visual story.
    • Save mulitple versions in one edit.
    • Brand new data source exploration, get all information about the data you're working on.
    • Get query recommendations from your data without knowning how to analyze it.
  2. Support general chat for each visual story and drop-in-place chats in graph anywhere.

  3. Fine grained access control of your visual story

    • Share with specific individuals (by emails), they will get email notifications.
    • Share with public/everyone with different permission level (viewer, commenter, editor).
  4. Other improvements, such as

    • Support "percentage" format in value format options.
    • Support frame fine tuning bar race experience by introduce frame steps setting.
    • Other UI updates.

Examples

  1. Check out our new visual story composer Visual Story

  2. Share with people. Access Settings

  3. Chat with people freely Drop chats

· One min read
Shawn Cao

Changes list

  1. Improve usability of Tooltip - always place tooltip on the top over other visual elements.
  2. Revamp on Bar Race, easy to create fully customized bar race chart.
  3. Introduce entity repo to allow Columns to look up entity info by key (Entity examples: company, country).
  4. Support different shape choices for arrow - Triangle or Circle.
  5. When data expired in Columns Cloud during creation time, Columns now automatically reload it so users don't need to refresh the page.

Examples

  1. 1-minute to create a bar race chart. Bar Race Chart Example

  2. Maintain a legit entity repo. (https://columns.ai/entity) Entity example

· One min read
Shawn Cao

Changes list

  1. Enhanced Line/Area chart to enable style settings for every single line (metric).
  2. More reliable settings of appropriate number of axis tick count.
  3. Limit breakdowns from freezing web UI when there is a huge breakdowns in pivoting case.
  4. Bug fixes - such as sorting state loss, value precision can not set to 0.

Examples

  1. set different style for each line including line width, and marker style Each metric line has its own style