I created a highchart element on my page. Then I wanted to rewrite it as a highstock element. I had some errors with highstock and I could`t get rid of them. Finally i copy-pasted highstock code from documentation but it also gives an error.
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>avra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="font/font-awesome/css/font-awesome.min.css">
<!-- HTML5 SHIV -->
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<![endif]-->
</head>
<body>
<main>
POP-UP
</main>
<div class="container">
</div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/highcharts/highstock.js"></script>
<!--<script type="text/javascript" src="node_modules/highcharts/modules/exporting.js"></script>-->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
My JS file:
$(document).ready(function(){
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var dataObject = {
rangeSelector: {
selected: 1,
inputEnabled: $('#container').width() > 480
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}],
chart: {
renderTo: 'container'
}
};
var chart = new Highcharts.StockChart(dataObject);
//var chart = $('#container').highcharts('StockChart', dataObject);
});
});
Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
You would like to try this:
var chartingOptions = {
chart: {
renderTo: 'Container_ID', //**Observation**
defaultSeriesType: 'column'
},
chart = new Highcharts.Chart(chartingOptions)
}
Related
I want to create a chart using Highcharts. I know nothing about JS :) I code in Java
I have a map in controller class:
Map<Integer, Integer> surveyMap = new LinkedHashMap<>();
surveyMap.put(10, 21);
surveyMap.put(12, 23);
surveyMap.put(14, 25);
surveyMap.put(16, 17);
Ant it is my html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h2 align="center">Technology Line Graph</h2>
<div id="container"
style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script th:inline="javascript">
$(function(){
Highcharts.chart('container', {
xAxis: {
title: {
text: 'Dive time'
}
},
yAxis: {
title: {
text: 'Dive Depth'
}
},
series: [{
data: [${surveyMap.values()},${surveyMap.values()}]
}]
});
});
</script>
</body>
</html>
Of course it doesn't work. How to set data from a map for x and y axis??
Maybe it is just a syntax error.
Are there any better solutions?
I am new to web development and am trying to use patternFly Donut chart for my project. But when I try to check it by running as simple HTML it throws below error. Could someone help me with this?
Error image
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
var c3ChartDefaults = $().c3ChartDefaults();
var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig.bindto = '#donut-chart-6';
utilizationDonutChartConfig.data = {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
};
utilizationDonutChartConfig.size = {
width: 200,
height: 171
};
utilizationDonutChartConfig.tooltip = {
contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
};
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
Your use of $() is confusing. Commenting out the lines that use it yields a donut chart. It seems like you're trying to load default configurations, but I didn't find any information on the c3 website indicating that it was a jQuery plugin. Perhaps you're misunderstanding what jQuery does? If you're trying to load some sort of default configurations from a form as JSON then you might need to get more creative.
For simplicity, in the example below I've reformatted your data as a single object.
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div id="donut-chart-6" class="example-donut-chart-utilization"></div>
<script>
//var c3ChartDefaults = $().c3ChartDefaults();
//var utilizationDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('A');
utilizationDonutChartConfig = {
bindto : '#donut-chart-6',
data : {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
},
size : {
width: 200,
height: 171
},
tooltip : {
//contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
}
}
var utilizationDonutChart = c3.generate(utilizationDonutChartConfig);
//$().pfSetDonutChartTitle("#donut-chart-6", "60", "MHz Used");
</script>
</body>
</html>
var c3ChartDefaults = (<any>$()).c3ChartDefaults();
This worked for me.
How can I execute a joint.js program? I have downloaded the required js files and have saved the below below code in an HTML file. I tried opening in IE and Chrome, but it resulted in a blank page instead:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
You have to take care of the version of the decencies, check the versions in below image, or else use the below CDN.
<link rel="stylesheet" href="joint.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
Clone jointjs project from https://github.com/clientIO/joint.git. And Go to demo folder, open any html file in browser.
I think that will help you to start work with jointjs.
dependencies are
jquery.js
backbone.js
joint.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/paper.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/joint.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
I'm using HighCharts to display some information. The Chart doesnt seem to show in the Div, unless I place the page away from the root. For example, the below code brings up the chart as expected when saved and opened from my desktop, BUT it shows blank when opened from the root directory of my site (root);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Election Results | First for Kirkby</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<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>
</head>
<body data-post="free-responsive-html5-businessportfolio-template-amazingbiz">
<div class="container box_shadow">
<!--#include FILE="header.html"-->
<!--page_container-->
<div class="page_container">
<div class="wrap">
<div class="breadcrumb">
<div>
Home<span>/</span>Election Results
</div>
</div>
<div class="container">
<section>
<div class="page-header">
<h2 class="title">Election Results</h2>
</div>
<div id="container" style="width:50%; height:400px;">
</div>
</section>
</div>
</div>
</div>
<!--#include FILE="footer.html"-->
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/top-bar.js" ></script>
<script type="text/javascript" src="../wp-content/themes/piha/js/bsa-ads.js" ></script> <!--Dynamically creates analytics markup-->
</body>
</html>
Any help would be appreciated in making this show in the page its meant to show in!
Thanks
I have tried plotting on highchart, the code works okay on jsfiddle but fails when I test it locally.
I'm using flask, jinja2 and twitter-bootstrap in my code. The data for the highcharts is supplied as json dumps (marked safe) by jinja2.
I cannot figure out my the chart is not appearing on my browser.
I'm testing the code on firefox, so it's not a IE issue.
I'm also fetching jquery before highcharts.js so the import order is okay.
code:
`
<script type="text/javascript" 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 src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="/static/bootstrap3/js/jquery-1.js"></script>
<script src="/static/bootstrap3/js/bootstrap.js"></script>
<script src="/static/bootstrap3/js/docs.js"></script>
<script src="/static/js/Chart.js"></script>
<link rel="shortcut icon" href="/static/"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.css"/>
<!-- custom styles -->
<link rel="stylesheet" href="/static/css/dashboard.css"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css" id="holderjs-style"></style>
<title>
Weekly Reports
</title>
</head>
<div id="percentiles" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(function () {
$('#percentiles').highcharts({
title:{
text: 'Gas Usage Weekly Percentiles',
x: -20 //center
},
xAxis:{
categories : ["week 4", "week 5", "week 6", "week 7"]
},
yAxis: {
title: {
text: 'Percentiles'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '25th',
data: [0.69499999999999995, 0.01, 1.5350000000000001, 2.0175000000000001]
},{
name: '50th',
data: [3.2349999999999999, 1.6349999999999998, 3.25, 3.2599999999999998]
},{
name: '75th',
data: [4.4925000000000006, 4.4625000000000004, 4.9300000000000006, 4.2575000000000003]
}]
});
});
</script>
</html>`