index.php

<?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_break" <?php selected_option( 'chart_cat_break' ); ?>>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_break' == $_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' );