Views Dataviz Module
Drupal 7 demonstration for how to set up charts using views and the views_dataviz module.
Welcome to the daily dose of Drupal, this is episode 1 and it’s basically 5 minutes everyday where we sit down and go over something Drupal related. Today I am going to go over how to set up and use the Views Dataviz module which takes advantage of the Google Visualization API and integrates pretty nicely with Views.
So we’ll hop over to my Drupal 7 Test Site here and I will jump in to the Modules page so you can see what I have installed, you can see I have chaos tools (ctools) installed along with the Date Module, along with Views and of course the Views Dataviz Module which is currently in the 1.0 alpha 3 release. So I’m going to start by creating a content type and I’m just going to call this Monthly Earnings, go ahead and save that and we will add 2 fields to this … I’ll get rid of this body field, we’ll add a field for Month and then the Date field, I’ll just leave it a select list with a granularity up to Year and Month, no End date, we’ll save that, leave everything else to the defaults and I will create a field called Amount, this will be a Decimal field, I’ll leave everything here at the defaults and we will go ahead and add a few of these Monthly Earnings, one for July 2012 … oops looks like I forgot to get rid of the Minute field, I’m going to go take care of that real quick, I guess I missed that checkbox, alright I’ll try again; July 2012 and let’s say 5,000 for the amount, go ahead and saved that, we get another one; August 2012, put this and add 5500, this could be any type of value, a dollar amount or any numeric value.
So we have two pieces of Monthly Earnings content so we’re going to go ahead and create the View now, so I’m going to click Add a New View, I’m going to call this Monthly Earnings Report, I’m going to show contents of type Monthly Earnings, we’re going to leave it unsorted, we’ll create a page called Monthly Earnings Report where we’ll display a Dataviz View … we’ll go ahead and get rid of the page right here and we will hit Continue and Edit and that brings us into our View; our Monthly Earnings Report View as you can see the format is Dataviz, it’s been selected and the settings are set to the default, we’ll go ahead and we’ll make this a Column Chart and just take a look and we will need to turn on Views Aggregation.
So in the Advance Settings there’s a Use Aggregation fields on the View, go ahead and select Aggregate and Apply that, now let’s go ahead and add our Amounts and our Month field … for the Amount field we’re going to want to type the Sum and then Apply, we can leave the label as Amount. Let’s go ahead and change the format on to Unformatted, the Views Dataviz module is expecting a numeric value here and so if there’s anything else that makes non-numeric value it might not work for you wanted to so go ahead and make that Unformatted so that it just outputs the number.
So let’s go ahead and leave this to Default for Month, we’ll get rid of the label, go ahead and select whatever date format you need and in the Rewrite Results I’m going to I’m going to strip out the HTML tags here just to make sure it outputs correctly, I would get rid of the Title field here and I will go ahead and save this and we’re going to go ahead and to this Monthly Earnings Report and see how it looks and there you go; we have our first basic graph, you can see on 7 of 2012 which is July we have 5,000 in Sales and 5,500 in sales in August of 2012. And this is pretty flexible; so you can go ahead and change different types of charts here and we’ll go from there; try the Pie Chart, save that and Refresh over here, as you can see we have a Pie Chart.
There’s really a whole different bunch of Charts you can use, the most important thing to get this to work that tripped me up a little bit was to make sure that you want this field to be Unformatted or at least make sure that it’s only going to output a numeric value otherwise it may not wok the way you want to; in this case it does but depending on if you have any prefixes like if you have a dollar sign or anything like that, it may not work correctly.
So just be careful with that and everything else should work from there. It’s really a pretty cool module that makes building graphs and charts in Drupal easy. As you can see now it broke as I changed the format on that field but it’s a really cool Drupal 7 module to build simple Graphs and Reports using Google’s Visualization API and that’s all for this time, thanks for watching.



Discussions
Just perfect
The pace of these DDoD videos is perfect.
Thank you for starting this series. Really looking forward to getting my daily Drupal fix.
social media buttons
I appreciate your efforts. Was wondering how you got the social media buttons to show as they do also what theme are you using perhaps you could shed some light on this mentioning modules etc either in video or in response to this query.
thanks for posting many video
thanks for posting many video cast, maybe would be great if there is some article+screenshot version of your module review
Extra value-line in the chart
Hello,
Your video helped me to discover this module. I'm playing with it and was wondering if it's possible to add another line in the chart.
I want to show a value per mothe (like in the video), but I would like to show another line to show the difference between the last and actual value.
Thanks for your help.
Paul
Hi Shane. Would you prefer
Hi Shane.
Would you prefer this module over the Visulization API module?
Have not tried Visualization API module
Steffen,
I have not tried the Visualization API module. I think when I needed the charting/graphs the Views Data Viz module was the only one that seemed to work for me. I will probably try out the Visualization API in the upcoming month or so on a project to see how it compares. I do like how there is a theme hook to render your own charts outside of views.
Will reply back here if I do get around to taking a look at the module. Will also try to post a video on it if it turns out to work well.
Do you have any experience with the Visualization API Module?
im trying to adjust the
im trying to adjust the dataviz chart in a block view, but the chart is printing much smaller than the block. im finding it really difficult to increase the size of the chart within a block. Please, any help?
Using Highcharts API
I find the highchart library very useful to make web-based charts using javascript, but it's so far unclear to me how to create charts in drupal using my custom module. Could this be a topic for an upcoming video?
Post new comment