Wordpress Blog

[striedel]

I'm using Wordpress 2.9.2 and would like to use some Highcharts on my site. I have searched for several hours but haven't found any step-by-step directions on how to do this. As you can tell I'm fairly new to all of this. Any help would be very much appreciated. Thank You.

[RoadRash]

Hi,

1. Create a new folder named highcharts in the plugins folder (wp-content/plugins).
2. Upload the js folder from the downloaded Highcharts zip file (and the graphics folder if needed) to the newly created highcharts folder in plugins.
3. Go to Wordpress Dashboard => Appearance => Editor. Open Header (header.php).
4. Use one of the examples from the downloaded zip file for testing ÔÇô IÔÇÖm using spline-inverted.htm. View the source code and copy #1 and 2# between the head tags and paste it right above the closing head tag </head> in header.php in the Wordrpess Editor.
5. Edit the paths for highcharts.js and excanvas.compiled.js to full paths.
   This is the code from the example IÔÇÖm using (remember to edit the paths):

   Code: Select all

   <!-- 1. Add these JavaScript inclusions in the head of your page -->
   		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   		<script type="text/javascript" src="http://www.your-domain.com/wp-content/plugins/highcharts/js/highcharts.js"></script>
   		<!--[if IE]>
   			<script type="text/javascript" src=" http://www.your-domain.com/wp-content/plugins/highcharts/js/excanvas.compiled.js"></script>
   		<![endif]-->
   		
   		
   		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
   		<script type="text/javascript">
   		var chart;
   		$(document).ready(function() {
   			chart = new Highcharts.Chart({
   				chart: {
   					renderTo: 'container',
   					defaultSeriesType: 'spline',
   					inverted: true,
   					width: 500,
   					style: {
   						margin: '0 auto'
   					}
   				},
   			        title: {
   					text: 'Atmosphere Temperature by Altitude'
   				},
   			        subtitle: {
   					text: 'According to the Standard Atmosphere Model'
   				},
   				xAxis: {
   					reversed: false,
   					title: {
   						enabled: true,
   						text: 'Altitude',
   						margin: 50
   					},
   					labels: {
   						formatter: function() {
   							return this.value +'km';
   						}
   					},
   					maxPadding: 0.05,
   					showLastLabel: true
   				},
   				yAxis: {
   					title: {
   						text: 'Temperature'
   					},
   					labels: {
   						formatter: function() {
   							return this.value + '┬░';
   						}
   					},
   					lineWidth: 2
   				},
   				legend: {
   					enabled: false
   				},
   				tooltip: {
   					formatter: function() {
   						return '<b>'+ this.series.name +'</b><br/>'+
   							this.x +' km: '+ this.y +'┬░C';
   					}
   				},
   				plotOptions: {
   					spline: {
   						marker: {
   							enable: false
   						}
   					}
   				},
   				series: [{
   					name: 'Temperature',
   					data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1], 
   						[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
   				}]
   			});
   			
   			
   		});
   		</script>

6. Now we need to add the chart container to the post where you want the chart to appear.
   Find #3 from the example chartÔÇÖs source code:

   Code: Select all

   <!-- 3. Add the container -->
   <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 

   Paste in into your post in HTML view. (You may have to change the width of the container.)
7. Save Draft and Preview post ÔÇô you should now see your chart.

This is the result : http://roadrash.no/testwp/?cat=4

[striedel]

Thank You very much. I will try this out.

[wdgross]

Hello RoadRash,
I try your procedure but my template just use jQuery in every page and if I call jQuery from google api the only thing that is ok is highcharts. jQuery I think is loaded twice and crash. Is there a way to use highcharts without "<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>"?

Thak's a lot

Best reagards

Federico

[hfrntt]

You can just use jQuery which you already have on your site.

[Simon002]

Hey, I seem to be having the same sort of problem.

I use Wordpress 3.0.4 and I have imported all the javascript files needed. I can make it work on a seperate dummy page, but when I try to show my chart in wordpress, only the "frame" of the div is present in the blog post. However there is nothing at all inside.

Currently I am using the jQuery already existing in the blog.

[wdgross]

Hy,
I try it but I have the Simon002' problem. When I load the post or page with the chart inside, only the "frame" of the div tag is present without the chart.

[Simon002]

wdgross - you may want to read this blog post http://lorelle.wordpress.com/2005/09/16 ... wordpress/

Apparently wordpress.com users are not allowed to use javascript in their posts.

I am using the self-hosted version though, and I will try the solution when I have time.

[allixon]

I see´╝ü

[mukasama]

The problem with the empty container in wordpress.org sites can also be caused by jquery no-conflict mode. By default, WordPress loads the jQuery library in "no conflict" mode to prevent compatibility problems with other javascript libraries. In "no-confict" mode, the $ shortcut is not available. For the fix, scroll down to jQuery noConflict wrappers at: http://codex.wordpress.org/Function_Ref ... eue_script

Change: $(document).ready(function(){
});

To: jQuery(document).ready(function(){
});

OR to use the shortcut of $, use the following wrapper around your code:

jQuery(document).ready(function($) {
// $() will work as an alias for jQuery() inside of this function
});

[jean71141]

Hi! I want to use highcharts on my WordPress website, too.

I want to know what is 'the js file' refer in this step: 2. Upload the js folder from the downloaded Highcharts zip file (and the graphics folder if needed) to the newly created highcharts folder in plugins.

I downloaded Highcharts zip file, and it contain these files: https://i.imgur.com/PXkSj8h.png

I am wondering it is possible for you to offer these steps again because some of the descriptions words meaning is not clear to me. ex, 4. Use one of the examples from the downloaded zip file for testing ÔÇô IÔÇÖm....... What do ÔÇô IÔÇÖm mean? I try to use Google Translate but it still not clear to me.

[mateusz.b]

Hello jean71141,

Welcome to our forum and thanks for contacting us with your question!

On this forum we provide support strictly related to Highcharts. If you want to learn how to add Highcharts to WordPress (or other type of CMS) then you need to ask on forums like Stack Overflow: https://stackoverflow.com/questions/278 ... -wordpress

Also your downloaded zip file seems to be different from the official one from our github: https://github.com/highcharts/highcharts
Please try to download official one and read readme thoroughly, especially: https://github.com/highcharts/highchart ... highcharts
You can find there informations about downloading and installing Highcharts. You might want to try using our CDN instead of downloading full package.

Let me know if you have any further questions!
Regards!

[jean71141]

But I download the zip file on Highcharts website, https://www.highcharts.com/download/
Where should I download the correct, official one?

[sebastian.h]

Hi jean71141,

I will continue your topic at the StackOverflow:
https://stackoverflow.com/questions/700 ... -postquote

Best regards.