NVD3 converting JSON Data - nvd3.js

I have json data in the following format :
[{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}]
I want to create a bar chart in NVD3 where x coordinates will be label and the y coordinates will be the value. So how can I achieve it. I have gone through many examples where the JSON data was used is a different format but my data is as shown above.
EDITED CODE:
Here is the js code through which I am trying to create a chart in NVD3 .
d3.json("http://localhost:8080/api/study", function(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart().x(function(d) {
return d.label;
}).y(function(d) {
return d.value;
}).margin({
top : 30,
right : 20,
bottom : 50,
left : 175
}).showValues(true)//Show bar value next to each bar.
.tooltips(true)//Show tooltips on hover.
//.transitionDuration(350)
.showControls(true);
//Allow user to switch between "Grouped" and "Stacked" mode.
chart.yAxis.tickFormat(d3.format(',.2f'));
d3.select('#chart11 svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});

Most charts in nvd3.js have the following data sceleton:
[
{
key: "<Series name>",
color: "<CSS color>",
values: [
{x: 0, y: 10},
{x: 1, y: 20},
{x: 2, y: 30}
....
]
},
{
key: "<Series name>"
...
}
]
In your case the following format will be valid:
[
{
key: "Series 1",
values: [
{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}
]
}
]
You will need to specify axis properties accessors:
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })

Related

VEGA - area chart - strange data point behaviour

Does somebody know why my data points are twisted at some positions? (fig.1)
I use the same data-set in Vega-Lite and it works there. But in Vega I'm missing someting.
Maybe someone can help me out in this regard that would be most welcome :)
Datasample:
{
"score" : 18,
"time_out" : false
"hits" : {
"total" : {
"value" : 0123,
"relation" : "eq"
},
"max_score" : 1.8,
"hits" : [
{
"_index" : "dataIndex",
"_type" : "log",
"_source" :{
"#timestamp" : "2017-01-13345:00:16.0301135Z"
"numericValue" : 2.0
}
},
{
"_index" : "dataIndex",
"_type" : "log",
"_source" :{
"#timestamp" : "2017-02-20345:10:16.0301135Z"
"numericValue" : 3.0
}
}
]
}
}
Fig.1
Example in Vega - everything works as expected, except some points are skewed
{
$schema: https://vega.github.io/schema/vega/v5.json
data: [
{
name: table
url: {
%context%: true
%timefield%: #timestamp
index: dataIndex-*
body: {
size: 1000
aggs: {
hits: {
date_histogram: {
field: #timestamp
fixed_interval: 10m
extended_bounds: {
min: { %timefilter%: min}
max: { %timefilter%: max}
}
}
}
}
}
}
format: {
property: hits.hits
}
transform: [
{
type: formula
as: varTime
expr: toDate(datum._source['#timestamp'])
}
{
type: filter
expr: datum._source['#timestamp'] != null && datum._source['numericValue'] > 0
}
]
}
]
scales: [
{
name: xscale
type: time
range: width
domain: {
data: table
field: varTime
}
}
{
name: yscale
type: linear
range: height
domain: {
data: table
field: _source.numericValue
}
}
]
axes: [
{
orient: bottom
scale: xscale
format: %H:%M
}
{
orient: left
scale: yscale
}
]
marks: [
{
type: area
from: {
data: table
}
encode: {
enter: {
x: {
scale: xscale
field: varTime
}
y: {
scale: yscale
field: _source.numericValue
}
y2: {
scale: yscale
value: 0
}
fill: {
value: steelblue
}
}
update: {
fillOpacity: {
value: 1
}
}
hover: {
fillOpacity: {
value: 0.5
}
}
}
}
]
}
"sort": [ { "#timestamp": { "order": "desc" } } ]
...
in the body did the trick. The why still eludes me.

C3.js create a chart by getting the data from external API

I am trying to create a chart in c3.js and my data is coming from an external API. I want to get the data and the keys from the json data so that I can plot the values on the chart. I have added the external api format and the js code below.
JSON DATA:
[{
"label" : "A Label" ,
"value" : -29.765957771107
} ,
{
"label" : "B Label" ,
"value" : 0
} ,
{
"label" : "C Label" ,
"value" : 32.807804682612
} ,
{
"label" : "D Label" ,
"value" : 196.45946739256
}]
JS Code:
d3.json("http://localhost:8080/api/study", function(data) {
var chart = c3.generate({
bindto : '#chartContainer',
data : {
columns : ['label']
},
keys: {
x: 'label',
value: ['value']
}
});
});
Thank You
Pre-process the API data into the format that C3 requires. It should be straightforward:
var convertedData = [];
apiData.forEach(function(item){
convertedData.push([item.label, item.value]);
});
Here's an example: http://jsfiddle.net/jrdsxvys/2/
EDIT:
If you're wanting to use the JSON data option with the value array, then it would be something like this, where you set the json property, and the keys object:
var chart = c3.generate({
data: {
json: data,
keys: {
x: 'label',
value: ["value"]
},
type: 'bar'
},
axis: {
x: {
type: 'category'
}
},
legend: {
show:false
}
});
Fiddle: http://jsfiddle.net/jrdsxvys/4/

Area Renderer (Rickshaw)

I am very new in rickshaw graphics, I have this graph
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});
But the data value of the charts appear one above the other, for example if
the three "y" values are 1, the first one appears in 1, the second in 2 and the third one in 3.
Im not sure what parameters I have to change in order that the three values appears in 1.
The problem was that i had to define the unstack value to true
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
unstack : true,
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});

d3.js csv to nvd3 (stacked area chart) format

I'm trying to convert my csv to the format needed by nvd3's stacked area chart: http://nvd3.org/ghpages/stackedArea.html
but got lost in the arrays conversion. Can someone help?
csv:
length,m1,m2,m3,m4
9,1,2,3,4
99,11,22,33,44
999,111,222,333,444
format needed by nvd3
var histcatexplong = [
{
"key" : "Consumer Discretionary" ,
"values" : [ [ 0000000000000 , 27.38478809681] , [ 0000000000000 , 27.371377218208] , [ 0000000000000 , 26.823411519395] } ,
{
"key" : "Consumer Staples" ,
"values" : [ [ 0000000000000 , 27.45458809681] , [ 0000000000000 , 27.444444444408] , [ 0000000000000 , 26.455555555395] } ,
so if the conversion is right, I should get:
var myall = [
{
"key" : "m3" ,
"values" : [ [ 9 , 3] , [ 99, 33] , [ 999, 333] } ,
{
"key" : "m1" ,
"values" : [ [ 9 , 1] , [ 99, 11] , [ 999, 111] } ,
My code for the conversion:
d3.csv("s1.csv", function (csv) {
var myall = [
{
"key" : "m3",
"values" : []
},
{
"key" : "m2",
"values" : []
}
];
v3 = csv.map(function(d) { return [ +d["length"], +d["m3"] ]; });
v2 = csv.map(function(d) { return [ +d["length"], +d["m2"] ]; });
d3.keys(csv).forEach(function(d) {
myall[0].values.push(v3);
myall[1].values.push(v2);
});
console.log(myall);
The problem is that myall didn't show up in the DOM (console output seems to be missing a top hierarchy:
[Object { key="m345", values=[249]}, Object { key="m2", values=[249]}]
For the nvd3 stacked area chart example, DOM copy/paste for the histcatexplong var:
*histcatexplong
[Object { key="Consumer Discretionary", values=[77]}, Object { key="Consumer Staples", values=[77]}, Object { key="Energy", values=[77]}, 7 more...]*
Thanks.
After some debugging, I fixed the issue. As a help to fellow learners, I post the code.
This is useful for people that need:
a. nvd3 stacked area chart(gives you the tooltips and other utilities for free i.e. no extra programming)
b. x-axis with values instead of dates
c. has csv data (flat hierarchy) in this format:
length,m1,m2
103.10,111,2222
137.91,0.36980639547531,99.6301936045247
113.30,0.176522506619594,99.8234774933804
159.59,0.244376214048499,99.7556237859515
code (modified from http://nvd3.org/ghpages/stackedArea.html):
<script>
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1, #chart2 {
height: 500px;
}
</style>
<body>
<div>
<svg id="chart1"></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script>
var myall = [
{
"key" : "m1",
"values" : []
},
{
"key" : "m2",
"values" : []
}
];
d3.csv("s1.csv", function (error, csv) {
if (error) return console.log("there was an error loading the csv: " + error);
console.log("there are " + csv.length + " elements in my csv set");
csv.sort(function(a,b) {return a.length-b.length;});
var mmm = ["m1","m2"];
for (var i = 0; i < mmm.length; i++) {
myall[i].values = csv.map(function(d) { return [ +d["length"], +d[mmm[i]] ]; });
};
var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)
.clipEdge(true);
// chart.xAxis
// .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1')
.datum(myall)
.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;
});
// end read csv
});

Double axis chart in jqplot

Is it possible to have double axis chart using jqplot
Can anyone please share the example for the same
It is possible.
Code example :
$(document).ready(function(){
$.jqplot('chart1', [
[54551.94,15192.79,37937.26,11417.67,11799.59,18377.53,49207.82,168235.42,16654.29,62145.78],
[132.19,2.99,6.09,50.38,1.44,4.41,25.25,3.37,68.60,2.14]
], {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
highlightMouseOver : true,
barWidth : 10
}
},
legend : {
show : true,
placement : 'outsideGrid'
},
axes : {
xaxis : {
renderer : $.jqplot.CategoryAxisRenderer,
tickOptions : {
angle : 45
},
ticks : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
},
yaxis : {
label : 'axis1',
renderer : $.jqplot.LogAxisRenderer
},
y2axis : {
label : 'axis2'
}
},
series : [{
yaxis : 'yaxis',
label : 'dataForAxis1'
}, {
yaxis : 'y2axis',
label : 'dataForAxis2'
}]
});
});
JSFiddle example :
EXAMPLE
Documentation :
See here for the reference.
Look the third example from the top.
Yes it is possible. A starting example can be :
var yaxis_data = [1,2,3,4];
var y2axis_data = [2,4,6];
var myjqplot = $.jqplot('chart1', [yaxis_data, y2axis_data], {
series: [
{ yaxis: "yaxis" },
{ yaxis: "y2axis" }
]
});
Edit : See here for further explanations about Series

Resources