PRO: Plot JSON-data – WordPress Charts Plugin

Together with the Plugin “WordPress Charts” the PRO version of the JSON Content Importer can plot data in many ways. Unfortunately this plugin isn’t availiable in the WP-Repository any more.

Example: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51 gives us the latest 50 numbers of the downloads of the free JCI plugin. The challenge is to display that data like this:

Downloads of the free JSON Content Importer Plugin: Daily statistic of the last 50 days

For that we have to do this:

Name of template: wordpress-stat-plot
Install: WordPress Charts
Create a new JCI-pro-template with:

URL: https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51

twig-template:

<a href="https://wordpress.org/plugins/json-content-importer/" target="_blank">Downloads of the free JSON Content Importer Plugin:</a> <a href="https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=json-content-importer&limit=51" target="_blank">Daily statistic of the last 50 days</a><br>{%set no = 0 %}
{% for dat,nodl in _parent %}{%set no = (_parent | length)-1 %}{% endfor %}

Save that template and use it on a page with the above shortcode

That’s it…

PRO: JCI and TablePress

The Plugin “TablePress” and the PRO version of the JSON Content Importer can work together in this way:

  1. Create a new TablePress-Table with e. g. two columns and two rows. Fill the cells with some dummy text. This gives you a shortcode
    [table id=NUMBER_OF_TABLEPRESS_TABLE /].  
  2. Create a new JCI-Plugin Template:

Name: tablepress
URL: http://api.json-content-importer.com/extra/json/meetup/1.json
twig-template:

name: {{_context.0.name}}

1a: {{_context.0.name}}1b
2a2b

Shortcode:

name: Love Breakfast
1a: Love Breakfast1b
2a2b

3. Insert {{_context.0.name}} in a table-cell of the Tablepress-Table. Then reload the page and you should see the JSON-data in the Table.

If the number of columns or rows is dynamic: Up to my knowledge TablePress has a fixed number of cols and rows. So this is not that flexible.
Maybe Table Sort is an option then.

JCI and Tablepress in Action:

name: Love Breakfast

1a: Love Breakfast1b
2a2b

PRO: JSON & Slider – How to do it with the jQuery Lightslider-Lib

Your challenge:
You have some URLs to Images in your JSON-Feed. Those images should be displayed in a image-slider.


There are many ways to do that:
One way is to use a PRO-slider like Smartslider and feed him with RSS, build out of JSON.

Another way is to use the jQuery lightSlider Library (see also here).

  1. Example JSON: http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
  2. Create a new JCI-Template:
    • Name: lightslider
    • URL: http://api.json-content-importer.com/extra/example-gen-cp-ts/example_events_venues.json
    • twig-Template:
<link type="text/css" rel="stylesheet" href="http://sachinchoolur.github.io/lightslider/src/css/lightslider.css">                  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script>
<ul id="lightSlider">
{% for d in _context %}
<li>
<img src="{{d.venue.img}}">
</li>
{% endfor %}
</ul>
<script type="text/javascript">
  $(document).ready(function() {
  $("#lightSliderDemo").lightSlider({
        speed: 1500,
        auto: true,
        loop: true
 })
});
</script>

ATTENTION: In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!

  • “jquery.min.js” you can add via the JCI-options, Tab “Extra”
  • “lightslider.css” / “lightslider.js” you find at http://sachinchoolur.github.io/lightslider/ at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.

Insert this Shortcode on a WordPress-Page:

[jsoncontentimporterpro nameoftemplate=lightslider]

In Action:

PRO: Display & Search JSON and pass it to a Contact Form

Challenge: You have to display and search a JSON like http://api.json-content-importer.com/extra/json/hrus.json


Solution:
Create two JCI-Templates and Pages and get that:
http://api.json-content-importer.com/hrus-list-all/?jobsea=digital

PAGE 1: Display-Page:
Shortcode:

[jsoncontentimporterpro nameoftemplate=hrus]

on page /hrus-list-all/ (you can change that, but then you have to change it in the Twig-code of both Templates too!)

JCI-Template 1:
Name: hrus
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: jobsea
Twig-Template:


<form action="/hrfuturebrandsus/">
<input type="text" name="jobsea" value="{{urlparam.jobsea}}">
<input type="submit">
</form>
<hr>

{% set jobanz = 0 %}
{% set jobtxtout = '' %}
{% for c in _context %}
{% if c.title %}
{% set jobtxt  = '
<h1>' ~ c.title ~ '</h1>
' %}
{% set jobtxt  = jobtxt  ~ c.summary ~ '
' %}
{% set jobtxt  = jobtxt  ~ '<i>' ~ c.employment_status ~ '</i>' %}
{% set jobtxt  = jobtxt  ~ ' <a href="/hrus-detail/?slug=' ~ (c.slug | url_encode) ~ '">View Job</a>' %}
{% set jobtxt  = jobtxt  ~ '

<hr>

' %}
{% if urlparam.jobsea %}
{% if 
(c.title matches '/'~urlparam.jobsea~'/i') or
(c.summary matches '/'~urlparam.jobsea~'/i')
%}
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% else %}
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% endif %}
{% endfor %}
{% if urlparam.jobsea %}
{{ jobanz}} Jobs found
{% else %}
Current {{ jobanz}} Positions Open:
{% endif %}
{{jobtxtout}}

PAGE 2: Details-Page
Shortcode:
“orderofshortcodeeval=2” tells the plugin to execute the Contact Form first and then insert the JSON-Values

[jsoncontentimporterpro nameoftemplate=hrusdetail orderofshortcodeeval=2]

on page /hrus-detail/ (you can change that, but then you have to change it in the Twig-code of the Display-Page Templates !)

JCI-Template 2:
Name: hrusdetail
url: http://api.json-content-importer.com/extra/json/hrus.json
urlparam4twig: slug
Twig-Template:

{% set jobtitle = "" %}
{% for c in _context %}
{% if (c.title and (urlparam.slug==c.slug)) %}

<h1>{{c.title}}</h1>

{% set jobtitle = (c.title) %}
{#{{c.web_content}}#}
{% endif %}
{% endfor %}

<a href="/hrus-list-all//">Back to all Jobs</a><br>
insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"<br>
[contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]

contact-form-7 (option):
If you need to add a Contact-Form for the User the Plugin Contact-Form-7 is an option.
For that install Contact-Form-7 and add a new Form with this Code:

<label> Job
    [text* job "{{jobtitle}}"] </label>

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

Name that, save it and then you get a Shortcode like [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"].

The {{jobtitle}} is transformed with the JSON-Data. For that, check the JCI-Options at “Shortcode Settings”: The Radiobox at “Usage of Shortcodes (JCI or other) in the JCI-twig-Template” must be at the “Or the other way round: Executing Shortcodes in the template first and then evaluate the twig-code”

PRO: Show Data and pass it to Contact Form


Current 3 Positions Open:

Digital Manager

The Digital Manager is responsible...
Full Time Contract View Job

Project Coordinator

The Project Coordinator will manage all marketing programs in the initial stage...
Temporary Contract View Job

Specialist

The Person is responsible for brainstorming, setting up and optimizing...
Full Time Contract View Job

PRO: Display JSON as a Chart -amCharts-Plugin

This plugin shos you how to display JSON-data in a Chart. For that we use the amChart-Plugin.

In Action:

JSON: http://api.json-content-importer.com/extra/json/chart.php

twig-template:

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"><\/script>
<script src="https://www.amcharts.com/lib/4/charts.js"><\/script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"><\/script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [
{% for c in _parent %}
  {
    country: "{{c.country}}",
    visits: {{c.visits}}
  }
{% if (not loop.last) %},{% endif %}
{% endfor %}
];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 40;
categoryAxis.fontSize = 11;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 24000;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
// axis break
var axisBreak = valueAxis.axisBreaks.create();
axisBreak.startValue = 2100;
axisBreak.endValue = 22900;
axisBreak.breakSize = 0.005;

// make break expand on hover
var hoverState = axisBreak.states.create("hover");
hoverState.properties.breakSize = 1;
hoverState.properties.opacity = 0.1;
hoverState.transitionDuration = 1500;

axisBreak.defaultState.transitionDuration = 1000;
/*
// this is exactly the same, but with events
axisBreak.events.on("over", function() {
  axisBreak.animate(
    [{ property: "breakSize", to: 1 }, { property: "opacity", to: 0.1 }],
    1500,
    am4core.ease.sinOut
  );
});
axisBreak.events.on("out", function() {
  axisBreak.animate(
    [{ property: "breakSize", to: 0.005 }, { property: "opacity", to: 1 }],
    1000,
    am4core.ease.quadOut
  );
});*/

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", function(fill, target) {
  return chart.colors.getIndex(target.dataItem.index);
});

}); // end am4core.ready()
<\/script>

<!-- HTML -->
<div id="chartdiv"></div>

PRO: Slider & API – Smartslider & JCI

  • Your task:
    Connect a slider with an API. The API (JSON; XML, CSV) gives all info for images, text and links for a slider on a WordPress-Page.
  • Solution:
    Install the PRO-Version of the JCI-Plugin and the plugin “Smartslider3 PRO.
    With the JCI-Plugin you can create a RSS-Feed out of the API-data.  The GET-Parameter “?show=oc” removes the WordPress-Template and creates pure RSS : This RSS-URL can be used to feed the RSS-Generator of the Smartslider.
  • In Detail:
    Create a JCI-Template with the following template-code for static RSS. By adding twig and an URL you can add API-data.
    RSS-XML-Code for the Slider:
<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
 <channel>
    <title>titleexample</title>
    <description>descriptionexample</description>
    <link>http://...link</link>
    <copyright>Copyright 20...</copyright>
    <docs>http://....docs</docs>
    <language>en-us</language>
    <lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate>
    <managingEditor>info@.....com</managingEditor>
    <pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate>
    <webMaster>webmaster@....com</webMaster>
    <generator>JCI</generator>
    <image>
      <url>http://www.....gif</url>
      <title>titleimage</title>
      <link>http://www....imagelink.htm</link>
      <description>descriptionimage</description>
      <width>480</width>
      <height>480</height>
    </image>   
<item>
      <title>titleitem</title>
      <description>descriptionitem</description>
      <link>http://www.linkitem</link>
      <comments>commentsitems</comments>
      <pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate>
    </item>
  </channel>
</rss>

Notice: RSS is sensitive to speacial chars and chars used for RSS itself. Therefore consider to mask JSON-data in a CDATA-tag:

<![CDATA[
text....
]]>

Name this JCI-Template e. g. “rss” and add this Shortcode to a page:

[jsoncontentimporterpro nameoftemplate=rss]

Publish this page and add “?show=oc” to the URL: This removes the WordPress-Template and gives pure RSS / XML.
This URL can be used with the SmartSlider 3 RSS-connector.

.

Sort data in Browser: Table Sorter and PRO JCI-Plugin

The number of Bitcoin transactions added to the mempool per second.
no (sortable) x x (sortable) y (sortable) randomno (sortable)
1159355080015935508004.455208333334109
2159355260015935526004.3968753961
3159355440015935544004.324479166671135
4159355620015935562004.247916666673495
5159355800015935580004.1171875209
6159355980015935598004.00260416667804
7159356160015935616003.8921875731
8159356340015935634003.756770833331929
9159356520015935652003.635416666673893

Credits: Thank you Lawrence from South Melbourne, Austr

see more how this is done:
https://doc.json-content-importer.com/json-content-importer/pro-tablesorter/