I'm new to echarts so please forgive me if this is stupid newbie request. I'm trying to rotate whole chart just like in this example of Vega Edge Bundling Example. On the right corner there is a tool and one option is also "rotate".
Example Image of Vega
I would like to do the same thing (rotate whole graph) in echarts but I can't find a way to do it. If it is possible to do it please let me know how I can do it. Thank you for any reply!
It's not perfect but I tried.
I use function to change startAngle,I don't know why the rotation is delayed.
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
startAngle: 15,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);
function rotate() {
var Angle=document.getElementById("range").value;
myChart2.setOption({
series: [{
startAngle:Angle,
}]
});
};
<html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<label class="col-lg-3 control-label">rotate</label>
<div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
<div id="main2" style="width:100%;height:600px;"></div
</body>
</html>
Related
How can i download the output from this code automatically when accessing the page, not by clicking any button in the page like I need to automate the download process.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [50,60,70,80,90,100,110,120,130,140,150];
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,1.0)",
borderColor: "rgba(0,0,255,0.1)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 6, max:16}}],
}
}
});
</script>
</body>
</html>
I am trying to pass data from Controller to feed a chart using ChartJS, but when I use a keySet function as labels, the chart is not rendering.
This is the Method from Controller:
#GetMapping("/reports")
public String showDashboard(Model model) {
Map<String, Integer> data = new LinkedHashMap<String, Integer>();
data.put("JAVA", 50);
data.put("Ruby", 20);
data.put("Python", 30);
model.addAttribute("data", data);
return "reports";
}
This is the HTML Code:
<pre>
<body>
<div class="container">
<div th:replace="fragments/navbar :: top"></div>
<div class="row" style="margin-top: 60px">
<div class="chart-container" style="margin: 0 auto; height:20vh; width:40vw">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [[${data.keySet()}]],
datasets: [{
data: [[${data.values()}]],
backgroundColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderWidth: 1
}]
},
});
</script>
</div>
</div>
</body>
</pre>
The chart is not been rendered and this is the output when I check the source code:
<pre>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [JAVA, Ruby, Python],
datasets: [{
data: [50, 20, 30],
backgroundColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderWidth: 1
}]
},
});
</script>
</pre>
It seems that the function keySet() is not getting values as String.
How can I adjust it to show the values as String and then rendered as Labels?
Regards,
I faced similar problem and found that we should use Object.keys(data) instead of data.keySet(). So below is the way you can use it
var htmldata = [[${data}]];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: Object.keys(htmldata),
datasets: [{
data: Object.keys(htmldata).map(function(key) {return htmldata[key];}),
backgroundColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderWidth: 1
}]
},
});
Also your javascript is not thymeleaf readable. Please add th:inline=javascript in script tag and provide CDATA as below
<script th:inline="javascript">
/*<![CDATA[*/
// Here goes my previous script
/*]]>*/
</script>
There is a simpler solution. Just generate your LinkedHashMap like this:
graphDataHM.put('"'+yourLabel+'"', yourValue);
Then in the HTML code use:
<pre>
<body>
<div class="container">
<div th:replace="fragments/navbar :: top"></div>
<div class="row" style="margin-top: 60px">
<div class="chart-container" style="margin: 0 auto; height:20vh; width:40vw">
<canvas id="myChart"></canvas>
</div>
<script>
var xValues = ${graphDataHM.keySet()};
var yValues = ${graphDataHM.values()};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: xValues,
datasets: [{
data: yValues,
backgroundColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderColor: [
'rgb(0,255,255)',
'rgb(46,139,87)',
'rgb(255,165,0)'
],
borderWidth: 1
}]
},
});
</script>
</div>
</div>
</body>
</pre>
You can populate your LinkedHashMap with data from any source (database, other objects and so on).
I am trying to get all the selected nodes from KendoTreeView and display a Treeview with only selected values from the previous Tree.
Is this possible to achieve?
Thanks in advance.
Sure it is possible and below there is a rough way to do it, taken from this demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
<hr>
<div id="treeview2"></div>
</div>
</div>
<script>
$("#treeview2").kendoTreeView();
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i]);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
let treeView2 = $("#treeview2").data("kendoTreeView");
treeView2.dataSource.data(checkedNodes);
}
</script>
<style>
#treeview .k-sprite,
#treeview2 .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
.pdf { background-position: 0 -32px; }
.html { background-position: 0 -48px; }
.image { background-position: 0 -64px; }
</style>
</div>
</body>
</html>
Demo in Dojo
The point is, you have to retrieve the selected nodes(as made with checkedNodeIds()) and then set them to the target treeview dataSource:
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
When we update new data on .bubbles([]) all the previous bubble disappears immediately. Can we make the bubble remain there for some time and then remove them from the map using jquery animation and also display a new bubbles at certain time periods?
Below is the code:
`
</head>
<body>
<div id="container" style="position: relative; width: 100%; height: 600px"></div>
</body>
<script type="text/javascript">
var bombMap = new Datamap({
element: document.getElementById('container'),
fills: {
'USA': '#1f77b4',
'RUS': '#9467bd',
'PRK': '#ff7f0e',
'PRC': '#2ca02c',
'IND': '#e377c2',
'GBR': '#8c564b',
'FRA': '#d62728',
'PAK': '#7f7f7f',
defaultFill: '#c1b9bb' //any hex, color name or rgb/rgba value
},
geographyConfig: {
highlightOnHover: false,
popupOnHover: false
},
scope: 'world',
data: {
'RUS': {fillKey: 'RUS'},
'PRK': {fillKey: 'PRK'},
'PRC': {fillKey: 'PRC'},
'IND': {fillKey: 'IND'},
'GBR': {fillKey: 'GBR'},
'FRA': {fillKey: 'FRA'},
'PAK': {fillKey: 'PAK'},
'USA': {fillKey: 'USA'}
},
bubbleConfig: {
borderWidth: 2,
borderColor: '#FFFFFF',
popupOnHover: false,
fillOpacity: 0.45,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightFillOpacity: 0.85,
}
});
var bombs = [{
name: 'Joe 4',
radius: 10,
yeild: 400,
country: 'USSR',
fillKey: 'RUS',
significance: 'First fusion weapon test by the USSR (not "staged")',
date: '1953-08-12',
latitude: 50.07,
longitude: 78.43
},{
name: 'RDS-37',
radius: 10,
yeild: 1600,
country: 'USSR',
fillKey: 'RUS',
significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
date: '1955-11-22',
latitude: 50.07,
longitude: 78.43
},
];
var options = {
popupTemplate: function (geo, data) {
return ['<div class="hoverinfo">' + data.name,
'<br/>Payload: ' + data.yeild + ' kilotons',
'<br/>Country: ' + data.country + '',
'<br/>Date: ' + data.date + '',
'</div>'].join('');
}
};
bombMap.bubbles(bombs, options);
setInterval(function(){
console.log('removing elements');
bombMap.bubbles([{
name: 'Tsar Bomba',
radius: 10,
yeild: 50000,
country: 'USSR',
fillKey: 'RUS',
significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
date: '1961-10-31',
latitude: 73.482,
longitude: 54.5854
}]);
},3000);
</script>
Source: https://github.com/markmarkoh/datamaps
Yes, you should be able to do this by using d3 to select all the current circles (bubbles) that are on your datamap. You can then use a d3 transition to fade your circles to a fill-opacity of 0.0001 before loading your new array of bubbles.
I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>
How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");
Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.