title: Visualise a graph in a wordpress plugin
body: <p>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.</p>
  
  <p>This is the basic admin page where I would like the graph to be displayed.</p>
  
  <pre><code>&lt;?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 "&lt;h1&gt;Hello World!&lt;/h1&gt;";
  }
  
  ?&gt;
  </code></pre>
  
  <p>For example, I will use chart.js for the plot with a file for the html and another one for the JavaScript.</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="bar-chart" width="800" height="450"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code> // 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'
        }
      }
  });
  </code></pre>