How to add JSON data to nvd3 charts - javascript

I am new to Javascript and couldn't find error in my code.
I am using NVD3 charts here. It is a time series based chart with date and closing prices of a particular stock. Data ranges from 2005 till now.
Here is the code
var data= JSON.parse("Data.JSON")
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({top: 70, right: 70, bottom: 70, left: 70})
.useInteractiveGuideline(true)
.transitionDuration(100)
.showYAxis(true)
.showXAxis(true)
;
//Chart x-axis settings
chart.xAxis
.axisLabel('date')
.tickFormat(function(d) {return new Date((data.Date - (25567 + 1))*86400*1000);
chart.yAxis //Chart y-axis settings
.axisLabel('close')
.tickFormat(d3.scale.linear(data.Close));
d3.select('#Charts svg') //Selecting the <svg> element where i want to render the chart in.
.datum(data) //Populating the <svg> element with chart data...
.call(chart); //Finally, rendering the chart!
//Update the chart when window resizes.
})
;
//Data
{
"Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110]
"Close": [ 2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8]
}


The number of array elements in "Close" are less compared to "Date".
Here is a possible solution that you might be looking for:
nv.addGraph(function () {
var chart = nv.models.lineChart();
chart.xAxis.axisLabel('date')
.tickFormat(d3.format(''));
chart.yAxis.axisLabel('close')
.tickFormat(d3.format(''));
d3.select('#dateChart')
.datum(chartData())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(function () {
d3.select('#dateChart').call(chart)
});
return chart;
});
function chartData() {
var myData = {
"Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110],
"Close": [2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8, 2588.8]
//The number of array elements in Close were less compared to Date. Hence added 2588.8 as the last element
};
var result = [];
for (var i = 0; i < myData.Date.length; i++) {
result.push({
x: myData.Date[i],
y: myData.Close[i]
});
}
return [{
values: result,
key: 'Date Chart',
color: '#ff7f0e'
}];
}
JS Fiddle: https://jsfiddle.net/m7oaxjue/3/

Related

dc.js / d3 xAxis show and order Monthname in linechart

Hello i have a question about dc/d3, i would like to show on the xAxis the monthname, Januar till December (in correct order)
The Value should be sum up for each year (i mean on January shoud be the Values from Year 2020 till 2022 - only one Januar)
the following code works fine for Bars because the reorder of the x in this way works fine, but for line chart i get a funny chart.
function Dimension() {
return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
function Group(thisDim) {
var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
return thisVal;
}
var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
.title(function (d) { return d.key; })
.ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
.label(function (d) { return d.key;})
.margins({top: 10, right: 10, bottom: 30, left: 70})
.elasticY(true)
;
for (var i=0;i<12;i++) x.push(moment.localeData()._months[i]);
chartObject.x(d3.scaleBand().domain(x)).xUnits(dc.units.ordinal);
This is a simple code (i hope i have put all in)
Here is a screenshot of the chart:

NVD3 chart shows tooltip for wrong data

I have a chart in NVD3 with a date on the X axis and a float on the Y axis.
It displays fine, but when I hover over the chart to make the tooltip pop up, it doesn't show it for the dataset I'm currently hovering over. Here's a GIF to make it more clear, hopefully:
This is the code I've used:
<script>
var data = function() {
return [
{
values: [
{x:"2018-09-08", y:19.98},{x:"2018-09-07", y:11.99},{x:"2018-09-06", y:9.98},{x:"2018-09-05", y:4.99},{x:"2018-09-03", y:9.98},{x:"2018-09-02", y:14.99}, ],
key: 'Turnover'
}
];
}
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.xScale(d3.time.scale())
.x( function(d){return d3.time.format('%Y-%m-%d').parse(d.x);} );
;
chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {return d3.time.format("%Y-%m-%d")(new Date(d))});
;
chart.yAxis
.axisLabel('Sales')
.tickFormat(d3.format('.02f'))
;
chart.showLegend(false);
d3.select('#nvd3 svg')
.datum(data())
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
</script>
Edit 1: When I do not use the .useInteractiveGuideline(true) function, it does work and the tooltip is presented on the correct set of data. However, I do want to use this function. So any help here?

Looking at the examples of the NVD3 site they work with a Linear Scale for time axis.
Converting the code to this too shows the requested behavior.
You have to set the tick positions yourself because the automatic ticks for a linear scale are not on dates
var data = function() {
return [
{
values: [
{x:"2018-09-02", y:14.99},
{x:"2018-09-03", y:9.98},
{x:"2018-09-05", y:5.99},
{x:"2018-09-06", y:9.98},
{x:"2018-09-07", y:11.99},
{x:"2018-09-08", y:19.98}
],
key: 'Turnover'
}
];
};
var formatDate = d3.time.format("%Y-%m-%d");
nv.addGraph(function () {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;
var mydata = data();
mydata[0].values.forEach(e => { e.x = Date.parse(e.x); });
chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {return formatDate(new Date(d))})
.tickValues(mydata[0].values.map( d => d.x ))
;
chart.yAxis
.axisLabel('Sales')
.tickFormat(d3.format('.02f'))
;
chart.showLegend(false);
d3.select('#nvd3 svg')
.datum(mydata)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});

nvd3 multibarchart height and label issue

I am using the reusable NVD3 multibarchart, I have 4 serious and 250+ categories. this chart is working but the rectangles are very small and some of the labels are overlapping.
the out see below.
nvd3 multibarchart
the code which i am using is
var data = [{"key":"Ready","total":135,"values":[{"label":"111","value":1},{"label":"136","value":1},{"label":"155","value":2},{"label":"525","value":2},{"label":"RD ","value":7}, {"label":"601","value":3},{"label":"624","value":2},{"label":"155","value":1},{"label":"ADC","value":2},{"label":"177","value":2},{"label":"152","value":2},{"label":"026","value":3}, {"label":"623","value":2},{"label":"800","value":1},{"label":"067","value":2},{"label":"096","value":2},{"label":"133","value":1},{"label":"Mer","value":1},{"label":"Mer","value":2},{"label":"050","value":1},{"label":"138","value":1},{"label":"098","value":4},{"label":"080","value":2},{"label":"010","value":1},{"label":"034","value":1},{"label":"069","value":1},{"label":"020","value":1},{"label":"060","value":1},{"label":"037","value":1},{"label":"006","value":3},{"label":"167","value":2},{"label":"117","value":1},{"label":"143","value":1},{"label":"IDP","value":1},{"label":"185","value":1},{"label":"575","value":2},{"label":"146","value":2},{"label":"173","value":1},{"label":"171","value":3},{"label":"633","value":1},{"label":"010","value":4},{"label":"040","value":2},{"label":"068","value":2},{"label":"175","value":2},{"label":"054","value":3},{"label":"096","value":1},{"label":"096","value":5},{"label":"154","value":2},{"label":"050","value":7},{"label":"096","value":4},{"label":"096","value":2},{"label":"034","value":3},{"label":"069","value":2},{"label":"020","value":2},{"label":"060","value":3},{"label":"118","value":1},{"label":"164","value":3},{"label":"415","value":3},{"label":"138","value":3},{"label":"126","value":1},{"label":"037","value":2},{"label":"065","value":3},{"label":"157","value":2},{"label":"SCC","value":2}]},{"key":"Not Started","total":19890,"values":[{"label":"111","value":22},{"label":"136","value":216},{"label":"155","value":300},{"label":"525","value":174},{"label":"RD ","value":1253},{"label":"601","value":797},{"label":"624","value":271},{"label":"155","value":60},{"label":"ADC","value":272},{"label":"177","value":159},{"label":"152","value":426},{"label":"026","value":519},{"label":"623","value":562},{"label":"800","value":69},{"label":"067","value":643},{"label":"096","value":135},{"label":"133","value":272},{"label":"Mer","value":97},{"label":"Mer","value":303},{"label":"050","value":119},{"label":"138","value":54},{"label":"098","value":644},{"label":"080","value":384},{"label":"010","value":121},{"label":"034","value":21},{"label":"069","value":99},{"label":"020","value":42},{"label":"060","value":31},{"label":"037","value":54},{"label":"006","value":337},{"label":"167","value":303},{"label":"117","value":221},{"label":"143","value":88},{"label":"IDP","value":282},{"label":"185","value":102},{"label":"575","value":313},{"label":"146","value":139},{"label":"173","value":93},{"label":"171","value":210},{"label":"633","value":103},{"label":"010","value":733},{"label":"040","value":356},{"label":"068","value":475},{"label":"175","value":301},{"label":"054","value":466},{"label":"096","value":42},{"label":"096","value":739},{"label":"154","value":295},{"label":"050","value":679},{"label":"096","value":423},{"label":"096","value":165},{"label":"034","value":380},{"label":"069","value":350},{"label":"020","value":560},{"label":"060","value":665},{"label":"118","value":112},{"label":"164","value":762},{"label":"415","value":174},{"label":"138","value":346},{"label":"126","value":101},{"label":"037","value":346},{"label":"065","value":563},{"label":"157","value":416},{"label":"SCC","value":131}]},{"key":"Obsolet","total":861,"values":[{"label":"111","value":1},{"label":"136","value":16},{"label":"155","value":16},{"label":"525","value":3},{"label":"RD ","value":32},{"label":"601","value":23},{"label":"624","value":17},{"label":"155","value":1},{"label":"ADC","value":10},{"label":"177","value":5},{"label":"152","value":23},{"label":"026","value":25},{"label":"623","value":25},{"label":"800","value":1},{"label":"067","value":31},{"label":"096","value":3},{"label":"133","value":14},{"label":"Mer","value":1},{"label":"Mer","value":9},{"label":"050","value":2},{"label":"138","value":2},{"label":"098","value":15},{"label":"080","value":9},{"label":"010","value":7},{"label":"069","value":7},{"label":"020","value":5},{"label":"006","value":16},{"label":"167","value":23},{"label":"117","value":8},{"label":"143","value":5},{"label":"IDP","value":20},{"label":"185","value":10},{"label":"575","value":22},{"label":"146","value":12},{"label":"173","value":2},{"label":"171","value":12},{"label":"633","value":7},{"label":"010","value":27},{"label":"040","value":21},{"label":"068","value":23},{"label":"175","value":19},{"label":"054","value":19},{"label":"096","value":1},{"label":"096","value":26},{"label":"154","value":18},{"label":"050","value":31},{"label":"096","value":19},{"label":"096","value":10},{"label":"034","value":21},{"label":"069","value":21},{"label":"020","value":26},{"label":"060","value":22},{"label":"118","value":7},{"label":"164","value":19},{"label":"415","value":8},{"label":"138","value":17},{"label":"126","value":6},{"label":"037","value":15},{"label":"065","value":22},{"label":"157","value":17},{"label":"SCC","value":6}]},{"key":"Started","total":379,"values":[{"label":"111","value":2},{"label":"136","value":8},{"label":"155","value":5},{"label":"525","value":6},{"label":"RD ","value":9},{"label":"601","value":5},{"label":"624","value":5},{"label":"155","value":4},{"label":"ADC","value":5},{"label":"177","value":5},{"label":"152","value":6},{"label":"026","value":6},{"label":"623","value":8},{"label":"800","value":5},{"label":"067","value":10},{"label":"096","value":7},{"label":"133","value":5},{"label":"Mer","value":4},{"label":"Mer","value":9},{"label":"050","value":1},{"label":"138","value":1},{"label":"098","value":11},{"label":"080","value":5},{"label":"010","value":1},{"label":"069","value":3},{"label":"060","value":1},{"label":"006","value":10},{"label":"167","value":5},{"label":"117","value":7},{"label":"143","value":4},{"label":"IDP","value":5},{"label":"185","value":4},{"label":"575","value":7},{"label":"146","value":4},{"label":"173","value":5},{"label":"171","value":5},{"label":"633","value":4},{"label":"010","value":7},{"label":"040","value":7},{"label":"068","value":7},{"label":"175","value":5},{"label":"054","value":10},{"label":"096","value":5},{"label":"096","value":15},{"label":"154","value":6},{"label":"050","value":10},{"label":"096","value":11},{"label":"096","value":11},{"label":"034","value":8},{"label":"069","value":7},{"label":"020","value":9},{"label":"060","value":8},{"label":"118","value":4},{"label":"164","value":8},{"label":"415","value":7},{"label":"138","value":6},{"label":"126","value":4},{"label":"037","value":5},{"label":"065","value":8},{"label":"157","value":7},{"label":"SCC","value":7}]}];
(function(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.forceY([0])// To make 10 to be starting point.
//.margin({top: 30, right: 20, bottom: 50, left: 175})
.showValues(true)
.height(2500)
.showControls(true);
chart.yAxis.tickFormat(d3.format(','));
d3.select('#chart1 svg')
.datum(data)
.call(chart)
.attr('height', 5500);
nv.utils.windowResize(chart.update);
return chart;
});})(data);

The overlap is because:
In a key example Ready:
Has value 2 for label 155
{
"label": "155",
"value": 2
}
later it has value 1 for value 155
, {
"label": "155",
"value": 1
}
this is the reason for overlap (it is trying to show 2 and 1 on label 155).
Fix:
Ensure that for a label there is only one value for a given key.
Increase the size of the svg like here

NVD3 chart: Plot toggle with muiltiChart / multiple yScales causes axis to disappear, but not the plot

I'm trying to get two lines to use two different scales.
When I try to toggle a plot, the grid lines disappear, instead of the plot.
Can you figure out what I'm doing wrong?
http://jsfiddle.net/3ZP3S/
var dataset1 = {
values : [],
key : "Math.cos",
type: "line",
color: '#2ca02c',
yAxis: 1
};
var dataset2 = {
values : [],
key : "sin",
type: "line",
color : "#ff7f0e",
yAxis: 2
};
for (var i = -3.14; i < 3.1415; i+= .01){
dataset1.values.push( { x: i , y : Math.cos(i) });
dataset2.values.push( { x: i , y : Math.sin(i) * 3 });
}
var data = [dataset1, dataset2];
nv.addGraph( function() {
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range());
chart.xAxis
.tickFormat(d3.format(',.2f'));
chart.yAxis1
.tickFormat(d3.format(',.1f'));
chart.yAxis2
.tickFormat(d3.format(',.1f'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
return chart;
});

This was a bug with nvd3. I tried several "previous" versions of nvd3, and d3, and this always occurred.
We also decided to drop nvd3 and switch to C3.js, which seems to be "much" more mature in terms of stability...

Trying to render data d3 crossfilter dc.js BarChart. The chart is drawn, but it's empty

I must be doing something naive, but I can't get my data to render within the chart.
here's my example data:
var data = [
{
date: '02-12-2013',
val: 13,
}
{
date: '02-13-2013',
val: 6,
}
...
]
here's my code:
var cf = crossfilter(data);
var dim = cf.dimension(function(d){ return d.val });
var group = dim.group();
var barchart = dc.barChart('#container');
barchart.width(850)
.height(250)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(dim)
.group(group)
.gap(1)
.x(d3.time.scale()
.domain([new Date(data[0].date),
new Date(data[data.length-1].date)]))
.xUnits(d3.time.day)
.centerBar(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.render();
What am I missing here? Here's the screenshot of the chart:

Try to use date as your dimension:
var dim = cf.dimension(function(d){ return d.date });
For bar chart your dimension usually is what needs to be matched with your X axis scale.

Categories

Resources