admin管理员组文章数量:1399490
I have a .tpl file and I want to add a couple of charts to it. The values are to be fetched from MySQL database. For the charts, I am using Highcharts.
Here is the fiddle I want my charts to look exactly like it, ofcourse the values would change.
.9.1/highslide-software/highcharts/tree/master/samples/highcharts/demo/column-basic/
So my code is:
<head>
<script src=".js"></script>
<script src=".js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
<script>
</script>
</body>
When I put this in my .tpl file, it shows nothing. Can anyone say what am I doing wrong. Should I add the latest version of jquery or something..
I have an additional thing to mention, when I try to use this in a separate jsfiddle, it doesn't work there as well.
I have a .tpl file and I want to add a couple of charts to it. The values are to be fetched from MySQL database. For the charts, I am using Highcharts.
Here is the fiddle I want my charts to look exactly like it, ofcourse the values would change.
http://jsfiddle/gh/get/jquery/1.9.1/highslide-software/highcharts./tree/master/samples/highcharts/demo/column-basic/
So my code is:
<head>
<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
<script>
</script>
</body>
When I put this in my .tpl file, it shows nothing. Can anyone say what am I doing wrong. Should I add the latest version of jquery or something..
I have an additional thing to mention, when I try to use this in a separate jsfiddle, it doesn't work there as well.
Share Improve this question edited Nov 25, 2014 at 12:17 Roland asked Nov 25, 2014 at 12:01 RolandRoland 571 gold badge5 silver badges13 bronze badges 4-
you have a stray
<script>tag near the end, and yes, highcharts requires jQuery, include it first – andrew Commented Nov 25, 2014 at 12:08 - I have included jquery-1.9.2.js in the head. And as for that additional <script>, it was my mistake – Roland Commented Nov 25, 2014 at 12:11
- But your head tag is shown in the provided code and you do not include jquery there – sebbzzz Commented Nov 25, 2014 at 13:40
- Could you please suggest any other graph representation method.. – Roland Commented Nov 25, 2014 at 15:53
5 Answers
Reset to default 3<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
You most likely did not include jquery. I pasted you exact code (without the extra script tag) in a jsfiddle and it worked.
http://jsfiddle/3zgjgvhu/
<script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Make sure to always try the jQuery document ready function first, when an error occurs.
<head>
<script src="/js/jquery-3.2.1.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
/ / code
});
</script>
Please add this script at the head header in given order .
src="http://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js">
src="http://code.highcharts./highcharts.js">
src="http://code.highcharts./modules/exporting.js">
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/exporting.js"></script>
<script>
$(function () {
var issueData = {"WAR":13,"VTO":14,"EXWH":33};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Total tickets for each project'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"bug":8,"false":5};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container1').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'WAR DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"true":3,"false":11};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container2').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'VTO DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
$(function () {
var issueData = {"true":8,"false":6};
var pieData = [];
for (i in issueData) {
pieData.push([i,issueData[i]] );
}
$('#container3').highcharts({
chart: {
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'EXWH DOne status '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: pieData
}]
});
});
</script>
<title>Charts</title>
</head>
<body>
<div id="container" style="height: 400px"></div>
<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>
</body>
</html>
本文标签： javascriptHighcharts not showing upStack Overflow
版权声明：本文标题：javascript - Highcharts not showing up - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744217450a2595705.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论