I'm a n00b and having trouble with NVD3, and there're some smart people on here, so I hope you can help.
I'm trying to create a drop box that will select data to display.
I can call a function with but I cannot get the chart to change its data location.
HTML:
<select name="slct" id="name" onchange="data(this.value)">
<option>Select power data</option>
<option value="Residence_supply_data">Average kwh residences supplied to the grid</option>
<option value="Residence_need_data">Average kwh supplied to residences</option>
</select>
NOTE: I've created JSON libraries with the values above as names.
Javascript:
function data(value) {
console.log(value);
var dat_select = value;
return dat_select;
};
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart().x(function(d) {
return d.label
}).y(function(d) {
return d.value
}).margin({
top : 30,
right : 105,
bottom : 30,
left : 100
})
//.showValues(true)
.tooltips(true).barColor(d3.scale.category20().range()).showControls(false);
chart.yAxis.tickFormat(d3.format(',.0f'));
d3.select('#chart1 svg').datum(dat_select).transition().duration(1000).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Everything works otherwise, and the function logs the results, just can't select the data I need to. If I set d3.select('#chart1 svg').datum(Residence_supply_data), it loads that data.
You have my gratitude.
At the point where d3.slect('#chart1 svg') assign it to a variable(global variable)
myChart = d3.select('#chart1 svg').datum(dat_select).transition()
.duration(1000).call(chart);
So now myChart contains the nvd3 multiBarHorizontalChart() chart.
So when you want the chart updated by calling a function updateMyChart() for example from a place of your choice you could update it like this :
function updateMyChart() {
// myChart is passed to your new data
// myChart also calls chart which hold the attributes you
// had set earlier for multiBarHorizontalChart
myChart.datum(Residence_supply_data).transition().duration(1000).call(chart);
// Update the chart during the window screen resizing
nv.utils.windowResize(myChart.update);
}
Hope this helps you.
Related
Expectation
the initial graph showed the full data of csv and the expected output is when i clicked on the button below the x-axis, let's say i click on the '1 hour' button, then the graph will rescale according to data for the first 1 hour, same goes for other buttons.
Problem
The current problem is when i clicked on the button, the graph will rescale to middle position(random data) instead of specific position( specific data, exp( first 1 hour, 3 hours, and etc) that stated on the button. Here is the code for me click on the button to zoom the graph to specific timeframe.
function transition(zoomLevel) {
svg.transition()
.call(zoom.scaleTo, zoomLevel);
}
function timezoom(){
x.domain([new Date(2017,1,11),new Date(2017,1,11)]).range([0,60]);
y.domain([95000,d3.max(data, function(d) { return d.AGV_Mileage; })]);
x2.domain(x.domain());
y2.domain(y.domain());
var svg = d3.select("body").transition();
//
}
<input type="button" id='1hr' onclick="timezoom()" value="1 Hour" />
<input type="button" id='3hr' onclick="transition(1.8)" value="3 Hours"/>
The zoom's behavior is demonstrated in the plunker editor - https://plnkr.co/edit/MY1nP4Mnv4WeCpHCxLvD?p=preview
Please enlighten me and give me a rough idea on this.
You have to specify the translate as well the scale on the transform call.
function transition(newRange) {
var rgh = d3.timeHour.count(initialDomain[0], initialDomain[1]);
var k = rgh/newRange;
var t = d3.zoomIdentity.translate(0,0).scale(k);
svg.transition()
.call(zoom.transform, t);
}
You should also save the initial domain in order to calculate the new scale:
initialDomain = d3.extent(data, function(d) { return d.Timestamp; });
Here is the updated plnkr
Edit : JSBin dont work go to JS fiddle to see my code
I'm training my self with d3 and crossfilter and i face some difficulties.
I'm trying to make a chaining function to create bar chart. The idea is to not write all the code again and again for each bar chart i want to create.
I was inspired by the example Fast Multidimensional Filtering for Coordinated Views which is what i wanted to do (you can find code Here).
But I want to bring some personal touches in my generic barChart function.
I decided to do it with chaining function like in the example.
I understood how to create as many graphics as you wish, but i dont understand, (when brushes event appears), how to redraw all the bar depending on the filter.
If i wanted to do it outside a function i would define again the all the properties like x, y, axis etc. depending on the new data which is the filtered data like this:
var updateRange = function(filt){
data = dimension.filter(filt) //assuming dimension is a crossfilter dimension
// Scale the range of the data again
x.domain([0, d3.max(data, function(d) { return d.key; })+1]);
// Select the section we want to apply our changes to
var chart = d3.select(".chart")
//Update all rects
chart.selectAll("rect.hidden")
.data(data)
.transition()
.delay(function(d, i) {
return i * 50;
})
.duration(500)
.attr("y", function(d) {
return y2(d.value);
})
.attr("height", function(d) {
return height - y2(d.value);
});
I made a JSBin to discuss on how we can make the chart updated.
And this is the brush functions i use.
brush.on("brushstart", function() {
var div = d3.select(this.parentNode.parentNode.parentNode);
div.select(".title a").style("display", null);
});
brush.on("brush", function() {
var g = d3.select(this.parentNode),
extent = brush.extent();
if (round) g.select(".brush")
.call(brush.extent(extent = extent.map(round)))
.selectAll(".resize")
.style("display", null);
g.select("#clip-" + id + " rect")
.attr("x", x(extent[0]))
.attr("width", x(extent[1]) - x(extent[0]));
dimension.filter(extent);
});
brush.on("brushend", function() {
if (brush.empty()) {
var div = d3.select(this.parentNode.parentNode.parentNode);
div.select(".title a").style("display", "none");
div.select("#clip-" + id + " rect").attr("x", null).attr("width", width);
dimension.filterAll();
}
)};
waiting for your comments,
Chris.
Edit : some clarification
To be clearer, when i render the chart and use the brush the data are correctly filtered. (if i put some console.log i see the data filtered depending on the brush)
But the chart are not updated depending on the brush. I know the issue come from th way i used the brush event (brush.on().
I think i need to call the render function in some way but dont know how to do it with chaining function to be applied to all the charts.
Edit : Chart updated with external brush
The chart are now successfully updated when the brush is set externally (by clicking on the link).
Just adding this lines
if (brushDirty) {
brushDirty = false;
g.selectAll(".brush").call(brush);
div.select(".title a").style("display", brush.empty() ? "none" : null);
if (brush.empty()) {
g.selectAll("#clip-" + id + " rect")
.attr("x", 0)
.attr("width", width);
} else {
var extent = brush.extent();
g.selectAll("#clip-" + id + " rect")
.attr("x", x(extent[0]))
.attr("width", x(extent[1]) - x(extent[0]));
}
}
In order to update charts you can remove it and then redraw with new filters.
Something like this :
d3.selectAll(".chart").selectAll("svg").remove();
Or
$('#chart'+chart_id+' svg').remove();
and then redraw it by calling again your drawing function with updated data.
Hope this will help you. Sorry If I misunderstood you. I need to train my english =P
EDIT :
I found these examples without remove. It might help you.
http://jsfiddle.net/sx9myywh/
https://bl.ocks.org/RandomEtc/cff3610e7dd47bef2d01
I found where the problem was. And i feel stupid.
The brush.onevent was placed incide the function which generate the chart and have to be outside.
function my(div){
}
brush.on(...
I have updated the JS Fiddle with the correct answer.
I will create a github repository it will be cleaner.
I have a web app that does some summing of values and then is supposed to plot these values in a pie chart, I have some problems concerning the legend colors of this chart.
Summing:
The sum's are attached to each objects in the categories array after it has iterated a lot of different objects that contribute to said sum:
// Find a list of Categories
$scope.find = function() {
var that = this;
Categories.query().$promise.then(function(categories){
that.categories=categories;
categories.forEach(function(category){
getExpensesForCategory(category._id, 8).then(function(cashflows){
category.sum = getTotalCashflowSum(cashflows); //<- sum is attached
});
});
});
};
View:
I my view I am making two pie charts:
One pie chart for amount: which is an attribute of each category from the start.
One Pie chart for the sum of expenses in each category, as mentioned above. I have to wait for the summing to be completed otherwise my sum might be undefined, therefore i add an ng-if to make sure the last sum has been appended (see code below, the second chart).
<div class=" well" style="text-align: center" >
<div class="pie-group" >
<h3>Budget distribution:</h3>
<nvd3-pie-chart
data="categories"
id="budgetPie"
width="350"
height="350"
x="xBudget()"
y="yBudget()"
showLegend="true"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg height="250"></svg>
</nvd3-pie-chart>
</div>
<div class="pie-group" data-ng-if="categories[categories.length-1].sum!==undefined">
<h3>Actual consumption:</h3>
<nvd3-pie-chart
data="categories"
id="consumptionPie"
width="350"
height="350"
x="xConsumption()"
y="yConsumption()"
showLegend="true"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg height="250"></svg>
</nvd3-pie-chart>
</div>
</div>
Summing not completed before rendering: Undefined values
If I remove the ng-if i seem to get undefined on some of the categories sum attributes in the pie chart. This makes the piechart fail to render properly. I assume this is due to the fact that the summing is not completed upon rendering the chart.
NG-IF to delay rendering of chart
However with or without ng-if on the second pie chart, the legends are all black on the second chart. It also fails for my second chart even if I add my own color function to set the legendColor. legendColor="colorFunction()". The charts however are rendered, only the legends are black.
Here are the methods I am calling from my view to setup the charts:
$scope.xBudget = function(){
return function(d) {
return d.name+': '+d.amount ;
};
};
$scope.xConsumption = function(){
return function(d) {
return d.name+': '+d.sum ;
};
};
$scope.yBudget = function(){
return function(d){
return d.amount;
};
};
$scope.yConsumption = function(){
return function(d){
return d.sum;
};
};
var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
$scope.colorFunction = function() {
return function(d, i) {
return colorArray[i];
};
};
If i add the ng-if to my first chart it also fails to color the legends for me:
Has anybody had a similar experience or just happen to have an idea of what's going on?
I just add:
$scope.chart.display = true;
<div ng-if="chart.display">
<nvd3-pie-chart
data="exampleData"
id="exampleId"
...
in you fiddle.
It seems ok.
fiddle
I have some graphs using d3/nvd3. I am now wanting to be able to update the chart data with the click of a button, I have got it working 90% but when I update the data, the functionality becomes inconsistent.
By this I mean that the clickable legend stops working properly, usually you can double click one of them and it would single out the data.
I think somehow when the data updates, it still has the old data in it's memory and this is causing some issues?
Here is my javascript -
$( document ).ready(function() {
var negative_test_data = [{"key":"O1","values":[{"x":"NRW ","y":1},{"x":"WFW ","y":3}]},{"key":"O2","values":[{"x":"MED ","y":1},{"x":"FSEST ","y":1},{"x":"SW ","y":1},{"x":"LW ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLRW ","y":1},{"x":"SEM ","y":1},{"x":"DEN ","y":1},{"x":"LEW ","y":3}]},{"key":"O4","values":[{"x":"BUC ","y":2}]}];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(200)
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.
;
chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);
chart.x (function(d) { return d.x; })
chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);
d3.select('#chart1M svg')
.datum(negative_test_data)
.call(chart);
return chart;
});
});
var update = function() {
var data = [{"key":"O1","values":[{"x":"NRW ","y":20},{"x":"WW ","y":3}]},{"key":"O2","values":[{"x":"ME ","y":1},{"x":"FST ","y":1},{"x":"SW ","y":1},{"x":"LEW ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLW ","y":1},{"x":"SEM ","y":1},{"x":"DE ","y":1},{"x":"LW ","y":3}]},{"key":"O4","values":[{"x":"BUDC ","y":2}]}];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(250)
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.
;
chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);
chart.x (function(d) { return d.x; })
chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);
d3.select('#chart1M svg')
.datum(data)
.call(chart);
return chart;
});
};
Here is the JSFIDDLE - http://jsfiddle.net/kd82ep7p/8/ so that it can be demonstrated,
Before the data is updated you can play with the legend and select the data you want to see and even double click it.
After you click the update button, it becomes a problem,
If anyone could take a look I would greatly appreciate it.
The example I'm talking about is here: http://nvd3.org/ghpages/lineWithFocus.html
What I would like to do is have preset ranges to programmatically change the visible range of the view finder. For example, I could have a buttons to only show the last 30-days of data or show ALL data. When the user clicks on either of the buttons, the viewfinder would change to reflect only data in the selected range.
Does anyone have any suggestions on how to go about doing this?
Thanks,
CZ
You can actually do this - took a little bit of digging but here's how:
nv.addGraph(function() {
window.chart = nv.models.lineWithFocusChart()
// Do whatever you need to do to set up the chart, and keep a reference to it
});
$("#preset-range").on("click", function() {
// Get the min and max
min = $(this).data("min")
max = $(this).data("max")
// Change the focus chart range programatically
chart.brushExtent([min, max]).update()
});
A suggestion for hide/unhide only, based on http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/:
<button type="button" id="nv-toggle">Show View Finder</button>
<script>
$(document).ready(function() {
$('#nv-toggle').click(function() {
// make the collapse content to be shown or hide
var toggle_switch = $(this);
$('.nv-context').toggle(function() {
if($(this).css('display')=='none') {
toggle_switch.html('Show View Finder');
} else {
toggle_switch.html('Hide View Finder');
}
});
});
});
</script>
It's a bit tricky finding out the solution but once you get to know it, it's pretty straight forward.
You need simply update the chart calling d3.select('#chart svg').datum(sendyouNewData)
I have used the same code as in the NVD3 site the only additional code I added was the chart update function on a button click, oh and the added a width and height to the chart.
The following code is a working tested code. The live code is here
Your HTML:
<input type="button" id="change1" value="Change 1"/>
<input type="button" id="change2" value="Change 2"/>
<div id="chart">
<svg></svg>
</div>
Your JavaScript
var dynamic_lineWithFocusChart, lineWithFocusChart;
var width = 500,
height = 500;
nv.addGraph(function () {
var chart = nv.models.lineWithFocusChart().width(width).height(height);
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
dynamic_lineWithFocusChart = d3.select('#chart svg').datum(testData());
dynamic_lineWithFocusChart.transition().duration(1000).call(chart).attr('width', width).attr('height', height);
nv.utils.windowResize(chart.update);
lineWithFocusChart = chart;
return chart;
});
/*
* Simple test data generator
*/
function testData() {
return stream_layers(3, 128, .1).map(function (data, i) {
return {
key: 'Stream' + i,
values: data
};
});
}
/*
* Update the Line Focus chart with the Button Click
*/
$("#change1,#change2 ").click(function () {
dynamic_lineWithFocusChart.datum(testData());
dynamic_lineWithFocusChart.transition().duration(1000).call(lineWithFocusChart);
dynamic_lineWithFocusChart.update
});