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>`
Related
This is my code, I am trying to populated the grid using the data added in data.json, a default sorting is supposed to be added to the jqgrid which doesn't happen. I have given data in data.json which will be populated on the grid. Paging works but sorting doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jqgrid/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery-ui-1.12.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="js/jqgrid/jqgridscreen-min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/custom.css" />
<meta charset="utf-8" />
<title>jqGrid Loading Data - JSON</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
datatype: "json",
colModel: [
{ label: 'Category Name', name: 'CategoryName', width: 75, sorttype:'string' },
{ label: 'Product Name', name: 'ProductName', width: 90, sorttype:'string' },
{ label: 'Country', name: 'Country', width: 100, sorttype:'string'},
{ label: 'Price', name: 'Price', width: 80, sorttype:'float' },
{ label: 'Quantity', name: 'Quantity', width: 80, sorttype:'integer' }
],
loadonce: true,
gridview: true,
autoencode: true,
width: 780,
height: 200,
rowNum: 15,
viewrecords: true,
pager: "#jqGridPager",
loadComplete: function () {
var $self = $(this);
if ($self.jqGrid("getGridParam", "datatype") === "json") {
setTimeout(function () {
$self.trigger("reloadGrid"); // Call to fix client-side sorting
}, 50);
}
}
});
});
</script>
</body>
</html>
What is the mistake and why sorting doesn't occur?
If you use free jqGrid fork, then you can remove your current loadComplete and to add forceClientSorting: true option instead. The option works only in combination with loadonce: true. It allows to sort and to filter the data locally direct after loading from the server. See UPDATE part of the old answer
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 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)
}
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