I'm a novice in php and WordPress. I'm trying to understand how to display a graph generated in html an JavaScript in a basic WordPress plugin.
This is the basic admin page where I would like the graph to be displayed.
<?php
/*
Plugin Name: Test plugin
Description: A test plugin to demonstrate wordpress functionality
Author: the author
Version: 0.1
*/
add_action('admin_menu', 'test_plugin_setup_menu');
function test_plugin_setup_menu(){
add_menu_page( 'Test Plugin Page', 'Test Plugin', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
echo "<h1>Hello World!</h1>";
}
?>
For example, I will use chart.js for the plot with a file for the html and another one for the JavaScript.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="bar-chart" width="800" height="450"></canvas>
JavaScript
// Bar chart
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});