Skip to content

Instantly share code, notes, and snippets.

@mexiter
Forked from hoksilato/admin_charts.js
Created October 28, 2016 07:49
Show Gist options
  • Save mexiter/eedbed94c9ba77eeb25e06fe58c86371 to your computer and use it in GitHub Desktop.
Save mexiter/eedbed94c9ba77eeb25e06fe58c86371 to your computer and use it in GitHub Desktop.
(function($){
if (typeof(data) === 'undefined') {
return false;
}
if ( 'chart_most_popular' == data.data_type ) {
var post_titles = [],
post_comment_count = [];
$( data.post_data ).each(function() {
post_titles.push( this.post_title );
post_comment_count.push( parseInt( this.comment_count ) );
});
$('#chart-stats').highcharts({
chart: {
type: data.chart_type
},
title: {
text: 'Most Popular Posts (by number of comments)'
},
xAxis: {
categories: post_titles
},
yAxis: {
title: {
text: 'Number of Comments'
}
},
series: [
{
name: 'Comments Count',
data: post_comment_count
}
]
});
} else if ( 'chart_top_cat' == data.data_type ) {
var cat_titles = [],
cat_count = [];
$( data.post_data ).each(function() {
cat_titles.push( this.name );
cat_count.push( parseInt( this.count ) );
});
$('#chart-stats').highcharts({
chart: {
type: data.chart_type
},
title: {
text: 'Top 5 Categories by Posts'
},
xAxis: {
categories: cat_titles
},
yAxis: {
title: {
text: 'Number of Posts'
},
tickInterval: 5
},
series: [
{
name: 'Post Count',
data: cat_count
}
]
});
} else if ( 'chart_cat_breakup' == data.data_type ) {
var number_posts = [];
$( data.post_data ).each(function() {
number_posts.push( [ this.name, parseInt( this.count ) ] );
});
$('#chart-stats').highcharts({
title: {
text: 'Breakup of Categories by Number of Posts'
},
tooltip: {
pointFormat: 'Number {series.name}: <b>{point.y}</b><br>{series.name} Share: <b>{point.percentage:.1f}%</b>'
},
series: [
{
type: 'pie',
name: 'Posts',
data: number_posts
}
]
});
}
}(jQuery));
<?php
/*
Plugin Name: Admin Charts
Plugin URI: http://dev.imbilal.com/wpadmincharts
Description: JavaScript charts for WordPress admin. These charts show different statistics in the WordPress admin.
Version: 1.0
Author: Bilal Shahid
Author URI: http://www.imbilal.com
License: GPLv2 or later
*/
// Plugin root directory
define( 'ROOT', plugin_dir_url( __FILE__ ) );
// Adding a plugin page
function chart_add_admin_page() {
add_plugins_page(
'Charts For Wordpress', // Page title
'Admin Charts', // Menu title
'administrator', // User capability
'admin-charts', // Slug
'render_admin_charts_page' // Name of callback function that will be used to render the contents of page
);
}
// Adding a menu into admin menu
add_action( 'admin_menu', 'chart_add_admin_page' );
// Set selected option
function selected_option( $option ) {
if ( $option == $_POST['chart_data_type'] ) {
echo 'selected="selected"';
}
}
// Rendering contents for plugin page
function render_admin_charts_page() {
?>
<div class="wrap">
<h2>Admin Charts</h2>
<form action="" method="post" name="admin_chart_form" id="admin_chart_form">
<p>
<label for="chart_data_type">What type of data do you want to show?</label>
<select name="chart_data_type" id="chart_data_type">
<option value="chart_most_popular" <?php selected_option( 'chart_most_popular' ); ?>>Most Popular Post</option>
<option value="chart_top_cat" <?php selected_option( 'chart_top_cat' ); ?>>Top 5 Categories by Posts</option>
<option value="chart_cat_breakup" <?php selected_option( 'chart_cat_breakup' ); ?>>Breaks of Categories by Posts</option>
</select>
</p>
<input type="submit" class="button-primary" value="Display Data" id="show_chart" name="show_chart" />
</form>
<div id="chart-stats" class="chart-container" style="width:900px; height:500px;"></div>
</div>
<?php
}
// Registering styles and scripts are using in plugin page
function chart_register_scripts() {
wp_register_script(
'highCharts',
ROOT . 'js/highcharts.js',
array( 'jquery' ), // an array of scripts upon which our script depends
'3.0.7',
true // enqueue the script in the footer of the page after the main content
);
wp_register_script(
'adminCharts',
ROOT . 'js/admin_charts.js',
array( 'highCharts' ),
'1.0',
true
);
wp_register_style(
'adminChartsStyles',
ROOT . 'css/admin_charts.css'
);
}
add_action( 'admin_enqueue_scripts', 'chart_register_scripts' );
/*
We can now actually enqueue our scripts and styles on our plugin page,
but we don't want them to be enqueued on every single page in the admin
where they are not needed.
For that reason, we will check for a condition before we enqueue our scripts:
The function that we hook with "admin_enqueue_scripts" actually receives
a parameter for the admin page that we are currently on. In our case,
it's "plugins_page_admin-charts". You can always check this parameter
by echoing it in your development process.
*/
function chart_add_scripts( $hook ) {
if ( 'plugins_page_admin-charts' == $hook ) {
wp_enqueue_style( 'adminChartsStyles' );
wp_enqueue_script( 'adminCharts' );
// Only show data when the form has been submitted
if ( isset( $_POST['show_chart'] ) ) {
// Checking what type of data we are displaying
if ( 'chart_most_popular' == $_POST['chart_data_type'] ) {
$posts = new WP_Query(
array(
'post_type' => 'post',
'orderby' => 'comment_count',
'order' => 'DESC',
'posts_per_page' => 5
)
);
$data = array(
'data_type' => 'chart_most_popular',
'chart_type' => 'column',
'post_data' => $posts->posts
);
// Pass this variable to JavaScript
wp_localize_script(
'adminCharts', // The function call is the handle of the script to which we need to pass the data
'data', // Name of the object that will be available in Javascript
$data
);
}
if ( 'chart_top_cat' == $_POST['chart_data_type'] ) {
$categories = get_categories(
array(
'orderby' => 'count',
'order' => 'desc',
'number' => 5
)
);
$data = array(
'data_type' => 'chart_top_cat',
'chart_type' => 'column',
'post_data' => $categories
);
wp_localize_script( 'adminCharts', 'data', $data );
}
if ( 'chart_cat_breakup' == $_POST['chart_data_type'] ) {
$categories = get_categories(
array(
'orderby' => 'count',
'order' => 'desc'
)
);
$data = array(
'data_type' => 'chart_cat_breakup',
'chart_type' => 'pie',
'post_data' => $categories
);
wp_localize_script( 'adminCharts', 'data', $data );
}
}
}
}
add_action( 'admin_enqueue_scripts', 'chart_add_scripts' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment