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)
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>
I have one html page where there are two divs. In each div I am loading different jsp files(one.jsp and two.jsp).
home.html:
<script src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/highcharts.js"></script>
<script type="text/javascript" src="resources/js/exporting.js"></script>
<script type="text/javascript" src="resources/js/export-csv.js"></script>
<script>
function loadGraphs()
{
$('#plotContainer1').load('one.jsp');
$('#plotContainer2').load('two.jsp');
}
</script>
where plotContainer1 and plotContainer2 are two divs. So that I want to load two graphs at a time.
one.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;
function drawgraph1() {
Highcharts.setOptions({
colors: ['#54CBE5', '#57B442']
});
chart = $('#container1').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: graphTitle
},
xAxis: {
tickInterval: 30,
type: 'datetime',
categories: xAxisCategories
},
yAxis: {
min : 0,
title: {
text: ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series : seriesArray
});
};
function callAjax() {
$("#container1").empty();
seriesArray = [{
name: 'line1',
data: []
}, {
name: 'line2',
data: []
}];
xAxisCategories = [];
var params = {"param1" : value};
$.getJSON("graph1datafetcher",params, function(data) {
$.each(data, function(key, val) {
var xaxisPoints=data[key];
xAxisCategories.push(Date.parse(key));
for(var i in xaxisPoints) {
seriesArray[i].data.push(xaxisPoints[i]);
}
});
console.log(" JSON: " + JSON.stringify(data));
drawgraph1();
});
}
</script>
</body>
</html>
two.jsp almost contains the same code. Now first two.jsp loads as it contains less data compared to one.jsp. When one.jsp loads in and shows up in div, the one.jsp graph shows two.jsp data and its own data too. I am logging the data in the console, the data that is coming is fine. So, the problem is somewhere the highchart persists the first data. I have been struggling with this for past 7 hours. Can someone please answer how to resolve this?
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.
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