I'm trying to use highcharts example. But it doesn't work, I cannot understand, have I missed something?
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
</head>
<body>
<h1>Highcharts example</h1>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<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" src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
</script>
</body></html>
I've already tried to play with this paths, but no matter:
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
How to set a right path? For example, I use path like "highcharts/js/highcharts.js" and it's real exist in a project directory.
You missed the
</html>
tag at the end.
However, your code on a fiddle works well.
I just copied your code and paste it in a html file. It's working very fine.
Here is the screenshot
Related
I am following the highcharts get started tutorial here: http://www.highcharts.com/docs/getting-started/your-first-chart
For some reason the code works in a separate HTML file, but not when it's part of my Yeoman built web application
I've fallen at the first hurdle and get the following error:
TypeError: $(...).highcharts is not a function
My code is below and here is the full error:
TypeError: $(...).highcharts is not a function
at HTMLDocument.eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5),
:2:21)
at fire (http://localhost:9000/bower_components/jquery/dist/jquery.js:3099:30)
at Object.self.add [as done] (http://localhost:9000/bower_components/jquery/dist/jquery.js:3145:7)
at jQuery.fn.ready (http://localhost:9000/bower_components/jquery/dist/jquery.js:3378:25)
at jQuery.fn.init (http://localhost:9000/bower_components/jquery/dist/jquery.js:2821:16)
at jQuery (http://localhost:9000/bower_components/jquery/dist/jquery.js:76:10)
at eval (eval at (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5),
:1:1)
at eval (native)
at Function.jQuery.extend.globalEval (http://localhost:9000/bower_components/jquery/dist/jquery.js:328:5)
at jQuery.fn.extend.domManip (http://localhost:9000/bower_components/jquery/dist/jquery.js:5435:16)
There are multiple other posts about this - however none of the solutions have worked for me, can't see what I'm doing wrong here, all I've done is copy the tutorial.
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.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>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.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>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
works fine. Just removed the double closing brackets from closing html tag.
I am trying to run the basic example for a line chart from epoch (which is built on top of d3 ) http://fastly.github.io/epoch/basic/
Below is the code provided in the website:
<html>
<head>
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="epoch.min.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/epoch.min.css">
</head>
<body>
<div id="lineChart" style="width: 800px; height: 200px"></div>
<script>
var lineChartData = [
// First series
{
label: "Series 1",
values: [ {time: 1370044800, y: 100}, {time: 1370044801, y: 1000}]
},
// The second series
{
label: "Series 2",
values: [ {time: 1370044800, y: 78}, {time: 1370044801, y: 98}]
},
];
$('#lineChart').epoch({
type: 'time.bar',
data: lineChartData
});
</script>
</body>
</html>
I am getting : Uncaught TypeError: undefined is not a function index.html:(line that has epoch keyword in it) (anonymous function)
Any ideas what is missed here?
You just need to switch your script includes around a little, putting jquery first:
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="epoch.min.js"></script>
Ok so I am trying to make a basic bar chart using highcharts and I am trying to use data that is contained in a QuickBase database, I have managed to pull the data from the server, I used an API call and have the data using this
http://pastebin.com/fJry1jA8
<!Doctype html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.src.js"></script>
<script>
var dbidApplication = "-EDITED OUT-";
var dbidTable = "-EDITED OUT-";
var apptoken = "-EDITED OUT-";
$.ajaxSetup({data: {apptoken: apptoken}});
var promise1 = $.get(dbidApplication , {
a: "dbpage",
pagename: "chart.html"
});
var promise2 = $.get(dbidTable, {
act: "API_GenResultsTable",
query: "{14.EX.'_FID_9}",
clist: "7.24.25.26.27.28.29.30.31.32.33.34.35.36.37",
jsa: 1,
options: "num-1",
});
$.when(promise1, promise2).then(function(chartArgs, dataArgs) {
var chart = chartArgs[0];
var markup = new Highcharts.Chart(chart, qdb_data);
console.log(markup);
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
renderTo: 'container',
},
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>
</body>
</html>
I've looked up examples of what people have told me, but now I am confused between being told I need to parse,pluck,get,and a list of other things that I have no clue what to look into so I can actually use this data, but I am looking for an explanation of whats actually going on also (I really don't find it helpful to see a bunch of code where half of it I don't understand because I haven't learned to that yet, its rather depressing)
so I've created a database to store scientific research data and i wanted to created graphs out of this data. i want to use Highcharts but i can't even get the example code form the Highcharts website to work. i am new to web development so i'm not really sure where i'm going wrong.
<!DOCTYPE html>
<html>
<head>
<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>
<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>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<h2>Hey now brown cow</h2>
</body>
</html>
also the "hey now brown cow" is just in there so i know the html file works.
Trying to do a really basic highchart, but I keep getting the error: "JavaScript critical error at line 42, column 12. SCRIPT1014: Invalid character. I have included jQuery in the header so I'm not sure what I'm doing wrong. Testing with IE.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<title></title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<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>
</body>
</html>
I got a special character '?' when I copy your code just after the last semicolon.
Try to copy your code in a text editor (notepad++ for me), remove this character and copy again your page.
It has worked for me.
I took out the very last ";" in the jQuery block of code and it worked. Weird...
In the future I advice to use jslint which check your syntax.