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.
Related
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've been trying for the past several hours to get my Highcharts loaded.
Everything seems to be correct. I have Jquery before the Highcharts reference.
I have no errors on my console within Chrome.
I'd like it to look like this (working JQuery)
Working Jquery
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/static/highcharts/js/highcharts.js"></script>
<script src="/static/highcharts/js/modules/exporting.js"></script>
<title>Tool Tracker</title>
<body>
<div>
<div id="chart_id" class="chart" style="height:100px; width:100%"></div>
</div>
<!-- Maps the Python template context variables from views.py to the Highchart js variables -->
<script>
var chart_id = chart_id
var chart = {'renderTo': 'chart_id', 'height': 500}
var title = {'text': '123456 Tool life by Location'}
var xAxis = {'categories': ['T01', 'T02']}
var series = [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
</script>
<!-- Highchart js. Variable map shown above -->
<script>
$(document).ready(function() {
$(chart_id).highcharts({
chart: chart,
title: title,
xAxis: xAxis,
series: series
});
});
</script>
</body>
Below is a JSfiddle - Not working
THANK YOU for your help!
You not working fiddle has 2 problems:
First, all the scripts are included 2 times, both in the html part and in the External resource tool of JSfiddle. You need to either remove the external resources or remove the <script> tags.
Second, in the first line of your javascript var chart_id = 'chart_id you missed the closing '; and the # before the chart_id to let JQuery know it's an ID you are refering to.
var chart_id = '#chart_id'; Is what you want.
Working JSfiddle
HTML code from original sample:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Javascript code with your data:
$(function () {
$('#container').highcharts({
title: {
text: '123456 Tool life by Location'
},
xAxis: {
categories: ['T01', 'T02']
},
labels: {
items: [{
html: 'Some text',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{'data': [211, 550], 'type': 'column', 'name': 'Average'}]
});
});
Result: http://jsfiddle.net/logual/9gpw688e/1/
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?)
When i try to use the simple highcharts example, I get the error:
Uncaught TypeError: undefined is not a function
In addition to :
TypeError: undefined is not a function
at Object.Ya.init (https://code.highcharts.com/highcharts.js:190:496)
at Object.Ya (https://code.highcharts.com/highcharts.js:15:312)
at HTMLDocument.eval (eval at <anonymous> (https://localhost:3000/bower_components/jquery/dist/jquery.js:330:5), <anonymous>:4:15)
at fire (https://localhost:3000/bower_components/jquery/dist/jquery.js:3073:30)
at Object.self.add [as done] (https://localhost:3000/bower_components/jquery/dist/jquery.js:3119:7)
at jQuery.fn.ready (https://localhost:3000/bower_components/jquery/dist/jquery.js:3352:25)
at jQuery.fn.init (https://localhost:3000/bower_components/jquery/dist/jquery.js:2794:16)
at jQuery (https://localhost:3000/bower_components/jquery/dist/jquery.js:76:10)
at eval (eval at <anonymous> (https://localhost:3000/bower_components/jquery/dist/jquery.js:330:5), <anonymous>:1:1)
My code is the simple example on the highcharts website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(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>
I've also tried the version where the first line inside is
var chart = new Highcharts.Chart({
When I print out what Highcharts is, it goes give me the right object. jQuery is loaded and working.
What else can I try at this point?
You need to load JQuery before highcharts.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
Okay, this issue was actually really straightforward. There was a script tag loading highcharts in earlier code and it was conflicting with the injection in this line.
If you see this error, check if highcharts had been injected already.
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