nicki
Posts: 11
Joined: Thu Jul 05, 2012 9:41 am

Is this beyond a 'normal' person?

Hi,
I have basic HTML knowledge and have been running a website for over a year with no huge problems (creating pages typing in the code as and when needed etc and then uploading via ftp). I am now tasked with designing a website for an organisation. They want lots of interactive charts on their site. They have insisted on using wordpress.org (costs). I have two problems.
1. I don't even know where to begin on the high charts installation. As I am using wordpress I don't know where to begin looking for the code to insert the installation codes into.
2. I have seen lots of dialogue that suggests that Highcharts will not work with Wordpress due to JavaScript/Wordpress issues and cannot find advice on plugin solutions.

So I am slightly stuck as to what to do. Should I continue to try to work with high charts (do I have enough knowledge to even attempt to?) ? They want the full interactivity with users having the ability to customise the graphs to their own spec. and I can't find software other than high charts that has this level of interactivity. Can this be conquered by a mere mortal and if it can can it even be used in Wordpress sites?

Any help/advice/derision gratefully received

Cheers, Nicki :oops:
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Is this beyond a 'normal' person?

Hi I recently installed Highcharts in Wordpress. So I think I can help you. There are actually various ways for using Javascript in Wordpress, but this method is very basic and easy to understand.

These are the steps to be taken.

1. Upload the javascript files to %YOUR_TEMPLATE_DIR%\js

2. Open the header.php file and insert this for loading Highcharts in all pages.

Code: Select all

 <script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/highcharts.2.5.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/hc-config.js"></script>
or just for specific pages, do it like this;

Code: Select all

<?php if ( is_page('my-specific-page')) { ?>
<!--home page custom JS-->
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/highcharts.2.5.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/hc-config.js"></script>
<?php } ?>
3. In hc-config.js you can place the code which instantiates the chart and set all the options. For example;

Code: Select all

 $(document).ready(function() {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]

    });
});ÔÇï

Gert Vaartjes
Highsoft Solutions
CTO
Highsoft
nicki
Posts: 11
Joined: Thu Jul 05, 2012 9:41 am

Re: Is this beyond a 'normal' person?

I'm currently using an existing WP theme. Will I need to create a child theme to be able to manipulate the code as above? I'm really treading on unknown territory here and am currently trying to find my SQL database ;-) I really don't want to be be beaten by this. I have not even began to look at how I install and use HIghCharts if/when I get it working in WP!!

I knew I should have stuck to my guns and used DW to create the site from bottom up *sigh* everyone wants quick results nowadays :-(

N
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Is this beyond a 'normal' person?

Highcharts is one of the easier chart packages out there, and one of the most comprehensive as well.
If you can manage setting up Wordrpess, you can get through Highcharts.

Allowing the user to customize the appearance will have some challenges. But with the help you can find here, a 'normal' person can do it ;)

Wordpress is a good way to go for a lot of sites. Setting up a CMS is pain in the ass. Having an CMS to use once you've set it up...it's priceless.
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
nicki
Posts: 11
Joined: Thu Jul 05, 2012 9:41 am

Re: Is this beyond a 'normal' person?

I could literally squeeze you folks :-) Just having someone say you CAN do it makes me feel better :-)

I AM going to conquer this tonight I WILL have Highcharts running on my Wordpress website!

Thanks for the input so far please keep it coming :-)
nicki
Posts: 11
Joined: Thu Jul 05, 2012 9:41 am

Re: Is this beyond a 'normal' person?

Hi Gert,

Right I have spent the evening trying to follow the instruction, think I have the right idea but possibly the wrong files can you clarify the following:

1. When it says %YOUR_TEMPLATE_DIRECTORY%\js does this mean the theme (in my case catch box) and where would this file sit on my server?
2. Header.php - Which one do you mean? is it the one within the theme (catch box) folder or in the 'root' (hope thats the right term) directory?
3. I can't find the hc-config.js anywhere...where do i get it from?
4. When pasting in the code does it matter where I paste it (does it have to be after the 'body' bit or can it be right at the top/bottom)?

At present what I have done is:
1. uploaded the js folder from high charts installation folder to the public html/wpcontent/themes/catchbox/js
2. Pasted this (exactly - not changing the 'template_directory' bit (should I, if so where do I find out what my template directory is called) ):

<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/highcharts.2.5.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/hc-config.js"></script>

Into: public html/wpcontent/themes/catchbox/header.php

I have then tried to copy/paste one of the examples into the html section of a page on my site but it just loads up an empty box :-(

Please can you help again? I'm happy for you to look at my server if i'm not making this clear myself as I am not very conversant with techy language and directions :-)
I am determined to get this thing nailed :-)

many thanks,

Nicki :-)
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Is this beyond a 'normal' person?

Hi Nicki,

I hope you succeeded this weekend, but anyway here is my response.

1. 1. When it says %YOUR_TEMPLATE_DIRECTORY%\js does this mean the theme (in my case catch box) and where would this file sit on my server?
- This would be in your case: public html/wpcontent/themes/catchbox/js
2. Header.php - Which one do you mean? is it the one within the theme (catch box) folder or in the 'root' (hope thats the right term) directory?
- With the theme I used , there was a header.php file in the template directory, in your case: public html/wpcontent/themes/catchbox/header.php
3. The hc-config.js is a file you have to make yourself. In this file you write your javascript code to instantiate a graph.
4. I placed it between the HTML <header> tags. But when using JQuery's. $(document).ready() it makes no difference where you place it. The code will be executed after the whole document is loaded.

Good luck!

Gert
Highsoft Solutions
CTO
Highsoft
nicki
Posts: 11
Joined: Thu Jul 05, 2012 9:41 am

Re: Is this beyond a 'normal' person?

Gert!!!!
Huge big waves!

I must confess that I had to call in the help of someone much more literate in this than me (but he did say I wasn't a million miles away), he did say though that your instructions saved him hours of time in getting the charts to work on the site! And actually now I have read your response I 'think' even I might have got it right eventually!

I am now getting tied up integrating the buttons to allow users to export the charts from my site and creating a simple pie chart (I can see you now with your head in your hands weeping silently at the denseness of some of the users!)

If I don't crack it I will pop a new post up.

but a HUGE THANK YOU as just knowing I have the forums to help me is making this 100 times less stressful :-)

Nicki :-)
Gert Vaartjes
Posts: 217
Joined: Thu Apr 14, 2011 6:03 am

Re: Is this beyond a 'normal' person?

Hi Nicki,

No worries, you are probably missing the exporting.js file on your page.

Add this also to the header.php file

Code: Select all

<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/exporting.js"></script>
or use this link to get the exporting.js file http://code.highcharts.com/modules/exporting.js

Gert
CTO
Highsoft
gamingbench
Posts: 4
Joined: Fri Aug 08, 2014 5:32 pm

Re: Is this beyond a 'normal' person?

So I'm trying to do something similar, and this is an "oldie but goody" thread on the subject. Hopefully we can add something useful to the conversation, two years later. Here's my question/problem:

1) I uploaded the latest Highcharts/js files into my theme folder (just using twentyfourteen), so the files are in:
/public_html/wp-content/themes/twentyfourteen/js

2) I edited the header.php and placed in the appropriate lines I think, modified for the current version. (I'm not sure if the first line is required, but it seems to be.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/highcharts.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/hc-config.js"></script>
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/js/modules/exporting.js"></script>

3) With that, I can get a static chart to appear in a page by placing the appropriate <div id=xxx> tag. So far so good. The problem is, I want to use dynamically generated data, so basically I need to have the script that defines the chart as part of the page/post, not in hc-config.js. I have a PHP database I want to use to drive the generation of the data, and I can actually create an HTML table with the information, but getting that into a chart is really what I'm after.

Anyone out there have any ideas how to proceed?
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: Is this beyond a 'normal' person?

In hc-config I would advice to get data from that backend. Simple AJAX call should be the best option. In database store all info required for that charts (div id's, data, titles etc.) and you will get dynamic chart.
Paweł Fus
Highcharts Developer
gamingbench
Posts: 4
Joined: Fri Aug 08, 2014 5:32 pm

Re: Is this beyond a 'normal' person?

Clearly I'm doing something wrong... but I'm not sure exactly what. Hahaha.... Check out this page:
http://www.gamingbench.com/gaming-benchmarks/

When you select something from the dropdown list, you should get the data for a chart. (Select the first game for now, GRID Autosport -- there's no other data yet.) It appears to come across fine via AJAX looking at the DOM. So with GRID, the page gets the following and puts it in the <div id="gametable">:

Code: Select all

<script>
		var chart = new Highcharts.Chart({
			chart: {
				renderTo: 'gamingbenchchart',
				type: 'bar'
			},
			title: {
				text: 'GRID Autosport'
			},
			subtitle: {
				text: '2560x1440 4xAA Ultra'
			},
			xAxis: {
				categories: ['1x GeForce GTX 780 + Core i7-4770K', '1x GeForce GTX 770 + Core i7-4770K', '1x Radeon HD 7950 + Core i7-4770K (OC)', '2x Radeon HD 6970 CF + Core i7-4770K (OC)', '1x Radeon HD 6970 + Core i7-4770K (OC)'],
				title: {
					text: null
				}
			},
			series: [{
				name: 'Average FPS',
				data: [97.73, 69.63, 60.08, 69.55, 40.2]
			}, {
				name: 'Minimun FPS',
				data: [81.35, 59.44, 50.45, 29.65, 31.55]
			}],
			subtitle: {
				text: 'Frames Per Second (Higher Is Better)'
			},
			yAxis: {
				min: 0,
				title: {
					text: 'Frame Rate (FPS)'
				}
			},
			tooltip: {
				valueSuffix: ' FPS'
			},
			plotOptions: {
				bar: {
					dataLabels: {
						enabled: true
					}
				}
			},
			legend: {
				layout: 'vertical',
				align: 'center',
				verticalAlign: 'bottom',
				floating: false,
				borderWidth: 1,
				backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
				shadow: true
			},
			exporting: {
				enabled: false
			},
			credits: {
				enabled: false
			}
		});
</script>
<div id="gamingbenchchart" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Unfortunately, nothing every renders for the chart. :( I've also tried adding:

Code: Select all

$(function () { [all the stuff above...]})
...around the chart definition, but that doesn't help. I'm not sure what exactly I'm missing to get the chart to draw after getting the data. Help?
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: Is this beyond a 'normal' person?

Well, the problem is that you need to read about AJAX and loading Javascript using it ;) Right now you have:
Content-Type:text/html
So code isn't executed.

I would suggest to generate JSON on a server side, then when response arrives, use that JSON to generate required texts on a page and a chart. We are not Javascript support, only Highchartss - good luck!
Paweł Fus
Highcharts Developer

Return to “Highcharts Usage”