{"id":139720,"date":"2017-01-04T12:00:39","date_gmt":"2017-01-04T18:00:39","guid":{"rendered":"https:\/\/getflywheel.com\/?p=20892"},"modified":"2023-06-28T11:40:34","modified_gmt":"2023-06-28T16:40:34","slug":"wordpress-visualizer-charts-and-graphs-plugin","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/","title":{"rendered":"How to Use the WordPress Visualizer Charts and Graphs Plugin"},"content":{"rendered":"\n

Data is key to website user engagement, and charts are a great way to make sense of that data. By showing data in an easy-to-interpret format, it will be more understandable and visually appealing for your users. There are different types of charts you can use, and some types represent certain types of data better than others. <\/p>\n\n\n\n

Various types of charts can be displayed on your WordPress website quite easily with the help of a great plugin called Visualizer WordPress Charts and Graphs Lite<\/a>. Options include pie charts, line graphs, area charts, map charts, and much more.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

With this plugin, you can even add data from a single data source to populate the charts. The charts are interactive, colorful, and look great on desktop, tablet, and mobile devices with minimal effort. Plus, the data can be updated easily to populate a new chart, instead of having to constantly update graphics when data changes.<\/p>\n\n\n\n

Creating a Chart for WordPress<\/h2>\n\n\n\n

Before installing a new plugin, we advise you to test it first in local development environment<\/a>. After you’ve set up your test environment, download and activate WordPress Charts and Graphs Lite<\/a>, and then the chart building can begin!<\/p>\n\n\n\n

\"option<\/figure>\n\n\n\n

You may notice that a Pro version also exists. We will be concentrating on the Lite version for this tutorial, but if there are additional features you\u2019d like to use, they may be available in the Pro (paid) version.<\/p>\n\n\n\n

Additional <\/strong>Tools You\u2019ll Need: Excel or Google Sheets<\/strong><\/h3>\n\n\n\n

Before getting started, it\u2019s worth mentioning the various file options for importing chart data to your site. You can either use Microsoft Excel to save a file locally to your machine or use Google Sheets to save your data in the cloud. For the first chart example, we\u2019ll create a local file with Excel.<\/p>\n\n\n\n

Formatting <\/strong>Data in the CSV <\/strong>File<\/strong><\/h3>\n\n\n\n

The first step is to enter the chart data in spreadsheet form. How the data is formatted is crucial for the chart data display. If it is not formatted correctly, your chart may not appear as intended or may not be visible at all. It\u2019s important that the file has column names in the first row and the data type in the second row. Data can be entered in these types: string, number, date, time, time of day, and boolean values.<\/p>\n\n\n\n

Here is an example with the correct data format. After data was entered, the file was downloaded and saved as a .csv.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

A .csv is a \u201cComma Separated Value\u201d file. This allows data to be saved in a table structured format. If you open the .csv in a text editor, you will see how commas separate the values.<\/p>\n\n\n\n

\"the<\/figure>\n\n\n\n

Create the New Chart<\/strong><\/h3>\n\n\n\n

Creating new charts is done by going to Media<\/strong> > Visualizer Library<\/strong>. You\u2019ll need to click on the \u201cAdd New\u201d button to add your first chart. This will bring up a pop-up window on screen. There will be multiple chart types to choose from. Select the desired type and click \u201cNext.\u201d<\/p>\n\n\n\n

\"graph<\/figure>\n\n\n\n

The spreadsheet is what will need to be chosen so that the accurate data displays. You\u2019ll see “From Computer\u201d or \u201cFrom Web.\u201d \u201cFrom Computer\u201d is used for the Excel file that was saved as a .csv file.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-chart-choices\"<\/figure>\n\n\n\n

When the correct file is selected, you\u2019ll see that the chart is populated with the correct values. Choose \u201cCreate Chart\u201d to make it official. This new chart will now be found in the library.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-chart-on-page\"<\/figure>\n\n\n\n

Changing the Chart by Updating Data in the .csv File<\/strong><\/h3>\n\n\n\n

Data changes all the time, so chances are the file will have to be updated from time to time. When the chart needs to be updated with new data, changing data is as simple as updating the values in the .csv file and uploading a new one. When the values have been updated, be sure to save the .csv file.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-edit-chart\"<\/figure>\n\n\n\n

Next, go to the Visualizer Library and click the “Edit” option. Navigate until you see the option to upload the file from the computer. Click \u201cFrom Computer\u201d and then navigate to the file and choose it. The values will update and the chart reflects the updated data.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-updated-sales-data\"<\/figure>\n\n\n\n

Adding the Chart to a Page (or Post)<\/strong><\/h3>\n\n\n\n

The process is very much like adding an image. Select a page or post to edit and there will be an \u201cAdd Media\u201d button on the left. In the \u201cInsert Media\u201d column, there will be a Visualizations option where the active charts will be displayed.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-chart-library\"<\/figure>\n\n\n\n

On the chart, there will be a small arrow. By selecting that, the chart will be added to the post with a shortcode. Preview and you will see how the chart looks.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-visualizer-shortcode\"<\/figure>\n\n\n\n

Using Google Sheets to Create a Chart<\/strong><\/h3>\n\n\n\n

Google Sheets are very popular. The cloud makes it very convenient to access spreadsheets. Many enjoy this alternative because when data is saved in this spreadsheet on Google drive, it can be added to the chart without having to export it and find it on the computer\u2019s hard drive. It can be formatted into a .csv also, just like Excel.<\/p>\n\n\n\n

When data is in the Google Sheet, choose File<\/strong> > Publish to the web<\/strong>.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-google-sheet-publish-to-web\"<\/figure>\n\n\n\n

To get the proper .csv formatting choose \u201cComma-separated values (.csv)\u201d from the dropdown. Then choose \u201cPublish.\u201d<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-google-sheet-save-csv\"<\/figure>\n\n\n\n

You\u2019ll see a long URL, which is used for the chart to reference the numbers to display. Simply copy this URL and go back to the Visualizer charts.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-google-sheet-csv-url\"<\/figure>\n\n\n\n

Create a New Chart<\/strong><\/h3>\n\n\n\n

Just like the first example,  click the \u201cAdd New\u201d button to add a new chart. Select the new chart type and choose \u201cNext.\u201d<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-pie-chart-selection\"<\/figure>\n\n\n\n

Click on the \u201cFrom Web\u201d button and then paste the URL of your Google Sheets .csv file. The preview will update with the new chart data.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-enter-url-pie-chart\"<\/figure>\n\n\n\n

Click on the \u201cSave Chart\u201d button to save your chart.<\/p>\n\n\n\n

\"wordpress-visualizer-charts-and-graphs-new-pie-chart\"<\/figure>\n\n\n\n

With some simple spreadsheet data, it\u2019s easy to create a chart to display on your WordPress site. With a variety of available chart designs to choose from, they\u2019re easily updatable, making them dynamic and accurate. This solution offers modern, legible designs that can be viewed on all devices.<\/p>\n","protected":false},"excerpt":{"rendered":"

Data is key to website user engagement, and charts are a great way to make sense of that data. By showing data in an easy-to-interpret format, it will be more understandable and visually appealing for your users. There are different types of charts you can use, and some types represent certain types of data better…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":144524,"template":"","resource-topic":[1396],"resource-role":[895,1397,896,897,903],"resource-type":[916],"class_list":["post-139720","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Use the WordPress Visualizer Charts and Graphs Plugin<\/title>\n<meta name=\"description\" content=\"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use the WordPress Visualizer Charts and Graphs Plugin\" \/>\n<meta property=\"og:description\" content=\"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-28T16:40:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/01\/charts-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Use the WordPress Visualizer Charts and Graphs Plugin\" \/>\n<meta name=\"twitter:description\" content=\"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/01\/charts-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/\",\"name\":\"How to Use the WordPress Visualizer Charts and Graphs Plugin\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-01-04T18:00:39+00:00\",\"dateModified\":\"2023-06-28T16:40:34+00:00\",\"description\":\"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use the WordPress Visualizer Charts and Graphs Plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use the WordPress Visualizer Charts and Graphs Plugin","description":"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Use the WordPress Visualizer Charts and Graphs Plugin","og_description":"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-06-28T16:40:34+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/01\/charts-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Use the WordPress Visualizer Charts and Graphs Plugin","twitter_description":"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/01\/charts-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/","name":"How to Use the WordPress Visualizer Charts and Graphs Plugin","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-01-04T18:00:39+00:00","dateModified":"2023-06-28T16:40:34+00:00","description":"Adding charts and graphs to your post are a great way to explain your point. This post looks at how to use a plugin to do it.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-visualizer-charts-and-graphs-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Use the WordPress Visualizer Charts and Graphs Plugin"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/01\/charts-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency, Designer, Developer, Freelancer, Marketer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/144524"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139720"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139720"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139720"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}