nvd3 multiBarChart not showing x axis - nvd3.js

Hi i tried to create a nvd3 multibarchart but i can't get x-axis display.
I searched online but cannot find a solution to my issue.
here is complete code please help. i also attached a pix for output. Thanks!
<script>
function data0() {
var a0 = [],
a1 = [];
a0.push({ x: 1, y: 5065});
a0.push({ x: 2, y: 11464});
a0.push({ x: 3, y: 200});
a0.push({ x: 4, y: 100});
a0.push({ x: 5, y: 0});
a0.push({ x: 6, y: 0});
a0.push({ x: 7, y: 100});
a0.push({ x: 8, y: 2200});
a0.push({ x: 9, y: 2200});
a0.push({ x: 10, y: 0});
a0.push({ x: 11, y: 0});
a0.push({ x: 12, y: 0});
a0.push({ x: 13, y: 0});
a0.push({ x: 14, y: 0});
a1.push({ x: 1, y: 148});
a1.push({ x: 2, y: 2966});
a1.push({ x: 3, y: 1200});
a1.push({ x: 4, y: 79});
a1.push({ x: 5, y: 0});
a1.push({ x: 6, y: 0});
a1.push({ x: 7, y: 0});
a1.push({ x: 8, y: 2185});
a1.push({ x: 9, y: 2185});
a1.push({ x: 10, y: 0});
a1.push({ x: 11, y: 0});
a1.push({ x: 12, y: 0});
a1.push({ x: 13, y: 0});
a1.push({ x: 14, y: 0});
return [
{
values: a1,
key: 'Queue',
color: '#04B45F'
},
{
values: a0,
key: 'In Progress',
color: '#DBA901',
area: true
}
];
}
nv.addGraph(function () {
var chart = nv.models.multiBarChart()
.margin({ left: 65, right: 40, bottom: 45 })
.stacked(true)
.showControls(false)
;
chart.xAxis
.axisLabel("Daily")
.rotateLabels(0)
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])
.tickSize(12)
.showMaxMin(false)
.tickFormat(function (d) {
var _tools = ["", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N"]
return _tools[d]
});
chart.yAxis
.axisLabel("Number of[enter image description here][1]")
.tickFormat(d3.format(',.0f'));
d3.select('#BarChart-Cell svg')
.datum(data0)
.transition()
.duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
</script>
[ http://i.stack.imgur.com/HNNJf.png ]

Related

Aggregate array of objects into a single array in elastic search

I'm having few documents which is of the form
{
...id information and so on,
coordinates: [{x, y}]
...few other indexes
}
I want to generate an elastic search aggregation which will combine whole coordinates array into a single array. For example
The documents are
[
{
...
coordinates: [
{x: 20, y: 30},
{x: 50, y: 10},
{x: 40, y: 20}
],
...
},
{
...
coordinates: [
{x: 10, y: 5},
{x: 20, y: 15},
{x: 60, y: 90},
{x: 70, y: 50}
],
...
},
{
...
coordinates: [
{x: 90, y: 20},
{x: 80, y: 70}
],
...
},
]
In the output I need to generate something like this using the aggregation
[
{x: 20, y: 30},
{x: 50, y: 10},
{x: 40, y: 20},
{x: 10, y: 5},
{x: 20, y: 15},
{x: 60, y: 90},
{x: 70, y: 50},
{x: 90, y: 20},
{x: 80, y: 70}
]

nvd3 line chart xaxis with month names not working

I'm trying a line chart for several years with month names in the xaxis. xaxis seems to be an integer so I used the function from this answer: https://stackoverflow.com/a/30325918
The problem is that the chart is cut off by number 9 (which stands for "Okt") and I don't know why. So the 10 and 11 are missing. Also the tooltips are not shown, maybe that's a subsequent fault.
Style for the svg:
#chart svg {
height: 600px;
width: 1456px;
}
Code for the Chart:
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 50}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
var Monate = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
chart.xAxis //Chart x-axis settings
.axisLabel('Monat')
.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]).tickFormat(function(d){
return Monate[d]
});
chart.forceY([0, 55000]);
d3.select('#chart svg').datum([{ values: [{ x:'0', y: '0'},{ x:'1', y: '0'},{ x:'2', y: '7147.75'},{ x:'3', y: '5567.75'},{ x:'4', y: '8307.75'},{ x:'5', y: '7680.75'},{ x:'6', y: '10416.75'},{ x:'7', y: '15119.25'},{ x:'8', y: '6654.75'},{ x:'9', y: '7670.75'},{ x:'10', y: '8535.75'},{ x:'11', y: '25978.5'}], key: '2012'},
{ values: [{ x:'0', y: '4397.5'},{ x:'1', y: '14542.5'},{ x:'2', y: '18652.5'},{ x:'3', y: '18027.5'},{ x:'4', y: '10123.5'},{ x:'5', y: '11686.25'},{ x:'6', y: '10451.5'},{ x:'7', y: '17918'},{ x:'8', y: '11013.25'},{ x:'9', y: '11598.25'},{ x:'10', y: '12179'},{ x:'11', y: '54450.75'}], key: '2013'},
{ values: [{ x:'0', y: '13257.75'},{ x:'1', y: '10050.25'},{ x:'2', y: '17530'},{ x:'3', y: '16684'},{ x:'4', y: '10437.25'},{ x:'5', y: '31956.5'},{ x:'6', y: '24343.75'},{ x:'7', y: '24026.5'},{ x:'8', y: '24754.5'},{ x:'9', y: '17423'},{ x:'10', y: '27284.75'},{ x:'11', y: '50121.25'}], key: '2014'},
...and so on...
{ values: [{ x:'0', y: '954'},{ x:'1', y: '0'},{ x:'2', y: '0'},{ x:'3', y: '0'},{ x:'4', y: '0'},{ x:'5', y: '0'},{ x:'6', y: '0'},{ x:'7', y: '0'},{ x:'8', y: '0'},{ x:'9', y: '0'},{ x:'10', y: '0'},{ x:'11', y: '0'}], key: '2019'}]).transition().duration(500).call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
});
All your x and y are strings.
Remove all the ' characters.
I have set the size style on the div#chart because nvd3.css has a style for the svg with width and height set to 100%.

How to allow Duplicate Tick Labels in Plotly?

I observed that while providing duplicate ticklabels (with an aim to mention the class of categorical variable), plotly creates a unique set and displays only the non-repeated tick labels. Is there a way to by-pass this feature and allow duplicate tick-labels?
var data = [
{
z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}
];
Plotly.newPlot('myDiv', data);
Following is the jsfiddle depicting the issue:
https://jsfiddle.net/mam8sgwx/
Set the layout with ticktext:
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Here is the demo:
var data = [{
z: [
[1, 20, 30, 50, 1],
[20, 1, 60, 80, 30],
[30, 60, 1, -10, 20]
],
y: ['Morning', 'Afternoon', 'Evening'],
type: 'heatmap'
}];
var layout = {
xaxis: {
tickmode: "array",
ticktext: ['Healthy', 'Healthy', 'Moderate', 'Diseased', 'Diseased'],
tickvals: [0, 1, 2, 3, 4]
}
}
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div id="myDiv"></div>

How should I modify my dataset and D3.JS code to add a group name?

Here is my dataset
var dataset = [{ x: 0, y: 100 }, { x: 1, y: 833 }, { x: 2, y: 1312 },
{ x: 3, y: 1222 }, { x: 4, y: 1611 },
{ x: 0, y: 200 }, { x: 1, y: 933 }, { x: 2, y: 1412 },
{ x: 3, y: 1322 }, { x: 4, y: 1711 },]
I'm not sure where to specify the name of each dataset, How should this be modified to allow for a Group Name to be passed and what changes should be made in my D3.JS code ?
Fiddle https://jsfiddle.net/qvrL3ey5/
Using http://jsfiddle.net/2N2rt/15/ I was able to resolve this issue.
Example
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, -100, 7, 1, 1, 111]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 107]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 130]}
];

lineChart xAxis wrong date

why my lineChart show the month in the xAxis instead of sunday?
Thanks for help =)
Here is my code:
var hitslineChart = dc.lineChart("#chart-line-hitsperday");
var data = [
{date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
{date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
{date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
{date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
{date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
{date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
{date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
{date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
{date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
];
var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
d.date = Date.parse(d.date);
d.total= d.http_404+d.http_200+d.http_302;
});
var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;
hitslineChart
.width(500).height(200)
.dimension(dateDim)
.group(hits)
.x(d3.time.scale().domain([minDate,maxDate]))
.xAxis().ticks(5)
.yAxisLabel("Hits per day");
dc.renderAll();![the result][1]
the result on the xAxis is : Thu27-Fri28-Sat29-Dec30-Mon31-2013-Wed02-Thu03-Fri04-Sat05-Jan06...
1) You will want to parse your incoming data using the date formatter:
d.date = Date.parse(d.date); \\ Old
d.date = parseDate.parse(d.date); \\ New
This will explicitly match the format of your input data.
2) If you want the data to be grouped by days, you will need to specify that in your dimension. The d3.time.day helper method will set the time to 00:00:00 on the data supplied. This makes the data group together like you want:
var dateDim = ndx.dimension(function(d) {return d.date;}); \\old
var dateDim = ndx.dimension(function(d) {return d3.time.day(d.date);}); \\ new
It's not clear whether you want a point per day (Jan 1, Jan 2, Jan 3, etc) or a point per day of the week (Sun, Mon, Tues). The d3.time.day method groups the date by the calendar day.
3) You can specify the tick format using the following method:
.xAxis().tickFormat(function(v) {return displayDate(v)});
Details about time formatting is available at https://github.com/mbostock/d3/wiki/Time-Formatting.
Here is a jsfiddle that adapts your code to display day of week on the x-axis:
http://jsfiddle.net/djmartin_umich/6V4Ey/
I hope this helps!
-DJ

Resources