score:0
Accepted answer
looks like a lot of stuff is missing from your code.
i made a few changes in the code and it works now.
//data from webservice
var jsondata = [{ "year": "2017", "jan": "0", "feb": "21", "mar": "65", "apr": "25", "may": "33", "jun": "30", "jul": "17", "aug": "26", "sep": "0", "oct": "5", "nov": "33", "dec": "12" }, { "year": "2018", "jan": "10", "feb": "0", "mar": "0", "apr": "0", "may": "0", "jun": "0", "jul": "0", "aug": "0", "sep": "0", "oct": "0", "nov": "0", "dec": "0" }];
var width = 400;
var height = 400;
var svg = d3.select('#linechart');
var x = d3.scaleband().range([0, width]);
var y = d3.scalelinear().range([height, 0]);
var months = [];
d3.keys(jsondata[0]).filter(function(key) {
if (key !== "year") {
months.push(key)
}
});
var years = [];
for (var i = 0; i < jsondata.length; i++) {
years.push(jsondata[i]['year']);
}
var tests = months.map(function(m) {
return {
month: m,
values: jsondata.map(function(d) {
return {
year: d.year,
quote: parseint(+d[m])
};
})
};
});
x.domain(tests.map(function(d) {
return d.month;
}));
var extent = [d3.min(tests, function(c) {
return d3.min(c.values, function(v) {
return v.quote;
});
}),
d3.max(tests, function(c) {
return d3.max(c.values, function(v) {
return v.quote;
});
})
]
y.domain(extent);
// create line
var drawline = d3.line()
.curve(d3.curvebasis)
.x(function(d) {
return x(d.month);
})
.y(function(d) {
return y((d.values[0]['quote']));
});
var draw = svg.append('g').append("path")
.datum(tests)
.attr("class", "line")
.attr("d", drawline)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5);
Source: stackoverflow.com
Related Query
- Issue with d3 Multi Line Chart
- simple multi line chart with D3
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- D3 Multi Series Line chart not working with correct xAxis values
- D3 v4 Multi line chart Brush Issue NaN when moving brush
- Issue with tooltip D3 Line Chart
- d3.js - Multi series line chart tool tip issue
- D3 Multi Series Line Chart with Clickable Legend
- d3.js multi line chart with brush
- D3 Interactive Legend on Multi Line Chart Issue
- How to render multi line chart with DC.js with the following type of data - JAVASCRIPT (DC.js)
- D3 Line chart with ordinal scale issue
- Issue with incorrect dates displayed in line chart
- D3 Multi Series Line chart with non time x axis
- d3 multi line chart with zoom and update
- nvd3 line chart with string values on x-axis
- D3.JS time-series line chart with real-time data, panning and zooming
- Multiseries line chart with mouseover tooltip
- D3 line chart axis text labels in multi line
- NVD3 line chart with realtime data
- javascript charting - nvd3 line chart with two Y-axis
- d3 Line Chart with enter-update-exit logic
- NVD3 line chart with vertical line
- dc.js Series Chart multi line
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- dc.js line chart with range of colors
- Line chart using ordinal x-axis with d3.js and nvd3.js
- Draw D3 Simple Line chart With an Array
- Multi series chart (D3) with missing values
- Visualize date specific data with a line chart in browser with javascript
More Query from same tag
- D3.js highlight related nodes / links
- Add different colors to each bar in D3
- Leaflet: How to get pixel position of a lat lng after zoom, before zoom begins
- Crosshair / x value tooltip for linear scale
- Any one know how to Apache hive data visualization using D3js?
- d3.js: Cannot read property 'call' of undefined
- How to select right chart for your data
- Is there any way to start XAxis from 1 instead of 0
- Unable to parse date format in Javascript
- customizing d3.js brush as slider
- What is the most efficient way to aggregate a value from a JSON tree in d3.js?
- d3 pie chart with flask server
- d3js - use json data
- D3.js force layout : show root path of any node
- Add links and hover effects to multi series donut chart in d3.js
- Modifiying dimple layout grouped chart
- d3 Cannot read property 'classed' of undefined
- TS2345 and TS2339 errors are thrown for simple code in Angular
- Need pauses - timing not working on iterating through text strings w/ d3/svg (piling up on each other)
- how to convert scatter chart into line chart in d3 version 3
- d3 transition for expanding div
- What is the best way to combine multiple csv files data input using d3.csv in d3.json ?
- Cannot load .geojson file with D3 in ASP.NET Core
- css complicated selector query
- Zoom to arbitrary feature in D3 canvas
- HTML2Canvas not rendering D3 font and font size
- How to create a grouped histogram plot in D3.js?
- d3 zoom: prevent page zoom when using a touchscreen
- Unable to reset the focus ordinal bar chart
- Query a Chart with C3.js