I have struggled 2 days to be able to work with high charts with Wordpress. I guess to save time and effort for someone new who wants to do the same thing, Please follow below steps.
I have read many blogs including forums and I found help from variety of sources and I thanks all of you guys.
Firstly please read this how someone tried.
http://forum.highcharts.com/highcharts-usage/is-this-beyond-a-normal-person-t18807/#p76296
I still was not able to load the high charts. But I have implemented the following steps ( inline with the above link)
1)Download Highchart software and unzip from http://www.highcharts.com/products/highcharts
2)Now upload all the files with in the js folder into your cpanel. Here one has to be careful in terms of where you are uploading. Locate public_html folder and follow this path to next folder /wp-content/themes/ and then to your themes folder (for instance catch-box) and lastly folder js. It should look like this public_html/wp-content/themes/catch-box/js
3) Create the directory structure of the Highcharts (js) folder and upload files. (modules, themes, adapter)
4)Next step is to update Header.php in the folder public_html/wp-content/themes/catch-box
5) To this file add the following two things
6)Add the following code in a new page
I have read many blogs including forums and I found help from variety of sources and I thanks all of you guys.
Firstly please read this how someone tried.
http://forum.highcharts.com/highcharts-usage/is-this-beyond-a-normal-person-t18807/#p76296
I still was not able to load the high charts. But I have implemented the following steps ( inline with the above link)
1)Download Highchart software and unzip from http://www.highcharts.com/products/highcharts
2)Now upload all the files with in the js folder into your cpanel. Here one has to be careful in terms of where you are uploading. Locate public_html folder and follow this path to next folder /wp-content/themes/ and then to your themes folder (for instance catch-box) and lastly folder js. It should look like this public_html/wp-content/themes/catch-box/js
3) Create the directory structure of the Highcharts (js) folder and upload files. (modules, themes, adapter)
4)Next step is to update Header.php in the folder public_html/wp-content/themes/catch-box
5) To this file add the following two things
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<br>
<script src="<?php bloginfo('template_directory'); ?>/js/highcharts.js" type="text/javascript"></script>"<br />
6)Add the following code in a new page
<html>
<head>
<title>Rates View - 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Rates - Feb 28 - View - 1',
x: -20 //center
},
subtitle: {
text: 'Source: DTCC',
x: -20
},
xAxis: {
categories: ['Basis Swaps', 'CapFloors', 'Exotic', 'Fixed Fixed Swaps', 'FRA', 'Inflation Swaps', 'OIS Swaps', 'Swaption', 'Vanilla Swaps', 'X-Ccy-Basis', 'X-Ccy-Fixed-Fixed', 'X-Ccy-Fixed-Float'
]
},
yAxis: {
title: {
text: 'Sum of Notional USD'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'USD'
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Total',
data: [10337207913,28876709079,27143522556,78690127.08,58717429750,4102063542,1.85611E+11,1.21484E+11,3.37014E+11,7116442472,268174806.4,4632368916]
}]
});
});
</script>
</head>
<body>
<div id="container" style="height: 400px; margin: 0 auto; min-width: 310px;">
</div>
</body>
</html>
No comments:
Post a Comment