I'm simply trying to use local months on the x-axis of a bar chart.
First I would like to only represent months on x-axis and second I would like to have the months defined in localeFrance.
I have forked a fiddle but I can't make it work :https://jsfiddle.net/xjp2o0wt/6/
so here is my code.
Thanks for your valuable help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard</title>
<link rel="stylesheet" href="dc.css">
</head>
<body>
<div id=chart>
here
</div>
<script src="crossfilter.js"></script>
<script src="d3.js"></script>
<script src="dc.js"></script>
<script>
var localeFrance = d3.locale ({
"decimal": "",
"thousands": "",
"grouping": [3],
"currency": ["€ ", ""],
"dateTime": "%a %b %e %X %Y",
"date": "%d/%m/%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
"shortDays": ["lun", "mar", "mer", "jeu", "ven", "sa", "dim"],
"months": ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembrr", "Octobre", "Novembre", "Decembre"],
"shortMonths": ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Juil", "Aou", "Sep", "Oct", "Nov", "Dec"]
});
var dateFormat_in = d3.time.format.utc("%Y-%m-%d");
data=[{year:2017, month:1, value:12},{year:2017, month:2, value:15},{year:2017, month:3, value:12},
{year:2017, month:4, value:16},{year:2017, month:5, value:14}]
data.forEach(function(d) {
d["date"] = dateFormat_in.parse(d["year"]+"-"+d["month"]+"-01");
d["value"] = +d["value"];
});
ndx = crossfilter(data);
timeChart = dc.barChart("#chart");
monthDim = ndx.dimension(d => d3.time.month.utc(d["date"]));
monthGroup = monthDim.group().reduceSum(d=>d.value);
minDate = monthDim.bottom(1)[0]["date"];
maxDate = monthDim.top(1)[0]["date"];
timeChart
.width(480)
.height(320)
.margins({top: 5, right: 30, bottom: 20, left: 50})
.dimension(monthDim)
.group(monthGroup)
.x(d3.time.scale().domain([minDate, maxDate]))
.xUnits(d3.time.months)
//.xUnits(localeFrance.timeFormat("%b"))
.elasticY(true)
.centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month')
.gap(16)
.yAxis().ticks(1);
dc.renderAll();
</script>
I may be mistaken, but d3 doesn't seem to build international locales into the bundle. I'm new to this stuff myself, so I relied on a few other answers on SO which provide a lot more detail:
Localization of d3.js (d3.locale example of usage)
Where can in find the locale objects for d3.js for different countries
How to make localization on months / days for D3js?
We can define the fr_FR locale like so:
var fr_FR = {
"dateTime": "%A, le %e %B %Y, %X",
"date": "%d/%m/%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
"shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
"months": ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
"shortMonths": ["janv.", "févr.", "mars", "avr.", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."]
};
var frLocale = d3.locale(fr_FR);
Source: https://github.com/d3/d3-time-format/blob/master/locale/fr-FR.json
Now we need to tell the x axis to use the custom locale:
timeChart.xAxis()
.tickFormat(frLocale.timeFormat('%B'))
.ticks(d3.time.months);
We're also telling it to put ticks on the months; otherwise the d3 axis will try to draw a lot more.
Similarly we have to set xUnits to draw one bar per month (I see you have this in your question, but it was different in your fiddle):
timeChart
.xUnits(d3.time.months)
Unfortunately dc.js takes its x domain very literally, so if you're using .centerBar(true) you also need to offset your min and max date:
minDate = new Date(monthDim.bottom(1)[0]["date"]);
minDate.setDate(15)
maxDate = new Date(monthDim.top(1)[0]["date"]);
maxDate.setDate(15)
Et voilà, you might say. :)
Fork of your fiddle.
Related
TLDR: I have an NVD3 graph that shows tick lines all across the axis, but I would like to change it so it only displays on the axis lines if possible.
Here is a live example:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 80,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Timeline',
tickFormat: function(d) {
return d3.time.format('%B %d')(new Date(d))
},
ticks: 6,
showMaxMin: false
},
yAxis: {
axisLabel: 'Molecular density (kg/m^3)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -10,
showMaxMin: false
}
}
};
$scope.data = [{"key":"K7 molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":9},{"x":1435881600000,"y":8},{"x":1435968000000,"y":8},{"x":1436054400000,"y":9},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":8},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":7},{"x":1436659200000,"y":8}],"area":true,"color":"#0CB3EE"},{"key":"N41 type C molecules","values":[{"x":1435708800000,"y":8},{"x":1435795200000,"y":7},{"x":1435881600000,"y":8},{"x":1435968000000,"y":9},{"x":1436054400000,"y":7},{"x":1436140800000,"y":9},{"x":1436227200000,"y":8},{"x":1436313600000,"y":9},{"x":1436400000000,"y":9},{"x":1436486400000,"y":9},{"x":1436572800000,"y":9},{"x":1436659200000,"y":8}],"area":true,"color":"#383838"}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.1/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</body>
</html>
Is there any way I could make the tick lines appear just on the axes line only? To make it clear, this is what it looks like:
I used a different library to generate the following plot, and I would like the tick lines to appear just on the axis lines like this example instead:
It appears that there is no real way to do this with NVD3 as it does not provide a way to show tick marks on the axis. However, we could add our own tick marks by fetching the chart SVG and then modifying it.
I've attached an example that adds tick marks to X-Axis, and it is basically slightly modified based on this jsfiddle here: http://jsfiddle.net/3r88bgjw
var data;
data = [{
values: [],
}, ];
var i, x;
var prevVal = 3000;
var tickCount = 2000;
for (i = 0; i < tickCount; i++) {
x = 1425096000 + i * 10 * 60; // data points every ten minutes
if (Math.random() < 0.8) { // add some gaps
prevVal += (Math.random() - 0.5) * 500;
if (prevVal <= 0) {
prevVal = Math.random() * 100;
}
data[0].values.push({
x: x * 1000,
y: prevVal
});
}
}
var chart;
nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart.xScale(d3.time.scale()) // use a time scale instead of plain numbers in order to get nice round default values in the axis
.color(['#68c'])
.useInteractiveGuideline(true) // check out the css that turns the guideline into this nice thing
.margin({
"left": 80,
"right": 50,
"top": 20,
"bottom": 30,
})
.noData("There is no data to display.")
.duration(0);
var tickMultiFormat = d3.time.format.multi([
["%-I:%M%p", function(d) {
return d.getMinutes();
}], // not the beginning of the hour
["%-I%p", function(d) {
return d.getHours();
}], // not midnight
["%b %-d", function(d) {
return d.getDate() != 1;
}], // not the first of the month
["%b %-d", function(d) {
return d.getMonth();
}], // not Jan 1st
["%Y", function() {
return true;
}]
]);
chart.xAxis
.showMaxMin(false)
.tickPadding(10)
.tickFormat(function(d) {
return tickMultiFormat(new Date(d));
});
chart.yAxis
.tickFormat(d3.format(",.0f"));
var svgElem = d3.select('#chart svg');
svgElem
.datum(data)
.transition()
.call(chart);
// make our own x-axis tick marks because NVD3 doesn't provide any
var tickY2 = chart.yAxis.scale().range()[1];
var lineElems = svgElem
.select('.nv-x.nv-axis.nvd3-svg')
.select('.nvd3.nv-wrap.nv-axis')
.select('g')
.selectAll('.tick')
.data(chart.xScale().ticks())
.append('line')
.attr('class', 'x-axis-tick-mark')
.attr('x2', 0)
.attr('y1', tickY2 + 7)
.attr('y2', tickY2)
.attr('stroke-width', 3);
// set up the tooltip to display full dates
var tsFormat = d3.time.format('%b %-d, %Y %I:%M%p');
var contentGenerator = chart.interactiveLayer.tooltip.contentGenerator();
var tooltip = chart.interactiveLayer.tooltip;
tooltip.contentGenerator(function(d) {
d.value = d.series[0].data.x;
return contentGenerator(d);
});
tooltip.headerFormatter(function(d) {
return tsFormat(new Date(d));
});
return chart;
});
<div>Try resizing the panel to see the various types of time labels.</div>
<br>
<div id="chart">
<svg></svg>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>
I started off with this example: https://www.amcharts.com/demos/floating-bar-chart/ but want the floating-aspect also cover a date axis. This way I will be able to color a rectangular area in my charts.
I made the following changes:
Changed the x-axis to a date axis
Changed the y-axis to a value axis
Changed the data correspondingly
Changed the data-fields in the series-definition to use openValueXField, valueXField for the dates and openValueYField and valueYField for the values
Something (vertical colored lines) are displayed in the most left part of the chart but no colored areas.
When using values for both axes it works perfectly but not with dates. I hope some of you knows what is wrong here. The Amcharts Demo's only provide example with one axis.
The two source codes are included hereafter.
//
// Source Code for two numeric axis -> working
//
<meta content="text/html;charset=utf-6" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: 8,
endTime: 11,
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: 10,
endTime: 13,
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
91,31 43%
//
// Source Code for one date and one numeric axis -> NOT working
//
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: new Date(2021, 1, 28),
endTime: new Date(2021, 3, 17),
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: new Date(2021, 2, 5),
endTime: new Date(2021, 5, 7),
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {
pan:"zoom",
minimumDate: new Date(2021, 1, 18),
maximumDate: new Date(2021, 7, 20),
}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
94,3 97%
I have created a line chart using dc.js and crossfilter. The chart currently looks like this:
Required:
I want the legend of active inactive on top left to position below(bottom) of the chart in center and the x-axis tick label should start from Jan to Dec. I am adding my code below. Thank you.
const dateNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var data = [
{date: "2011-11-14T16:17:54Z", quantity: 2, active: 1000, inactive: 100, type: "tab", city: " "},
{date: "2011-11-14T16:20:19Z", quantity: 2, active: 190, inactive: 100, type: "tab", city: "Berlin"},
{date: "2011-11-14T16:28:54Z", quantity: 1, active: 300, inactive: 200, type: "visa", city: " "},
{date: "2011-11-14T16:30:43Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: "Amsterdam"},
{date: "2011-11-14T16:48:46Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T16:53:41Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T16:54:06Z", quantity: 1, active: 100, inactive: 0, type: "cash", city: " "},
{date: "2011-11-14T16:58:03Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:07:21Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:22:59Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
{date: "2011-11-14T17:25:45Z", quantity: 2, active: 200, inactive: 0, type: "cash", city: " "},
{date: "2011-11-14T17:29:52Z", quantity: 1, active: 200, inactive: 100, type: "visa", city: ""}
];
data.forEach(function(d){
var tempDate = new Date(d.date);
d.date = tempDate;
})
var facts = crossfilter(data);
var all = facts.groupAll();
//table
var dateDimension = facts.dimension(function(d){ return d.date; });
//line chart
var dateGroup = dateDimension.group().reduceSum(function(d){ return d.active; });
var dateGroupTip = dateDimension.group().reduceSum(function(d){ return d.inactive; });
var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;
var lineChart = dc.lineChart("#test")
.width(700)
.height(200)
.brushOn(false)
.margins({top:10,bottom:30,right:10,left:70})
.dimension(dateDimension)
.group(dateGroupTip,"inactive")
.stack(dateGroup,"active")
.renderHorizontalGridLines(true)
.renderArea(true)
.renderDataPoints(true)
// // .interpolate('basis')
// lineChart.xAxis().ticks(d3.timeMonth, 1)
// lineChart.xAxis().tickFormat(d3.timeFormat('%b'))
.clipPadding(data.length)
.legend(dc.legend().y(10).x(0).itemHeight(12).gap(5))
// .xAxis()
// .ticks(d3.time.month, 7)
// .tickFormat(d3.time.format('%e'));
// .xAxis().tickFormat(d3.time. format('%B'))
// .xUnits(d3.time.months)
.x(d3.scaleLinear().domain([minDate,maxDate]))
lineChart.yAxis().ticks(6);
lineChart.xAxis().ticks(12);
dc.renderAll();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dc.css"/>
<script src="d3.js"></script>
<script src="crossfilter.js"></script>
<script src="dc.js"></script>
</head>
<body>
<div id="test"></div>
<!-- <script src="app.js"></script> -->
<script src="play.js"></script>
</body>
</html>
Looks like you've figured most of it out, and got confused by the D3 version 3 to version 4 API changes?
Many of the lines you have commented out were correct except for these changes - stuff like d3.time.months changing to d3.timeMonths. You're not the only one - these changes caused a lot of confusion for all of us.
The last steps are
Use time scales: .x(d3.scaleTime().domain([minDate,maxDate]))
Round the dates down to the beginning of the month using d3.timeMonth, both in the dimension definition and in the minDate/maxDate calculation, e.g. var dateDimension = facts.dimension(function(d){ return d3.timeMonth(d.date); });
Tell the chart how to calculate the number of points to show: .xUnits(d3.timeMonths)
Format the x axis ticks: lineChart.xAxis().tickFormat(d3.timeFormat('%B'))
You had most of these, only commented out. Probably because you found examples using the D3v3 API, and they caused errors?
As for the legend, dc.js doesn't do anything sophisticated here - you just have to lay it out manually, setting the margins on the chart to allow enough space, and setting x and y on the legend to put the legend where you want it.
I found that
lineChart
.margins({top:10,bottom:60,right:25,left:40});
.legend(dc.legend().y(165).x(325).itemHeight(12).gap(5))
worked pretty well, but you'll have to adjust it to taste (and, unfortunately, when changes to your data cause the sizes of things to change).
Here's a working fiddle.. I took the liberty of changing your example data so that it includes the desired months.
You're going to run into trouble with this design if your data spans multiple years, but I guess you can cross that bridge when you come to it.
I am implementing the chart in d3.js, how can I "extract" a tributary example that is using the tributary object into HTML and Javascript code. Below is the code what i'm trying to do, but don't get success yet.
I have external JSON file sample.json which i need to use for chart data. Error shows that forEach is not a function. I am stuck what to do.
Please find my jsFiddle for whole code.
// loading sample.json
d3.json("sample.json", function(sample2) {
//var svg = d3.select("body").append("svg");
// date manipulation to format UTC to js Date obj
sample2.forEach(function(d) { d.time = new Date(d.time * 1000); });
// helpers and constants
var margin = {"top": 50, "right": 100, "bottom": 56, "left": 50};
var width = 930 - margin.right - margin.left;
var height = 582 - margin.top - margin.bottom;
var timeFormat = d3.time.format("%c");
var X = width/sample2.length*0.25;
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="inlet.js"></script>
<link src="style.css" />
</head>
<body>
</body>
</html>
Please let me know what I'm doing wrong with my code. Here is my fiddle http://jsfiddle.net/wLrdgt89/1/
You need to fix these:
Problem:1
{"sample2": [ {"time": 1387212120, "open": 368, "close": 275, "high": 380, "low": 231}, {"time": 1387212130, "open": 330, "close": 350, "high": 389, "low": 310}, {"time": 1387212570, "open": 395, "close": 253, "high": 438, "low": 213} ]}
Your json is an object and not an Array so forEach will not work.
You need to do something like this:
d3.json("sample.json", function(sample2) {
sample2= sample2.sample2
Problem2
Your html body has no svg so you need to append it:
var canvas = d3.select("svg")//this is wrong
var canvas = d3.select("body").append("svg")//add svg to the body
Working code here
Hope this helps!
I'm just starting out with nvd3 (and d3), and am struggling with logarithmic scaling.
With the linear scale there is no problem, but with the log scale, the bars are not drawn and console logs:
Error: Invalid value for <rect> attribute y="NaN"
Problem: http://plnkr.co/edit/Roe6tiYNDeezDEJHNCwj?p=preview
My code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://rawgithub.com/novus/nvd3/master/src/nv.d3.css">
<script src="https://rawgithub.com/novus/nvd3/master/lib/d3.v3.js"></script>
<script src="https://rawgithub.com/novus/nvd3/master/nv.d3.js"></script>
</head>
<body>
<script>
var chart, chart2;
var data = [{
"key": "Test",
"values":
[
{"x": "One", "y": 110},
{"x": "Two", "y": 6},
{"x": "Three", "y": 12052 },
{"x": "Four", "y": 4543},
{"x": "Five","y": 6069},
{"x": "Six","y": 3899 }
]
}];
/*Linear scale*/
nv.addGraph(function () {
chart = nv.models.multiBarChart()
.showControls(false)
.showLegend(false);
chart.multibar
.yScale(d3.scale.linear())
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
/*Log scale - not working*/
nv.addGraph(function () {
chart2 = nv.models.multiBarChart()
.showControls(false)
.showLegend(false);
chart2.multibar
.yScale(d3.scale.log());
d3.select('#chart2 svg')
.datum(data)
.call(chart2);
nv.utils.windowResize(chart2.update);
return chart;
});
</script>
<div id="chart">
<svg></svg>
</div>
<div id="chart2">
<svg></svg>
</div>
</body>
</html>
I've tried adding domain and range values, but to no avail
.yDomain([0, 12500])
.yRange([50, 0]);
Any ideas?
This doesn't work for the current version of D3 because log scales aren't defined at 0 and there are a couple of 0s hardcoded in the NVD3 source. You would have to either modify the NVD3 source or create a composite scale that returns a useful value for 0 to make this work.