Heyho!
I tried all the day to bind the data of a JSON file to the data model of a SAPUI5 chart but without success. I miss the link between the JSON file and the dataset by path.
Added is the file containing the standalone code but without the json file which just contains calday and counter with some data. There seems no problem by defining the data directly in the script as data and refering in the dataset to it. Which I tried lately as you recognize at the /data path.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flattened DataSet bound to OData Entity with filter</title>
<link rel="stylesheet" type="text/css" href="">
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.viz" data-sap-ui-theme="sap_goldreflection">
</script>
<script>
var oModelJSON = new sap.ui.model.json.JSONModel();
oModelJSON.loadData(file.json);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis: 1,
name: 'Calendar Day',
value: "{calday}"
}],
measures: [{
name: 'Counter',
value: '{counter}'
}],
data: {
path: "/data"
}
});
var oChart = new sap.viz.ui5.Column({
width: "80%",
height: "400px",
plotArea: {
'colorPalette': d3.scale.category20().range()
},
title: {
visible: true,
text: 'Counter per Calendar Day'
},
dataset: oDataset
});
oChart.setModel(oModelJSON );
oChart.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Related
I have tried to link the neo4j to the web page but the code does not run successfully. Has anyone done that before?is it because of the part where I try to import the json file into the neo4j database or is it due to other part of the code?
<html>
<head>
<title>Data Visualization</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://cdn.neo4jlabs.com/neovis.js/v1.5.0/neovis.js"></script>
</head>
<script>
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "neo4j",
server_password: "secret",
labels: {
Troll: {
caption: "user_key",
size: "pagerank",
community: "community",
},
},
relationships: {},
initial_cypher:"call apoc.load.json("file:/graph-phase1-labelled1.json")
yield value
unwind value.nodes as nodes
unwind nodes.properties as prop
with prop where prop.sourceIP is not null
with prop where prop.destIP is not null merge(n1:Node{src:prop.sourceIP})
merge(n2:Node{dest:prop.destIP})
with prop,n1,n2
merge (n1)-[ :connected_to]->(n2) return n1,n2,prop",};
var viz = new NeoVis.default(config);
viz.render();
}
</script>
<body onload="draw()">
<div id="viz"></div>
</body>
</html>
So I want to try to make a website that includes charts. I used chart.js for it. Now i try to make two charts so i copied the one i make before and changed its variable but it doesn't shown up on my html page. What i want to ask is, is it possible to make 2 charts using chart.js and I did it the wrong way or i only can make one chart? Thank you.
By the way, here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Chart Page</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
<canvas id="myChart2"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
<script>
let myChart2 = document.getElementById('myChart2').getContext('2d');
let massPopChart = new Chart(myChart2, {
type: 'bar',
data: {
labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets:[{
label : 'Population',
data: [
617594,
181045,
153060,
106519,
105162,
95072
],
}]
},
options : {},
});
</script>
</body>
You are using the same variable name for both of the charts that is massPopChart. You just need to change the variable name to massPopChart1 and massPopChart2.
Just check out the proper working here https://jsfiddle.net/4gdtujve/
The c3js chart is not displaying properly when I have a date field in a CSV file.
I have set the x axis as type timeseries.
There are only two columns in CSV file. "Date" and "count", e.g.
Date,Count
1996-12-20,1
1997-01-31,2
1997-01-31,3
1997-05-07,4
1997-10-03,5
1997-12-02,6
1997-12-02,7
<html>
<link href="http://c3js.org/css/c3-f750e4d4.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"/></script>
<script type='text/javascript' src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> <!-- This one allows for oninit -->
<div class='chart'>
<div id='chart'></div>
</div>
<head>
<title>Data from CSV file</title>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'Date', //the x-axis
x_Format: '%Y-%m-%d', // 'xFormat' can be used as custom format of 'x', default '%Y-%m-%d'
url: '/dates.csv', //it won't work locally. You need to upload it to a web server
},
x: {
type: 'timeseries', //date format in CSV file needs to be 2000-06-14
}
});
</script>
</head>
<body>
</body>
</html>
This is what is displayed:
I forgot to add the axis before the x:
axis: {
x: {
type: 'timeseries', //date format in CSV file needs to be 2000-06-14
}
}
and now it works fine.
New to Typeahead/Bloodhound, and I'm struggling to get a very basic example of Typeahad.js working on localhost when querying a simple rest service that returns valid json. When I point my url to one used in the typeahead examples, it works fine (by "works", I mean the suggestion popup appears with the default string representation i.e. json). I am returning valid json and the appropriate header
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>States</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script>
$(document).ready(function () {
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
//local: states
remote: {
url: '../search.php?q=%QUERY',
//url: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
wildcard: '%QUERY'
}
});
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
//display: 'value',
source: states
});
});
</script>
</head>
<body>
<div id="the-basics">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
Image showing the response headers for my service.
Any idea what I may be doing wrong?
i plug some utility files to the main application.
But on function Flang() from there is not referenced: web sniffer in console issues:
ReferenceError: FLang is not defined
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
<script type="text/javascript" src="application.js" ></script>
<script type="text/javascript" src="js/menu.js" ></script>
<script type="text/javascript" src="js/lang.js" ></script>
<script type="text/javascript" src="js/directories/assortment.js" ></script>
<title id="page-title">Main Application v.2.0</title>
...
lang.js:
...
function FLang(str){
if (ComboBoxLang.getValue()=='en')
return str;
else if (ComboBoxLang.getValue()=='ru')
return FappLangRu(str);
else
return str;
};
In the network inspector i see this file lang.js loaded, yet still this function is not defined:
at application.js (last line in this snippet):
application.js:
Ext.Loader.setPath('Ext.ux', '../app/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.*',
]);
Ext.ns("appMain");
...
appMain.NorthRegion = Ext.create('Ext.panel.Panel', {
region: 'north',
xtype: 'panel',
id: 'NorthRegion',
border:true,
title: FLang('Subsystems'),
appMain.WestRegion= Ext.create('Ext.panel.Panel', {
region: 'west',
xtype: 'panel',
collapsible: true,
floatable: true,
width: 100,
split: true,
border:true,
title: FLang('Subsystem control'),
}); // end of $WestRegion
appMain.CenterRegion = Ext.create('Ext.tab.Panel', {
region: 'center',
xtype: 'tabpanel',
border: true,
title: FLang('Main window'),
autoScroll:true,
});
Does it somehow relate to namespacing, since prior to that without namespacing there was no reference problem?
Edits
After defining all the regions and their contents, we start app this way:
Ext.onReady(function() {
var MainView = Ext.create('Ext.Viewport', {
layout:'border',
border:true,
items:[
appMain.NorthRegion,
appMain.WestRegion,
appMain.CenterRegion
], // end of viewport items
});
}); // end of Ext.onReady() function
Try to change order of including lang.js and application.js in your index.html. However, even if it does work there is still one problem. You must not create components before the document is ready, hence, all Ext.create calls must be wrapped in onReady.
See Ext/Touch Component Life Cycle to learn more.