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
Related
I wrote a php script with target to use $.getJSON() function.#
The live-temp-data.php create an json file with data like this:Data
This is the result : linechart
what am I doing wrong ? Code below.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highcharts Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("live-temp-data.php", function(json) {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'steinhagen-wetter.de'
},
subtitle: {
text: '2020'
},
yAxis: {
title: {
text: 'Temperature(°C)'
}
},
time:{
timezone: 'Europe/ Berlin'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: '%H:%M',
},
},
series: [{
name: 'Outside Temp °C',
data: json
}]
});
});
});
});
</script>
</head>
</html>
1) Open the web console, and you will see the following message :
https://www.highcharts.com/errors/25/
If you browse this page, you will have the error message :
Can't find Moment.js library
Using the global.timezone option requires the Moment.js library to be
loaded.
So import that library, or remove this option, and that problem should be solved.
2) your HTML document is invalid, everything is in the head section, you should have a body section that contains your graph container.
3) your JSON is not valid : ["[1584713222000, 6.5]","[1584713572000, 6.6]","[1584713989000, 6.7]", ...
You should not have quotes around the data items.
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'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?)
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.