i'm new in HTML and PHP. i follow the getting starts guide of Highcharts.com and i wrote the HTML file below. i save it like index2.htm, but it show me only "Before the script..." and no chart appear.
please help me.
Thanks a lot
<DOCTYPE HTML>
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<title>Highcharts Example</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<p>Before the script...</p>
<script>
$(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, 19]
}]
});
});
</script>
</body>
</html>
</pre>
The reason it doesn't work is that you've wrapped it in an anonymous jquery function and haven't included a JQuery reference.
If you just change you're script to be:
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, 19]
}]
});
Here's a simple fiddle of it working
You need to load jquery as the example you are looking at uses it. Add the jquery cdn to the head to load jquery:
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
See my code below:
<DOCTYPE HTML>
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<title>Highcharts Example</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<p>Before the script...</p>
<script>
$(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, 19]
}]
});
});
});
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="/js/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(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>
</body>
</html>
In this code i am simply trying to start with highchart. this code display highchart but no theme is applying to it. how to work with this line. it is not included. In console "GET http://localhost/js/themes/gray.js " this error is shown.
check this one..
<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript" src="/js/themes/gray.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Highcharts.setOptions(Highcharts.theme);
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>
</body>
</html>
This complete code works perfectly. I userd the cloudfare CDN for the theme file, which can be replaced by path to local file if you need.
<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(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>
</body>
</html>
For some reason I am unable to set the properites of a Javascript Object created in literal form.
Using PHP to write the Javascript code. The first chart Object chartObject1 displays correctly but the second chart chartObject2 does not display the title because I am attempting to set the title text property outside of the literal definition.
Why won't it let me set the property using chartObject2.title.text = "chart2"; ??
<?php
$chart_text = <<<EOD
<script type="text/javascript">
var chartObject1 = Object;
$(document).ready(function(){
chartObject1 = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'bar'
},
title: {
text: 'chart1'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]},
{
name: 'John',
data: [5, 7, 3]}]
});
});
</script>
EOD;
print ($chart_text);
$chart_text = <<<EOD
<script type="text/javascript">
var chartObject2 = Object;
$(document).ready(function(){
chartObject2 = new Highcharts.Chart({
chart: {
renderTo: 'chart2',
type: 'bar'
},
xAxis: {
categories: ['Spiders', 'Grasshoppers', 'Scorpions']
},
yAxis: {
title: {
text: 'Bugs eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]},
{
name: 'John',
data: [5, 7, 3]}]
});
chartObject2.title.text = "chart2";
});
</script>
EOD;
print ($chart_text);
?>
because its a Highcharts object, you would need to use their api to change the text.
Like this:
chartObject2.setTitle({text: "chart2"});
This is the high chart graph code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I want to add trend line for this chart, i searched in google and got the code from this link : https://github.com/virtualstaticvoid/highcharts_trendline
and i added the trend line code like this .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
and the trend line that acts according to the x-axis and y-axis values but on the x-axis values are date wise and the y-axis values are numbers ,please find the screen shot for the first code :
And this the trend line snapshot. please find.
please share any one of the code that i would like to add the two graphs in the same page , i have tried but the x-axis and y-axis values are different for the two graphs.
Thanks.
Numerous problems.
1.) You didn't really integrate the regresssion code into your plot, you just cut/pasted from the example and are over-drawing your plot. You need to add the regression line as a second series to your plot:
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: sourceData
},{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
2.) This is not valid javascript:
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
Those are strings and they aren't quoted. Regardless, strings won't cut it for the regression, it needs numbers. Since your dates are really categories, just use:
var sourceData = [
[0, 99.75], [1, 99.77],
[2, 99.78], [3, 99.84],
[4, 99.82], [5, 99.82],
[6, 99.76], [7, 99.78],
[8, 99.8], [9, 99.65],
[10, 99.94], [11, 99.8]
];
3.) Your series name is way too long for a right side legend (it squished the plot). In my example I moved it to the bottom.
Here's a example putting all this together.
You can use this Plugin that I believe will do what you want to.
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$('#container').highcharts('StockChart', {
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
xAxis: {
ordinal: false
},
yAxis: {
title : {
text : 'Price'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series : [{
name: 'Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: 'Linear Trendline',
linkedTo: 'primary',
showInLegend: true,
enableMouseTracking: false,
type: 'trendline',
algorithm: 'linear'
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script>
<div id="container" style="min-width: 500x; height: 400px; margin: 0 auto"></div>
Source:
http://www.highcharts.com/plugin-registry/single/16/technical-indicators
I currently tried to just implement the example from highcharts just to get a feel for it and play around, but it doesn't seem to be working. I tried loading their standalone framework, different versions of jQuery, but the chart will not render. Here is my code:
<!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>
</head>
<body>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
//alignTicks: false,
type: 'line',
renderTo: 'container'
},
$(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>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
Thanks in advance.
http://jsfiddle.net/rjreddy78/hgCPa/
<!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>
</head>
<body>
<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>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
You need to add
$(function () {
//chart code
});
or
$(document).ready(function(){
//chart code
});
I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.
I have a function "createChart" like this:
createChart(questiontitle, answers);
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options); // Create new chart with general options
chart.renderTo(container);
for (var i = 0; i < answers.length; i++) {
categories.push(answers[i].Text);
}
console.log(categories);
chart.xAxis[0].setCategories(categories);
chart.setTitle({ text: 'eerzera' });
// redraw chart
chart.redraw();
}
I have a div like this:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
As you can see I have "chart.renderTo" but I always get the same error:
Highcharts Error #13
Rendering div not found
This error occurs if the chart.renderTo option is misconfugured so
that Highcharts is unable to find the HTML element to render the chart
in.
My variable options is like this:
var options = {
chart: {
type: 'bar'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
}
How is this possible?
If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:
change
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options);
chart.renderTo(container);
to:
function createChart(questiontitle, answers){
chart = $('#container').highcharts(options);
or, if not using jQuery,
function createChart(questiontitle, answers){
options.chart.renderTo = 'container';
chart = new Highcharts.Chart(options);
In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the # if that element is an ID.
If you have this element <div id="graph-container"></div>
This fails:
renderTo: '#graph-container'
This works:
renderTo: 'graph-container'
Reference to the Highcharts docs
Something like this: chart.renderTo(container); doesn't exists in Highcharts.
To set renderTo use options:
var options = {
chart: {
type: 'bar',
renderTo: 'container'
},
You may be facing the same problem that i was.
Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:
<head>
<title>HighCharts :D</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
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]
}]
});
myChart.renderTo('container');
</script>
</body>