This is my first time using highcharts alongside with jade and the MEAN stack. I am able to get the chart to work on a jsfiddle, but it will not display anything inside of the div when running locally.
this is the jsfiddle I used jade-lang to convert the jade into html so I would be able to put it into jsfiddle.
<div id="chartcon" style="min-width: 310px; height:400px; margin 0 auto"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highchart.com/modules/exporting.js" type="text/javascript"></script>
$(function() {
$('#chartcon').highcharts({
chart: {
type: 'column'
},
title: {
text: 'colum chart w/ neg values'
},
xAxis: {
categories: ['Apples','Oranges', 'Pears']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5,3,4]
}, {
name: 'Jane',
data: [2,-2,-3]
}, {
name: 'Joe',
data: [3,4,5]
}]
});
});
I am trying to do this in a single jade file, which I have been thinking may be the problem (I can't find to much on using jade with highcharts so this leads me to think it may not be compatible?)
Related
EDIT here is the error from the console https://imgur.com/a/OvP9cRr
I want to run a bit of code in a Wordpress Pages which works in jsfiddle. https://jsfiddle.net/w9ta5x2e/.
I am just putting my code in the editor and I don't see anything. However the script will run if its something simple like: courtesy of https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>
I don't know how to create a .js file, it's a university setup wordpress site so I doubt I have much control with the root.
I can't make files on my Wordpress website, it is managed by a university and it doesn't allow me to
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
jQuery(function() {
$.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
});
</script>
Wordpress usually runs jQuery in noConflict mode making $ undefined
Try changing
jQuery(function() {// $ undefined here
To
jQuery(function($) { // $ is jQuery here
What am I doing wrong in this piece of code? When I use a local source for the theme it works correctly but it does not from github. I have looked through a lot of posts but cannot seem to find why this would not work, it is such simple code as well. The problem is in that second script with the theme but I do not know what, I also tried using it as "cdn.rawgit.com..." but that should not make any difference and it does not.
<html>
<head>
<title>HighCharts Page</title>
<!-- library (external) -->
<script src="http://code.highcharts.com/highcharts.js"> </script>
<script src="https://rawgit.com/highcharts/highcharts/master/js/themes/grid-light.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <script> $.getScript("https://raw.githubusercontent.com/highcharts/highcharts/master/js/themes/grid-light.js", function() {}); </script> -->
<!-- end library (external) -->
<!-- custom script (in-line JS) -->
<script>
//define a function here
$(function () {
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
<!-- end custom script (in-line JS) -->
</head>
<body>
<div id="container" style="width:100%; height:500px;">
</div>
</body>
</html>
It is probably something simple but thanks for the help.
Ok, the problem is that the file you use is the development version/source file which needs to be built in order to be functional (in current browser versions), as it imports other files (and import is not yet supported by most browsers directly).
Just use the CDN version at https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.12/js/themes/grid-light.js
I am working on a project that will display a bar chart. The bar chart is working perfectly but when I try to pass an integer php variable to javascript variable and add the variable as an element of a list isn't working. below is my code. I don't know what is wrong with my source code. I spend several hours finding for solution online but I don't get any.
Looking forward to see your response.
<html>
<head><title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<?php
//my php variable
$ab=6;
?>
<script type="text/javascript">
//assign the php variable to javascript variable
var za = <?php echo $ab; ?>;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// I'm putting the variable as an element below, but it's not working
data: [za, 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
For what it's worth, you should avoid interacting with javascript in this way. PHP works better when you're interacting with HTML, and let javascript be separate (this goes halfway towards using a true templating system, which you should do):
<?php
// page setup goes up here:
$ab = 6; // name your variables at little more descriptively, I don't know what this does
?>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container { height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto; }
</style>
<script type="text/javascript">
$(function () {
console.log($('#ab-variable').val());
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// We're referencing our hidden field in the HTML
data: [$('#ab-variable').val(), 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- we're including our variable here, in HTML, rather than in the javascript -->
<input type="hidden" id="ab-variable" value="<?= $ab; ?>">
<div id="container" style="height: 400px"></div>
</body>
... you can then look int the HTML and see that your hidden field has the correct value. If it's still not working, then you've got a problem with your javascript setup using highcharts.
If you write your code this way, you get the added benefit of being able to create a separate javascript file that will be cached at the client and they won't have to download it every time.
As is, it doesn't look like there's any inherent problem with your code, but re-factoring (when it's warranted) can sometimes suss out little bugs. To confirm that this code should work the way you want, I've added a console.log() call to ensure that your javascript can see your variable. To see anything more than that you'll have to provide a link to your page so we can see any errors that might be popping up.
i have a website, one page i have successfully added an highchart.
now i copied exactly the same code to the same page, but diffrent asp page, but the first chart has disappeared and the 2nd chart is not showing.
it is giving me an error:
Uncaught Highcharts error #16: www.highcharts.com/errors/16 highcharts.js:16
Uncaught SyntaxError: Unexpected token ILLEGAL Dashboard.aspx:657
Uncaught TypeError: Object [object Object] has no method 'highcharts' Dashboard.aspx:405
Uncaught TypeError: Object [object Object] has no method 'draggable'
any ideas why am getting this.
so my code for the new chart i want:
<script type="text/javascript"
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
></script>
the chart that is working has the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart'
},
xAxis: {
categories: array1
},
yAxis: {
title: {
text: 'aWH'
}
},
tooltip: {
pointFormat: "Value: {point.y:.1f} mm"
},
series: [{
name: '2011-2012',
color: '#0000FF',
data: array
},
{
name: '2012-2013',
color: '#92D050',
data: array3
},
{
color: '#FF0000',
name: '2013-2014',
data: array2
}]
});
});
</script>
the 2nd chart shows.
but the first chart doesnt,
both code is in diffrent acsx page!
if you go to Given Error Link
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.
Check whether you copied the scripts library for highcharts second time your code should contain only one time:
<script src="http://code.highcharts.com/highcharts.js"></script>
Edit
You are trying to show charts in same div as $('#container') Here container is the Id for div. When both ascx render in a page it find the same div with Id container and render the chart which override one of it. so
Make two separate divs:
<div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Remove script(following) from ascx and put it in MasterPage.:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
For chart One:
$('#container1').highcharts({//other code
For chart Two:
$('#container2').highcharts({//other code
You can use this way to wrap the code which runs Highcharts.js library.:
if (!window.HighchartsUniqueName) {
window.HighchartsUniqueName = true;
// .. your code which runs Highcharts.js library here ...
}
I found it here https://stackoverflow.com/a/5154971 and it works for me.
In this way you don't need to put your script in the MasterPage if you
don't want.
Be sure to use a very unique name, since it's a global variable.
Also keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file or you can wrap it in the same way.
So I am trying to use the HighCharts.js library to create a chart. Here is my code:
<html>
<head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chart1 = new Highcharts.Chart({
chart: { renderTo: 'container', type: 'bar' },
title: { text: 'Fruit Consumption'},
xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] },
yAxis: { title: { text: 'Fruit eaten'} },
series: [ {name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3]} ]
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;">
</div>
</body>
</html>
I have tried to run this in my browser, and nothing happens. Can someone tell me what I am doing wrong? Thanks
This is straight from the HighCharts demo page.
Alex W is right that you're referencing the theme incorrectly it is optional. The theme is actually a JS file but you need to use the Script syntax.
<script type="text/javascript" src="/js/themes/gray.js"></script>
I'd check your console to make sure you're loading all the scripts correctly. You're path might be wrong to the highcharts.js file.
That happened to me to but i solved using this:
#### This code is HighChart image ####
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
##### To show High Chart Code ####
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If this doesn't work try to save jquery.min.js , highchart.js and exporting.js in files.
If you need more help here try this:
http://stackoverflow.com/questions/19983869/issue-having-blank-graphic-in-highchart-script