When I do a zoom on a date in the x-axis the chart gets stuck.
This happens only when I work with longs.
With dates it works fine.
I'm new in zing charts and I'm not sure what i am doing wrong
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
and my values are
"values": [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
UPDATE
The reason the chart was getting stuck was the step, It works without scrollX
scaleX:{
label:{},
minValue:1425196800000,
step:"day",
transform: {
type: 'date',
all:"%m/%d/%y"
}
},
You have not given much information related to your chart or chart configuration. Based on what you are saying I'm taking a wild guess at what you are asking. If I'm wrong feel feel to follow up.
What you are missing is the scrollX attribute. This enables the scrollbar. Another option is to enable the preview window. Both of these options work in cohesion with zooming.
Information related to scrollX, preview and zooming in general.
https://www.zingchart.com/docs/tutorials/interactive-features/chart-zoom-pan-scroll/
https://www.zingchart.com/docs/api/json-configuration/graphset/scroll-x-scroll-y/
https://www.zingchart.com/docs/api/json-configuration/graphset/preview/
var myConfig = {
type: 'line',
title: {
text: 'After 2 seconds call API method \`zoomtovalues\`'
},
scaleX:{
transform: {
type: 'date',
}
},
scrollX:{},
series: [
{
values: [
[1425225600000,1],
[1425312000000,1],
[1425398400000,1],
[1425484800000,1],
[1425571200000,1],
[1425657600000,1],
[1425744000000,1],
[1425826800000,1],
[1425913200000,1],
[1425999600000,1]
],
}
]
};
setTimeout(function() {
zingchart.exec('myChart', 'zoomtovalues', {
'xmin':1425312000000,
'xmax':1425657600000,
});
}, 2000);
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Related
I came across this issue when I wanted to center a Apexchart on my site.
I first tried flexbox with gave me an error as soon as I stated something like
flex-direction: row;
Error:
apexcharts attribute height: A negative value is not valid
When searching for this error I got the hint, that it could be about how I include the different files, but I can't find the correct way of doing this.
This is what my files look right now.
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script data-main="/script.js" src="/require.js"></script>
<div class="piecontainer">
<div class="piewrapper">
<div class="piebox">
<div id="piecharttotal"></div>
</div>
</div>
</div>
script.js:
async function getSources(mode) {
let url = 'http://192.168.2.131:81/sources/?mode=' +mode ;
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}
async function renderSources(mode, objectid) {
datasets = await getSources(mode);
var jsonset2 = [];
var jsoncat2 = [];
datasets.forEach(datas => {
jsonset2.push(datas[1]);
jsoncat2.push(datas[0]);
});
var optionspie = {
labels: jsoncat2,
chart: {
type: 'donut',
width: '30%',
stacked : false,
},
colors: ["#45CB85","#FB5607","#35A7FF","#FF1AFF","#FFAF54"],
series: jsonset2,
chartOptions: {
labels: jsoncat2
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
name: {
show: true,
},
value: {
show:true
},
total: {
show: true,
label: "Total"
}
}
}
}
}
}
var chart = new ApexCharts(document.querySelector(objectid), optionspie);
chart.render();
}
renderSources("total","#piecharttotal");
Nothing else I included. When I change the id-tag of #piecharttotal and put some text in the div, the text is perfectly in the middle, however if I dont, the chart is just on the left site (presumably without any styles)
Edit:
styles.css:
.piecontainer{
width: 100%;
height: 800px;
text-align: center;
background-color: #009879;
}
.piewrapper{
position: relative;
top:50%;
transform: translateY(-50%);
background-color: #82D173;
}
Greetings,
In my project I am displaying a vis.js graph, using ReactJS and I would like to have the nodes of the displayed network react to the mouse-hover event by displaying a popup/tooltip. Every node has a title attribute, and thats what the tooltip should display.
This is how they do it in their example:
<!doctype html>
<html>
<head>
<title>Network | Interaction events</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: 'Node 1', title: 'I have a popup!' },
{ id: 2, label: 'Node 2', title: 'I have a popup!' },
{ id: 3, label: 'Node 3', title: 'I have a popup!' },
{ id: 4, label: 'Node 4', title: 'I have a popup!' },
{ id: 5, label: 'Node 5', title: 'I have a popup!' }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: { hover: true },
manipulation: {
enabled: true
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Here the popups work.
I am loading the node related data from a database, and the nodes are drawn according to that data just fine. Everything works properly, except the popup doesn't show when triggered by the hover event.
This is the relevant part of the component.tsx file:
import * as React from 'react';
import NodeGraph from 'react-graph-vis';
import { IEdge, ISkill } from '../../../models';
import Options from './skillTree.options';
import Props from './skillTree.props';
import State from './skillTree.state';
export default class extends React.Component<Props, State> {
constructor(props) {
super(props);
this.state = {
graph: { nodes: [], edges: [] },
options: Options,
selectedNode: undefined,
}
}
//...
private _skillTreeRequestCallback(graph: {
nodes: ISkill[],
edges: IEdge[]
}) {
graph.nodes = graph.nodes.map(skill => ({
...skill,
hidden: skill.Hidden,
image: skill.Image,
label: skill.Label,
id: skill.Id,
title: "Hardcoded popup message"
}));
graph.edges = graph.edges.map(edge => ({
...edge,
from: edge.From,
to: edge.To
}));
this.setState({ graph, isLoading: false });
}
//...
public render() {
return (this.state.graph.nodes.length > 0 ? <main style={this.props.style} >
<NodeGraph graph={this.state.graph} options={this.state.options}/>
</main> : <LoadingView style={this.props.style} />);
}
And the data arrives just fine from the database. The title attributes of the nodes are there, which I was able to log into the console after the query ran. That title attribute is what the vis.js canvas should display/draw as a popup when the hover event is triggered.
The relevant options that I load from this.state.options are:
interaction: {
hover: true
},
manipulation: {
enabled: true
},
Yet the popup message doesn't ever show up.
I tried to check whether the popup event actually happens, and seemingly it does, since the showPopup event of vis.js, -which happens when a popup is shown- does get triggered, the console.log I put into it runs, but the popup still doesn't actually show up on the screen.
In theory, in ReactJS I use the NodeGraph to draw the graph with the adequate data and it should do basically the same thing as this line:
var network = new vis.Network(container, data, options);
But apparently something with the popups gets lost in the ReactJS version, unless the reason is that I am doing something wrong.
Does anybody know of any solution that could help me display the title tooltip of a vis.js graph with a hover event in ReactJS?
Any help is much appreciated.
Thanks,
Balint
Cleanest way to do it,
in your index.css file add this line:
#import url("~vis/dist/vis.min.css");
Oddly by default the css is hiding the tooltip.
In your CSS set .vis-network: {overflow:visible;}
For me below CSS worked:
.vis-tooltip {
position: absolute;
}
I was having this issue as well a while back. It had to do with having the incorrect path to vis-network.min.css.
In the example they do this:
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
but in your own project that is probably not the correct path. Check your path and that should fix your problem.
The default functionality in ZingChart for legends while clicking the item is to hide all the respective bar series that is related to that item value in legend.
I am performing a drilldown operation, which is fetching data for graph from server while clicking the legend item and then plotting a new chart with it. Now I dont want those bars to disappear while clicking the legend item and at the sametime want to perform onclick event when selecting the legend.
When I add : "toggle-action":"disabled" inside the legends , the disappearence of the bars does not happen so does the onclick event.
Following is the legend item click function that I have written:
zingchart.bind("hbarChart", "legend_item_click", function (p) {
var data= p.xdata.band[0];
getData(data);
});
I think you just need to change toggleAction: disabled to none.
var myConfig = {
type: 'bar',
legend: {
toggleAction:'none'
},
series: [
{
values: [35,42,67,89]
},
{
values: [25,34,67,85]
}
]
};
function legendClickHandler(){
console.log('test worked!');
}
zingchart.bind('myChart', 'legend_item_click', legendClickHandler );
zingchart.bind('myChart', 'legend_marker_click', legendClickHandler );
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>
We are using c3 as a wrapper around d3 javascript charting library. You can see even in their own demo when the data is updated the scroll bar flickers momentarily.
This isn't a problem when there is already a scrollbar on the page as it is in their case. But if the page is smaller the addition and sudden removal or the scrollbar can be jarring.
We aren't doing anything wildly different than they do in their examples. The mystery is why the scrollbars jump. Any ideas? If you want to look at my code it is blow:
Data is getting passed to our AngularJS Directive using SignalR
$scope.$watch('data', function () {
normalizedData = normalize($scope.data);
chart.load({
columns: getChartDataSet(normalizedData)
});
});
After we take the normalized data it simply gets set into an array then passed to C3
var chart = c3.generate({
bindto: d3.select($element[0]),
data: {
type: 'donut',
columns: [],
colors: {
'1¢': '#2D9A28',
'5¢': '#00562D',
'10¢': '#0078C7',
'25¢': '#1D3967',
'$1': '#8536C8',
'$5': '#CA257E',
'$10': '#EC3500',
'$20': '#FF7D00',
'$50': '#FBBE00',
'$100': '#FFFC43'
}
},
tooltip: {
show: true
},
size: {
height: 200,
width: 200
},
legend: {
show: true,
item: {
onmouseover: function (id) {
showArcTotal(id);
},
onmouseout: function (id) {
hideArcTotal();
}
}
},
donut: {
width: 20,
title: $scope.label,
label: {
show: false,
format: function(value, ratio, id) {
return id;
}
}
}
});
body > svg { height: 0; } did not help me. But I had experimented a bit and found a solution:
body > svg {
position: absolute;
z-index: -10;
top: 0;
}
Unfortunately, this method can't fix the issue if a window's height is too small.
Also, you can get rid of jumping by adding scrollbar by default:
body {
overflow-y: scroll;
}
When C3 draws the chart it appends an SVG at the bottom of the <body> element, even with `style="visibility:hidden". I just added a CSS class
body > svg { height:0px !important }
That fixed the issue for me.
I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}