I have this code to produce a lineplusBarChart
HTML
<div id="chart1" class='with-3d-shadow with-transitions'>
<svg> </svg>
</div>
Scripts
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/linePlusBarChart.js"></script>
<script>
var time="1134345600000";
var quantity="12332212"
var testdata = [
{
"key" : "Quantity" ,
"bar": true,
"values" : [ [ 1136005200000 , 1271000.0] ]
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
testdata[0].values.push([time, quantity]);//NOT SHOWING THE BAR
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
return dx ? d3.time.format('%x')(new Date(dx)) : '';
})
.showMaxMin(false);
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
chart.bars.forceY([0]).padData(false);
//chart.lines.forceY([0]);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
</script>
Now i want to add some variables to the graph from javascript. Let say i have two variables var time="1134345600000" and var quantity="12332212". i want some how to push these two variables into var testdata.values.
Is there an possible way?
DEMO (js code after line 23240)
In your particular case, you need to push the data like this:
testdata[0].values.push({x: +time, y: +quantity});
Demo here.
Related
I have a bar charts with 3 categories in Dc.Js
I simply want to display the percentage of each row:
/ Construct the charts
xdata = crossfilter(data);
runDimension = ndx.dimension(function(d) {return "run-"+d.Run;})
speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});
var all = xdata.groupAll();
dataCount.dimension(xdata)
.group(all);
// Define the crossfilter dimensions
cities = xdata.dimension(function (d) { return d.City; });
locations = xdata.dimension(function (d) { return d.all; });
var districttype = xdata.dimension(function (d) { return d.zip; });
var wardTypes = xdata.dimension(function (d) { return d.ward; });
var coordinates = xdata.dimension(function(d) { return d.geo; });
var type = xdata.dimension(function(d) { return d.type; });
// Marker Chart
typeChart.width($('#type-chart').innerWidth()-30)
.height(250)
.colors(commonChartBarColor)
.margins({top: 10, left: 20, right: 10, bottom: 20})
.group(type.group())
.dimension(type)
.elasticX(true)
.on("filtered", onFilt)
.label(function (d) {
return d.data.key + "(" + Math.floor(d.data.value / all.value() * 100) + "%)";
});
I've tried the label function but its not working.
Error: Unable to get property 'key' of undefined or null reference
How do i do that?
Solution:
typeChart.width($('#type-chart').innerWidth()-30)
.height(250)
.colors(commonChartBarColor)
.margins({top: 10, left: 20, right: 10, bottom: 20})
.group(type.group())
.dimension(type)
.elasticX(true)
.ordering(function(d) {
return -d.value
})
.label(function (d) {
if (typeChart.hasFilter() && !typeChart.hasFilter(d.key))
return d.key + " (0%)";
var label = d.key;
if(all.value())
label += " (" + Math.floor(d.value / all.value() * 100) + "%)";
return label;
})
.xAxis().ticks(5);
I tried to erase negative ticks from my NVD3 line chart (with data includes 0 only)
but It seems impossible what I wanted to do...
I want to set the line bottom when I throw data what includes 0 only.
Is there another way? or just I had a mistake?
code:
nv.addGraph(function() {
//DATA.B includes only 0 data, the value must be "data>0"
data = DATA.A,DATA.B;
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.y(function(d,i) { return d[1] });
chart.xAxis.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%Y-%m-%d')(new Date(dx))
});
chart.y1Axis
.tickFormat(d3.format(',f'))
.tickSize(0,6);
chart.y2Axis
.tickFormat(function(d) { return d3.format(',f')(d) + '%' });
chart.bars.forceY([0]);
d3.select($node).datum(data).transition().duration(0).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
thanks
Plnkr example:
http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview
Screenshot from my app:
I've tried modifying the CSS, however I was only able to remove the 2nd (right Y axis line), but not the first left Y axis line.
What I've tried:
.nv-y {
display: none;
}
As well as all the lines from this answer: Alter first vertical grid line in nvd3
d3.selectAll('.nv-y').attr('display','none')
d3.selectAll('.nv-y path').attr('opacity','0.1')
d3.selectAll('.nv-y path').attr('display','none')
My current drawChart function:
function drawChart(res) {
console.log(' ');
console.log('drawChart res = ',res);
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 40, bottom: 50, left: 40})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = res[0].values[d] && res[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx))
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
chart.bars.forceY([0]);
// https://stackoverflow.com/questions/23754188/nvd3-js-how-to-disable-tooltips-for-one-serie-only
chart.lines.interactive(false);
// http://nvd3-community.github.io/nvd3/examples/documentation.html#line
chart.height(280);
// If not chart data is avaliable to display:
chart.noData("There is no Data to display at the moment.");
// Remove legend:
chart.showLegend(false);
d3.select('#chart svg')
.datum(res)
.transition().duration(500)
.call(chart);
d3.selectAll('.nv-y path').attr('display','none');
nv.utils.windowResize(chart.update);
return chart;
});
}
if you want to hide the 1st y axis do:
.nv-y1{
display:none;
}
if you want to hide the 2nd y axis do:
.nv-y2{
display:none;
}
http://plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=preview
Use this :
.domain {
display: none;
}
I am trying to get a super basic nvd3 chart rendering. The code looks something like this (fiddle here):
<div id="chart" class="chart with-transitions">
<svg></svg>
</div>
and
nv.addGraph({
generate: function() {
var chart = nv.models.line()
.margin({top: 20, right: 20, bottom: 20, left: 20})
d3.select('#chart')
.datum(sinAndCos())
.call(chart);
return chart;
}});
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
},
{
values: cos,
key: "Cosine Wave",
color: "#2ca02c"
}
];
}
But when I run this nothing happens. No errors generated, no chart displayed. I copied/modified this code from the most basic example they offer, but I can't seem to figure out what I broke. Can anyone see what I am doing wrong here?
FIDDLE
<div id="chart" class="chart with-transitions">
<svg height="500"></svg>
</div>
...
d3.select('#chart svg')
Demo Fiddle
You forgot to select the svg element that you want to render your chart in. Also, call lineChart() instead of line() if you want to display the axis and other information:
var chart = nv.models.lineChart() <-- lineChart()
.margin({top: 20, right: 20, bottom: 20, left: 20});
d3.select('#chart svg') <-- include svg
.datum(sinAndCos())
.call(chart);
I was trying to use python-nvd3's linePlusBarWithFocusChart in one of my projects. But the y4 data, the data on the focus bar shows up something like this:
http://i.stack.imgur.com/ntJNW.png
As you can see the data is not represented right. Following is the generated script:
<script type="text/javascript">
nv.addGraph(function() {
var chart = nv.models.linePlusBarWithFocusChart();
chart.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i });
chart.height(350);
chart.color(d3.scale.category10().range());
chart.y2Axis
.tickFormat(function(d) { return d3.format(',.2f')(d) });
chart.x2Axis
.tickFormat(function(d) {
var dx = data_linePlusBarWithFocusChart[0].values[d] && data_linePlusBarWithFocusChart[0].values[d].x || 0;
return d3.time.format('%d %b %Y')(new Date(dx));
});
chart.y4Axis
.tickFormat(function(d) { return d3.format(',.2f')(d) });
chart.y3Axis
.tickFormat(d3.format(',f'));
chart.xAxis
.tickFormat(function(d) {
var dx = data_linePlusBarWithFocusChart[0].values[d] && data_linePlusBarWithFocusChart[0].values[d].x || 0;
if (dx > 0) { return d3.time.format('%d %b %Y')(new Date(dx)) }
return null;
});
chart.y1Axis
.tickFormat(d3.format(',.4f'));
chart.bars.forceY([0]);
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key.indexOf('Sentiment Rate') > -1 ){
var y = String(graph.point.y) ;
}
if(key.indexOf('User Rating') > -1 ){
var y = String(graph.point.y) ;
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#linePlusBarWithFocusChart svg')
.datum(data_linePlusBarWithFocusChart)
.transition().duration(500)
.attr('height', 350)
.call(chart);
return chart;
});
</script>
The code that was used to generate the above script is:
type = "linePlusBarWithFocusChart"
chart = linePlusBarWithFocusChart(name=type, height=350, x_is_date=True, x_axis_format="%d %b %Y",
color_category="category10")
kwargs = {}
kwargs['bar'] = True
extra_serie = {"tooltip": {"y_start": "", "y_end": ""}}
chart.add_serie(name="", y=ydata, x=xdata, extra=extra_serie, **kwargs)
extra_serie = {"tooltip": {"y_start": "", "y_end": ""}}
chart.add_serie(name="", y=ydata2, x=xdata, extra=extra_serie)
chart.buildhtml()
Could anyone tell me what am I doing wrong!!
The data in your context chart looks like it's simply out of order. All you need to do is sort the data before you pass it to NVD3.