[Closed] Need help creating a HTML5 chart with 12 months of data

[Author]

Posts

[dbarber]

I'm trying to use the WP Charts plugin https://wordpress.org/plugins/wp-charts/installation/ to create a HTML5 bar chart that allows me to output the last 12 months worth of data from 3 different custom fields.

I need custom-field-one, custom-field-two and custom-field-three to be grouped together as a month in the chart for each of the last 12 months.

I've tried the following with no success:

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" datasets="[types field="custom-field-one"][/types] next [types field="custom-field-two"][/types] next [types field="custom-field-three"][/types]" labels="[types field="current-month"][/types] [types field="current-year"][/types]"]

That just outputs values for a single month (in this case June 2013).

I've also tried the following (just to test for 3 months):

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" datasets="[types field="custom-field-one"][/types],[types field="custom-field-one"][/types],[types field="custom-field-one"][/types] next [types field="custom-field-two"][/types],[types field="custom-field-two"][/types],[types field="custom-field-three"][/types] next [types field="custom-field-three"][/types],[types field="custom-field-three"][/types],[types field="custom-field-three"][/types]" labels="[types field="current-month"][/types] [types field="current-year"][/types],[types field="current-month"][/types] [types field="current-year"][/types],[types field="current-month"][/types] [types field="current-year"][/types]"]

Unfortunately, it outputs the same data for the same month (June 2013) X 3.

Note: The plugin picks the first value in each dataset as the first value for the bar in the bar chart, and Next is used to separate datasets, so the above structure is correct.

At this point I'm thinking I may need to set up three different types of Views (one for each custom field) X 12 (one for each type and month).

I'm sure there must be a way to do this - ideally using the first example - but it totally escapes me.

Please advise.

[Ghennadi]

Dear dbarber,

Can you provide some more info.

1. Example char shortcode with manual data.
2. Example post with post meta fields (post title, field1, field 2, etc...)

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[dbarber]

View is set to display a custom post type.

Limit is set to 12.

Query filter is set to a custom taxonomy.

Here's example chart code with manual data in Layout HTML:

Here's an example of the chart code with manual data for three months:

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" 
datasets="105,99,132 next 199,178,165 next 399,423,403" labels="April 2014,May 2014,June 2014"]

The above code outputs a chart as shown in the attached image.

Blue bars represent the first dataset (105,99,132), tan bars represent the second dataset (199,178,165), and orange bars represent the last dataset (399,423,403).

I've tried to use a View to output a similar chart (with 12 months of data) using custom fields for each of the datasets and for the labels.

I created a View to display a custom post type, set the limit to 12 and the query filter set to a custom taxonomy.

I've tried using one custom field for each dataset and one custom field for the dates - e.g.,

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" 
datasets="[types field="all-sales"output="raw"][/types] next [types field="new-sales"output="raw"][/types] next [types field="existing-sales"output="raw"][/types]" labels="[types field="current-month"output="raw"][/types] [types field="current-year="raw"][/types]"]

This simply outputs a chart for a single month.

I've also tried mimicking the manual example from above by repeating custom fields (and setting the limit in the View to 3) - e.g.,

[wp_charts title="barchart" type="bar" align="alignleft" margin="5px 20px" 
datasets="[types field="all-sales"output="raw"][/types],[types field="all-sales"output="raw"][/types],[types field="all-sales"output="raw"][/types] next [types field="new-sales"output="raw"][/types],[types field="new-sales"output="raw"][/types],[types field="new-sales"output="raw"][/types] next [types field="existing-sales"output="raw"][/types],[types field="existing-sales"output="raw"][/types],[types field="existing-sales"output="raw"][/types]" labels="[types field="current-month"output="raw"][/types] [types field="current-year="raw"][/types],[types field="current-month"output="raw"][/types] [types field="current-year="raw"][/types],[types field="current-month"output="raw"][/types] [types field="current-year="raw"][/types]"]

This outputs a chart for 3 months but uses the same data from the same month.

Let me know if you need more information.

Thanks

[Ghennadi]

Dear dbarber,

I'm still a bit mixed, can you please provide your site credentials, i will try create view there.

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[Ghennadi]

Dear dbarber,

Enabling private data form.

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[dbarber]

I added my FTP and other login details on the form, which indicated that details would be visible only to WP Toolset staff, but after submitted it and logged out I checked this URL just to be on the safe side, and found that all of my details were visible.

So I edited my reply to remove those details.

Please advise.

[dbarber]

Sorry for the misunderstanding in my last message. My mistake entirely. My details were visible because I did not use the form.

I figured out how to use the private form you referred to, so you should have my details now.

Cheers

[Ghennadi]

Dear dbarber,

Please provide some more info,
1. View name where you list posts
2. Page where this view inserted

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[dbarber]

Sorry, Gen.

Here are the details you'll need:

- Page: hidden link (it's currently set to private so you will need to be logged in to see it)
- View name: Line Chart for Detached Home Activity
- Content Template name: Activity Line Chart
- Link to example on developer's site (I'm using the line chart example, fourth chart down on the page): hidden link

You'll see that it's outputting 13 different charts (one for each month in the View) rather than a single chart.

The data are definitely there - as you'll see in the lower left corner and by clicking on Show/Hide Table Data.

I've tried using the Content Template shortcode outside of the loop but then it doesn't output anything.

Thanks

Dawson

[dbarber]

Any progress on this?

[Ghennadi]

Dear dbarber,

Unfortunately easy chart don't accept wp-view as chart shortcode attribute.
I've create Views structure how it will work, but now you need ask help from easy chart author (add ability to use nested shortcodes)

Added:
View - list dates
Views group1, group2, group3

PS. You also can try when all plugins disabled (only views and easy charts)

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[dbarber]

Easy Chart does actually appear to accept wp-view as a shortcode - at least as a bar chart.

I created a new page, using the original content template and view referenced in one of my earlier posts, and not only do the data appear under the table, but they are also generating a chart.

You can see it here:: hidden link (it's currently set to private so you will need to be logged in to see it)

The problem is that it continues to output 13 different charts, instead of all of the data on a single chart.

I tried using the views you added to the original page, but that simply outputs a shortcode error.

I think that the answer must lie somewhere between the view and content template I originally created and the views you have created.

Could you please take another look at this?

Here are the names of the original view and original content template, for reference:

- View name: Line Chart for Detached Home Activity
- Content Template name: Activity Line Chart

Thanks

[Ghennadi]

Dear dbarber,

In your example you generate easychart shortocde to each of listed posts. It's why you have 13 charts on page.
I've talked with Views developers and they said that views shortcode can not be used inside other shortcodes.

I see only one way.
1. Create custom shortocde
2. In function for this shortcode get views array using php and generate easychart shortcode with received data
3. use do_shortcode();

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.

[dbarber]

Hi Gen

Would it be possible for you to spell out how to do the following:

1. Create custom shortcode
2. In function for this shortcode get views array using php and generate easychart shortcode with received data
3. use do_shortcode();

I'm assuming that I could do step 1 by adding a custom shortcode here: Views > Settings > Third-party shortcode arguments.

But I have no idea how to do steps 2 and 3.

I've looked at the documentation on this page: https://toolset.com/documentation/user-guides/shortcodes-within-shortcodes/ and it makes me think that perhaps I wouldn't do step 1 the way I described it.

In any case, I'm still lost.

Could you please let me know how to do this?

Thanks

Dawson

[Ghennadi]

Dear dbarber,

1. Create custom shortcode.
More info at http://codex.wordpress.org/Function_Reference/add_shortcode

2. in shortcode php function you can use php for get views result,
https://toolset.com/documentation/views-php-integration/

3. in same function generate test $shortcode = '[easyshortcode attributes...]' and run using do_shortcode function
http://codex.wordpress.org/Function_Reference/do_shortcode

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.
Regards,
Gen.