I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.
Related
I am facing problem with c3 charts sizing issue with in gridster. Can any one help me how can I make there charts to be properly auto resized according to the gridster box they are in? Please find the Plunker
I have given size in options :
size: {
height: 100,
width: 100
}
If I remove this size property the charts are going out of box. But they are too small in gridster boxes. How can I make these chart to automatically occupy the full height and width of the gridster boxes that they are in?
The options you are using:
size: {
height: 100,
width: 100
}
are setting the height and width of the svg element to 100px instead of 100%
I tried
size: {
height: '100%',
width: '100%'
}
Which will successfully set the width to 100% but somehow the height will be set to 320px
So if you add this to your css:
.c3 svg {
width: 100%;
height: 100%;
}
That will solve your sizing issue.
EDIT
Just a small change to set up an initial size and some comments added to your controller on the resize - stop event handler, where you will need to add some resizing of your charts based on the new sizes. See it here
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
// optional callback fired when resize is started
start: function(event, $element, widget) {},
// optional callback fired when item is resized,
resize: function(event, $element, widget) {},
// optional callback fired when item is finished resizing
stop: function(event, $element, widget) {
// here should update the size according to the widget size
// widget.sizeX (* 160px) and widget.sizeY (* 160px)
// and further adjustments
}
},
I had a similar problem not long ago. What I did is use scale(), but it doesn't work on firefox.
Basically find the width when loading, and make a new scale when the user changes the screen size (or any other event like resizing your containers).
add this at the bottom of your plunker :
<script>
let width = window.innerWidth;
window.addEventListener('resize', (event) => {
let newWidth = window.innerWidth;
let ratio = newWidth / width;
let ctnr = document.getElementById('widget1');
ctnr.style.transform = "scale(" + ratio + ")";
});
</script>
That will scale widget 1. Of course you might have to play with the numbers a bit to find what works for you.
The widget will stay in place however; thus if you want it to be aligned on the left you can use in your css :
transform-origin: 0;
I hope this helps.
Use nvd3 plugin this is same as c3 plugin also this smoothly works with gridster, Please find the below link
https://krispo.github.io/angular-nvd3/#/dashboard
I want to make the transition/animation effect when selecting/unselecting items longer, I'm trying to set the duration parameter of nvd3 pie chart to be something long like 10 seconds (or 10000 ms) but it has no effect on the pie chart,
I tried changing the duration value and I also tried to add transitionDuration property,
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 10000,
transitionDuration: 10000
}
};
You can see the following example: http://plnkr.co/edit/vtKWU0?p=preview
It looks like a bug in nvd3.
https://github.com/novus/nvd3/issues/1474#issuecomment-178333163
angular-nvd3 is a wrapper around nvd3.
I have created a bubble chart using d3js and have added Extjs tooltip to it. In doing so, I have created separate tooltip for each of the circles in the bubble chart. There is a noticeable delay in display of the tooltip when I move the mouse pointer from 1 circle to the other. So I want to have a single tooltip for all the circles.
Can someone tell me how to use delegate: '.x-form-field-wrap' to create a single tooltip.
Here is the fiddle.
There is no need for creating multiple tool-tips. Create a single tooltip and just update it's position on mouseover and mousemove.
var tip = Ext.create('Ext.tip.ToolTip',{
title: 'test',
width: 150,
height: 40,
radius:5,
hidden: true,
anchor: 'left',
autoHide: false,
trackMouse: true,
anchorToTarget: false
});
circle.on('mouseover',function(d,i){
tip.setTitle("radius: "+d.radius);
tip.showAt([d3.event.x,d3.event.y]);
}).on('mousemove',function(d,i){
tip.setTitle("radius: "+d.radius);
tip.showAt([d3.event.x,d3.event.y]);
});
Updated fiddle
This question is a classic example of the xy problem.
You can solve your problem in a single line, namely by setting showDelay:0 on the tooltips.
You need to calculate X and Y coordinate and show one div on mouseover event. you can do this using below fiddle code:
I think this solution is better than extjs.
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", function (d) {
return d.radius;})
.style("fill", function (d, i) {
return "green";}).on("mouseover", function (d, i) {
tDiv.html("Radius :" + d.radius + "</br>Name:" + data.children[i].name + "</br>Size:" + data.children[i].size);
tDiv.style("left", ((d3.event.pageX) - $(tDiv[0]).width() - 10) + "px").style("top", (d3.event.pageY - 0) + "px"); }).on("mouseleave", function (d, i) {
tDiv.style("display", "none");})
.call(drag);
You can refer this fiddle code
While displaying nvd3 chart with Ajax requests, the charts are getting wired up. So I thought the problem is occurring due to asynchronous call delays (may be the chart is displaying before the full data is loaded, etc). So I have used promises, but still I am getting the same problem. Please see the plunker http://plnkr.co/edit/AcIpmki7GNvcoT6Z38Pm?p=preview.
If you change the date range slider, the main chart won't display properly. I am not sure where the problem is? After searching some of the posts in forum, I have come across some thing like gaps in the time series, is it due to that? If that is the case, how can I fix that time series gap issue? I searched nvd3 website, but I don't find any documentation regarding to fill up the gaps in time series data. Some of the forum posts suggests to use c3.js instead nvd3, but I don't know is it really worth to shift to c3.js? Within my experience I feel nvd3 are the best and I don't feel like leaving nvd3.
If nvd3 website provides more samples with real time series data and documentation on some of the common issues like filling gaps in time series, sorting the data, etc it will be really helpful for the beginners.
As my project release dates are nearing, I am not sure what to do now ? Shifting to c3.js is the worst option for me. I have attached the error screen shot too from the same plunker.
I feel there is no problem with the sorting that I am doing with my json data:
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Couple of issues for you to look at:
I agree with shabeer90, the data is funky. You have multiple values occurring at the same time.
Your sort is correct, but where you have it in your code doesn't work...try adding it inside the response of the ajax call (right after setting $scope.data = data).
Also, you need to make the changes that I outlined in another question (to nvd3 in the lineWithFocusChart model).
Accessing the xScale is a little more tricky...on this chart you need to go through the lines:
$scope.options = {
chart: {
type: 'lineWithFocusChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 40
},
transitionDuration: 500,
lines : { // <-- add this
xScale : d3.time.scale()
},
lines2 : { // <-- add this too
xScale : d3.time.scale()
},
xAxis: {
ticks : d3.time.months, <-- add the time interval
axisLabel: 'X Axis',
tickFormat: function(d){
return d3.time.format('%d/%m/%y')(new Date(d))
}
},
x2Axis: {
tickFormat: function(d){
return d3.time.format('%d/%m/%y')(new Date(d))
}
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format(',.2f')(d);
},
rotateYLabel: false
},
y2Axis: {
tickFormat: function(d){
return d3.format(',.2f')(d);
}
}
}
};
I am using Extjs Charts and specifically line series to acheive my req.
I have a requirement of coloring different parts of a sprite ( for a single series ) with different colors based on a value of particular attribute.
For example i have 2 Services, Service1 and Service2 represented on Yaxis and the X-axis is the Numeric axis from 0 - 12.
I want to color Service1 Green from 0 -1 ( of x-axis ) and red from 1- 2 ( of x-axis )
I have tried using the renderer attribute for a sprite, but its called only once when a sprite is rendered as a whole, but i want to color parts of the sprite.
Is that possible using extjs charts. If so how can i achieve that.
{
type: 'line',
xField: 'hour',
yField: 'srvdata',
showMarkers: false,
style: {
stroke: 'green',
'stroke-width': 2,
fill: 'green',
//opacity: 0.2
},
/*renderer: function(sprite, record, attr, index, store) {
console.log(record);
return Ext.apply(sprite, {
fill: 'red',
stroke: 'red'
});
}*/
},
One thing for sure, you cannot change the line color in this way.
renderer: function(sprite, record, attr, index, store)
{
// By changing sprite.fill or stroke, you are just changing the color of your point
};
Not sure how exactly to change line's color, I am stuck with that problem too. But I know that surface : Ext.draw.Surface needs to be changed. Like try to add sprites via chart.draw.Surface.add(sprite) function.