I want to plot a scatter chart with timestamp values in x-axis. 'Power' and 'No of plugs' in y-axis. The Power values is in the range of 0 - 60000 and 'No of plugs' in the range of 0 - 600. When I tried with the below code I'm getting wrong plot.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Power Measurements</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.layout">
</script>
<script>
var inputData = $powerValues;
var oModel = new sap.ui.model.json.JSONModel({
graphData : inputData
});
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1,
name : 'Timestamp',
value : "{timestamp}"
}
],
measures : [
{
group: 1,
name : 'Power (in KW.h)',
value : '{power}'
},
{
group: 2,
name : 'No of Plugs',
value : '{plugs}'
}
],
data : {
path : "/graphData"
}
});
var line = new sap.viz.ui5.Scatter({
id : "idscatter",
width : "100%",
height : "400px",
title : {
visible : true,
text : 'Power Utilisation'
},
xAxis : {
title : {
visible : true
}
},
yAxis : {
title : {
visible : true
}
},
dataset : dataset
});
line.setModel(oModel);
line.placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
Click here for existing output chart
In the above chart I need timestamp as x-axis. 'No. of plugs' and 'Power' as two different plots in the same chart (Values of these two are in different ranges).
Thanks.
Related
The following is my code, an example on echarts, referring to echarts.min.js, but changing to echarts.js will not display the chart, and the dom will also display。
<head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="main" style="height:600px; width:600px;background-color: aqua;"></div>
<script type="text/javascript" >
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
as the picture, I hope show the value in the right align, but did not found option. any help? thanks
You can simply add another axis to achieve this, like demo below:
It kind of like a trick.
let echartsObj = echarts.init(document.querySelector('#canvas'));
let seriesData = [1, 1, 2, 3, 4, 6, 8];
option = {
color: ['#3398DB'],
grid: {
containLabel: true
},
yAxis : [
{
type : 'category',
data : ['192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.167', '192.168.12.15', '192.168.167'],
},
{
type : 'category',
data : seriesData,
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
xAxis : [
{
type : 'value',
splitLine: {
show: false
}
}
],
series : [
{
type:'bar',
data:seriesData
}
]
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 400px">
</div>
</body>
</html>
Does anyone know how to format the vAxis to percent? I've tried so many things, to no avail. Code is below. I've tried NumberFormatter vAxis options...
Thanks!
Chelsea
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
series: {
vAxis: {format: "###'%'"},
}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
vAxis should not be defined within series
it should at the first level within options
var options = {
vAxis: {format: "#,##0%"}
...
as for the format string,
adding % to the end, will convert the number to a percentage
see following working snippet...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1mMYa6kqWIasGhdDG3i7YS5bzK_mtXT0_m0oqcYB-Loo/edit#gid=0?range=A1:C5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('student_chart'));
var options = {
isStacked: 'false',
title: 'TPRI Averages 2015-16 (Students Performing on Grade Level)',
curveType: 'function',
legend: { gridlines: 'bottom' },
colors: ['red', 'purple'],
pointSize: 20,
vAxis: {format: "#,##0%"}
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="student_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
I simply want to delete a node from my jstree but so far no luck.
HTML:
<!doctype html>
<html>
<head>
<title> </title>
<!-- scripts -->
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js_tree/dist/jstree.js"></script>
<script src="../js/tree.js"></script>
<!-- Styles -->
<link rel='stylesheet' href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../js_tree/dist/themes/default/style.min.css">
<!-- <link rel="icon" href="images/favicon.ico"> -->
<!-- Metadata -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<button onclick="deletor();">delete</button>
<div id="tree">
<!-- LOADS JSON DATA-->
</div>
</body>
</html>
The javascript: (I tried 2 ways: in the context menu and through the function deletor). I don't get any errors, it just doesn't do anything.
$(document).ready(function(){
adjustModal();
$('#tree').jstree({
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
$('#tree').on("changed.jstree", function (e, data) {
console.log(data.node)
console.log(data.node.text);
});
});
function deletor(){
// alert("hey");
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
function customMenu(node) {
// The default set of all items
var tree = $('#tree');
var items = {
addItem: {
label: "Add Item",
action: function () {
console.log("rename");
}
},
renameItem: { // The "rename" menu item
label: "Rename",
action: function () {
console.log("Rename");
}
},
deleteItem: { // The "delete" menu item
label: "Delete",
action: function () {
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
}
};
if ($(node).hasClass("folder")) {
// Delete the "delete" menu item
delete items.deleteItem;
}
return items;
}
Can you guys tell me what I'm doing wrong?
Ok, so I figured it out. In your tree core section you have to allow the user to modify the tree. Changed the js to this: check_callback section
$('#tree').jstree({
'core' : {
'check_callback' : function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
// in case of 'rename_node' node_position is filled with the new node name
return operation === 'delete_node' ? true : false;
},
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
},
"search" : {
"case_insensitive" : true
},
"plugins": ["contextmenu", "dnd", "search", "wholerow"],
"contextmenu" : {
"items": customMenu
}
});
or simply if you want to allow all actions on the tree:
'check_callback': true,
I have been developing the application and I use the following code for JEditable:
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
I need to disable autogrowing of the field in order to if user moves on a fields then the field won't grow. Now field grows if user moves on it. I need it, please help. Thank you very much.
I have used with success
width : '100%' as a parameter. Give it a try.
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
width : '100%'
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});