Question 30970 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How to use Highcharts in a WordPress website Report this postQuote

I am Yi. I want to use Highcharts on my WordPress site to make this kind of chart. I stuck in the very first Installation step. I ask Hightcharts service team & Black Label Team, they recommend me to reaching out here. 🙁

I need some advices about my next steps.

What I have tried&done:

  • I Read Highcharts document and pasted thest code in the head section of my web page.

I read the document, pasting these codes in the head:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="/js/highcharts.js"></script>
<script src="/js/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

I pasted the codes like this:enter image description here

  • I downloaded Highchart Stock 9.3.1 zip file and uploaded some of them on Cpanel.

I downloaded Highchart Stock 9.3.1 zip file. Create a new folder named Highcharts in public_html/wp-content/plugins. Uploaded js files which I think is important in 9.3.1 zip to this Highcharts file.

Like this:enter image description here

I am wondering since I will use highcharts stock, should I type highstock.js instead of highcharts.js?

Then codes included in the head section will be like:

A. INCLUDE HIGHCHARTS#
<script src="https://code.highcharts.com/highstock.js"></script>

B. ALTERNATIVELY, LOAD FILES FROM YOUR OWN DOMAIN#
<script src="/js/highstock.js"></script>

C. LOAD HIGHCHARTS STOCK OR HIGHCHARTS MAPS#
<script src="/js/highstock.js"></script>

That what I have done. I need some advices from people who are familiar with wordpress and highcharts. Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I find the way to add javascript on my website and finally built my first a Highcharts chart! I am not a developer so I don't know whether it is the correct way or not. But if someone faced the same problem like me, you can try it.

    1)Download 'Insert Headers and Footers' plugin. and type these in the section.

    <script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="/js/highstock.js"></script>

    2)Download 'Code Embed' plugins.

    3)Enter the javascript code in the 'New Custom Field' build by Code Embed.

    //**This my example you can try it**//
<script>Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function (data) {
  Highcharts.stockChart('container', {


    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Stock Price'
    },

    series: [{
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});</script>

    4)follow the Code Embed document to call the chart.


  2. 0

    Upload the script to a WordPress template or use a plugin like wpDataTables which allows you to select many type of charts and edit them.

    You should use highstock.js if you chosen Highcharts Stock

    <script src="https://code.highcharts.com/stock/highstock.js"></script>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search