The xaxis on our Distinct Bar Chart is user names. The problem I have is that there can be multiple users with the same name.
I want the x-axis to be distinct by the user's id but would like the label to be the user's name (Yeah, I understand that the name is ambiguous, but that is OK for our purposes)
Given the following data how would I get the x-axis to be distinct by id but display the label value
[{
"key" : "tester",
"values" : [{
"value" : 5.0,
"label" : "John Smith",
"color" : "#9BA474",
"id" : 1388
}, {
"value" : 10.25,
"label" : "Jane D'oh",
"color" : "#356AA0",
"id" : 11
}, {
"value" : 3.5,
"label" : "John Smith",
"color" : "red",
"id" : 12
}]
}]
I may have the answer to my own question. If there are other ways of doing this I'd like to hear them.
var chart = nv.models.discreteBarChart()
.x(function(d, i) { return i })
.y(function(d) { return d.value });
chart.xAxis
.tickFormat(function(d) {return data[0].values[d].label; });
Related
I am using ElasticSearch to index data and wanted to export few fields from index created every day to Google cloud storage, How to get fields from array of objects in elastic search index and send them as csv file to GCS bucket using Logstash
Tried below conf to fetch nested fields from index:
input {
elasticsearch {
hosts => "host:443"
user => "user"
ssl => true
connect_timeout_seconds => 600
request_timeout_seconds => 600
password => "pwd"
ca_file => "ca.crt"
index => "test"
query => '
{
"_source": ["obj1.Name","obj1.addr","obj1.obj2.location", "Hierarchy.categoryUrl"],
"query": {
"match_all": {}
}
}
'
}
}
filter {
mutate {
rename => {
"[obj1][Name]" => "col1"
"[obj1][addr]" => "col2"
"[obj1][obj2][location]" => "col3"
"[Hierarchy][0][categoryUrl]" => "col4"
}
}
}
output {
google_cloud_storage {
codec => csv {
include_headers => true
columns => [ "col1", "col2","col3"]
}
bucket => "bucket"
json_key_file => "creds.json"
temp_directory => "/tmp"
log_file_prefix => "log_gcs"
max_file_size_kbytes => 1024
date_pattern => "%Y-%m-%dT%H:00"
flush_interval_secs => 600
gzip => false
uploader_interval_secs => 600
include_uuid => true
include_hostname => true
}
}
How to get field populated to above csv from array of objects, in below example wanted to fetch categoryUrl from the first object of an array and populate to csv table and send it to GCS Bucket:
have tried below approaches :
"_source": ["obj1.Name","obj1.addr","obj1.obj2.location", "Hierarchy.categoryUrl"]
and
"_source": ["obj1.Name","obj1.addr","obj1.obj2.location", "Hierarchy[0].categoryUrl"]
with
mutate {
rename => {
"[obj1][Name]" => "col1"
"[obj1][addr]" => "col2"
"[obj1][obj2][location]" => "col3"
"[Hierarchy][0][categoryUrl]" => "col4"
}
for input sample :
"Hierarchy" : [
{
"level" : "1",
"category" : "test",
"categoryUrl" : "testurl1"
},
{
"level" : "2",
"category" : "test2",
"categoryUrl" : "testurl2"
}}
Attaching sample document where I am trying to fetch merchandisingHierarchy[0].categoryUrl and pricingInfo[0].basePrice :
{
"_index" : "amulya-test",
"_type" : "_doc",
"_id" : "ldZPJoYBFi8LOEDK_M2f",
"_score" : 1.0,
"_ignored" : [
"itemDetails.description.keyword"
],
"_source" : {
"itemDetails" : {
"compSku" : "202726",
"compName" : "abc.com",
"compWebsite" : "abc.com",
"title" : "Monteray 38.25 in. x 73.375 in. Frameless Hinged Corner Shower Enclosure in Brushed Nickel",
"description" : "Create the modthroom of your dreams with the clean lines of the VIGO Monteray Frameless Shower Enclosure. Solid 3/8 in. tempered glass combined with stainless steel and solid brass construction makes this enclosure strong and long-lasting. The sleek, reversible, outward-opening door features a convenient towel bar. This versatile enclosure can be installed on a tile floor or with a VIGO Shower Base. With a single water deflector along the bottom seal strip, water is redirected back into the shower to keep your bathroom dry, clean, and pristine.",
"modelNumber" : "VG6011BNCL40",
"upc" : "8137756684",
"hasVariations" : false,
"productDetailsBulletPoints" : [ ],
"itemUrls" : {
"productPageUrl" : "https://.abc.com/p/VIGO-Monteray-38-in-x-73-375-in-Frameless-Hinged-Corner-Shower-Enclosure-in-Brushed-Nickel-VG6011BNCL40/202722616",
"primaryImageUrl" : "https://images.thdstatic.com/productImages/d77d9e8b-1ea1-4811-a470-8364c8e47402/svn/vigo-shower-enclosures-vg6011bncl40-64_600.jpg",
"secondaryImageUrls" : [
"https://images.thdstatic.com/productImages/d77d9e8b-1e1-4811-a470-8364c8e47402/svn/vigo-shower-enclosures-vg6011bncl40-64_1000.jpg",
"https://images.thdstatic.com/productImages/db539ff9-6df-48c2-897a-18dd1e1794e3/svn/vigo-shower-enclosures-vg6011bncl40-e1_1000.jpg",
"https://images.thdstatic.com/productImages/47c5090b-49a-46bc-a36d-921ddae5e1ab/svn/vigo-shower-enclosures-vg6011bncl40-40_1000.jpg",
"https://images.thdstatic.com/productImages/add6691c-a02-466d-9a1a-47200b05685e/svn/vigo-shower-enclosures-vg6011bncl40-a0_1000.jpg",
"https://images.thdstatic.com/productImages/d638230e-0d9-40c9-be93-7f7bf24f0732/svn/vigo-shower-enclosures-vg6011bncl40-1d_1000.jpg"
]
}
},
"merchandisingHierarchy" : [
{
"level" : "1",
"category" : "Home",
"categoryUrl" : "host/"
},
{
"level" : "2",
"category" : "Bath",
"categoryUrl" : "host/b/Bath/N-5yc1vZbzb3"
},
{
"level" : "3",
"category" : "Showers",
"categoryUrl" : "host/b/Bath-Showers/N-5yc1vZbzcd"
},
{
"level" : "4",
"category" : "Shower Doors",
"categoryUrl" : "host/b/Bath-Showers-Shower-Doors/N-5yc1vZbzcg"
},
{
"level" : "5",
"category" : "Shower Enclosures",
"categoryUrl" : "host/b/Bath-Showers-Shower-Doors-Shower-Enclosures/N-5yc1vZcbn2"
}
],
"reviewsAndRatings" : {
"pdtReviewCount" : 105
},
"additionalAttributes" : {
"isAddon" : false
},
"productSpecifications" : {
"Warranties" : { },
"Details" : { },
"Dimensions" : { }
},
"promoDetails" : [
{
"promoName" : "Save $150.00 (15%)",
"promoPrice" : 849.9
}
],
"locationDetails" : { },
"storePickupDetails" : {
"deliveryText" : "Get it by Mon, Feb 20",
"toEddDate" : "Mon, Feb 20",
"isBackordered" : false,
"selectedEddZipcode" : "20147",
"shipToStoreEnabled" : true,
"homeDeliveryEnabled" : true,
"scheduledDeliveryEnabled" : false
},
"recommendedProducts" : [ ],
"pricingInfo" : [
{
"type" : "SAS",
"offerPrice" : 849.9,
"sellerName" : "abc.com",
"onClearance" : false,
"inStock" : true,
"isBuyBoxWinner" : true,
"promo" : [
{
"onPromo" : true,
"promoName" : "Save $150.00 (15%)",
"promoPrice" : 849.9
}
],
"basePrice" : 999.9,
"priceVariants" : [
{
"basePrice" : 999.9,
"offerPrice" : 849.9
}
],
"inventoryDetails" : {
"stockInStore" : false,
"stockOnline" : true
}
}
]
}
}
You can do it like this:
input {
elasticsearch {
...
query => '
{
"_source": ["merchandisingHierarchy.categoryUrl"],
"query": {
"match_all": {}
}
}
'
}
}
filter {
mutate {
add_field => {
"col1" => "%{[merchandisingHierarchy][0][categoryUrl]}"
"col2" => "%{[pricingInfo][0][basePrice]}"
}
}
}
output {
stdout {
codec => csv {
include_headers => true
columns => [ "col1"]
}
}
}
I've tested with your sample document and I get the output below, which looks like is working per your expectation:
col1,col2
host/,999.9
PRODUCT 1
"attributes_list" : {
"src1" : [
{
"aname" : "Manufacturer Standard Lead Time",
"avalue" : "16 Weeks"
},
{
"aname" : "Color",
"avalue" : "red"
},
{
"aname" : "Detailed Description",
"avalue" : "Pre-Biased Bipolar
},
{
"aname" : "DC Current Gain (hFE) (Min) # Ic, Vce",
"avalue" : "100 # 10mA, 5V"
},
{
"aname" : "Transistor Type",
"avalue" : "2 NPN - Pre-Biased (Dual)"
},
{
"aname" : "Mounting Type",
"avalue" : "Surface Mount"
}
]
}
PRODUCT 2-------------
"attributes_list" : {
"src1" : [
{
"aname" : "Lead Time",
"avalue" : "16 Weeks"
},
{
"aname" : "Color",
"avalue" : "green"
},
{
"aname" : "Description",
"avalue" : "Pre-Biased Bipolar
},
{
"aname" : "DC Current Gain (hFE) ",
"avalue" : "100 # 10mA, 5V"
},
{
"aname" : "Transistor",
"avalue" : "2 NPN - Pre-Biased (Dual)"
},
{
"aname" : "Type",
"avalue" : "Surface Mount"
}
]
}
The question is
How can i get all the colors (avalues) by key.
like:
aggs
Colors
Red
doc_count 10
Green
doc_count 5
Simple is
We need to get all the colors by key.
We have tried different aggs queries on avalue but all are getting all the avalues. We need just to get all the avalue:colors [red,green etc ] by aname:color.
I've been trying to get the x axis to display a text axis label. The example is here https://jsfiddle.net/z4aZ4/859/
I'd like "Question 1" displayed on the x axis. At the moment "Nan" is displayed.
var data =
[
{
"key": "Yes",
"color": "#d67777",
"values": [
{
"x" : "Question 1" ,
"y" : 70
} ,
{
"x" : "Question 2" ,
"y" : 65
}
]
},
{
"key": "No",
"color": "#4f99b4",
"values": [
{
"x" : "Question 1" ,
"y" : 30
} ,
{
"x" : "Question 2" ,
"y" : 35
}
]
}
]
You'll have to change the tick format to load your labels.
On the addGraph function:
Replace
.tickFormat(d3.format(',f'));
With
.tickFormat(function(d) { return d; });
Also so that a label will show up for each column you'll have to set reduceXTicks False:
var chart = nv.models.multiBarChart()
.reduceXTicks(false);
I'm trying to create a D3 cross tabulation HTML table (there will be more interactive features, this is just the first step) based on JSON data. I can populate the horizontal table header, but am having trouble with the vertical headers and data fields.
The table should look something like the following:
My code so far (JSFiddle here) is:
var nested = d3.nest()
.key(function(d) { return d._id.env; })
.entries(data.result);
console.log(nested);
var table = d3.select("#table")
.append("table")
.style("border-collapse", "collapse")
.style("border", "2px black solid");
var thead = table.append("thead");
thead.append("tr")
.selectAll("th")
.data(nested)
.enter().append("th")
.text(function(d) { return d.key; });
var tbody = table.append("tbody");
var tr = tbody.selectAll("tr")
.data(nested.values) // not sure how to get this
.enter().append("tr");
tr.selectAll("td")
.data(function(d) { console.log(d); return d; })
.enter().append("td")
.text(function(d, i) { console.log(d[i]); return d; });
The raw data is in the following format:
{
"result" : [
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "A"
},
"ruleScore" : 83.25,
"jsPerPage" : 12,
"cssPerPage" : 4,
"imagesPerPage" : 7.75
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "B"
},
"ruleScore" : 83,
"jsPerPage" : 12,
"cssPerPage" : 4,
"imagesPerPage" : 10
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "C"
},
"ruleScore" : 83,
"jsPerPage" : 12,
"cssPerPage" : 5,
"imagesPerPage" : 10,
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "D"
},
"ruleScore" : 83.08333333333333,
"jsPerPage" : 12,
"cssPerPage" : 6,
"imagesPerPage" : 9.25
}
],
"ok" : 1
}
I'm guessing this is pretty simple, just can't get my head around it - thanks!
I am trying to display a tree diagram with piechart as the nodes with the size of the piechart scaled according to data. I am still stump at the last part:
var arc = d3.svg.arc().outerRadius(20)
fix the radius at 20.
How can I vary it according to the "count" property. A jsfiddle demo is here: http://jsfiddle.net/uB4U2/
The data is contained as:
var treeData = {"name" : "Root", "info" : "1", "count" : 9, "value" : [1,2,3],
"children" : [
{"name" : "A", "info" : "2", "count" : 10, "value" : [2,2,2] },
{"name" : "B", "info" : "3", "count" : 15, "value" : [2,2,2] },
{"name" : "C", "info" : "4", "count" : 2, "value" : [2,2,2] ,
"children": [
{"name" : "C1", "info" : "5", "count" : 7, "value" : [2,3,4] },
{"name" : "C2", "info" : "6", "count" : 8, "value" : [2,3,4] }
]}
]};
Thanks!
Your example shows that you were trying to set the outerRadius based on a function of the data, but gave up and just set it to return a constant value:
var arc = d3.svg.arc().outerRadius(function(d) { console.log(d); return radius; });
The reason this wasn't working is because the data passed in to the arc generator is the data object for each individual slice in the pie. This could be used, for example, to create a graph like this:
Cool, but not what you want. You wanted to size the entire pie based on the total count, right? However, that data isn't available directly to the arc function, which only has information about one slice at a time. So you need to set the radius when the data for the whole pie is available -- when you are still working with the nodes. Because we want to modify the arc generator function for the node and then use it when drawing the slices, we have to group everything for creating the pie into an each() method call:
node.each(function(d){
arc = arc.outerRadius(d.count);
d3.select(this)
.selectAll("path")
.data(function(d){ return pie(d.value); })
.enter().append("svg:path")
.attr("d", arc)
.style("fill", function(d,i){ return color(i) });
})
With that change to your code, you get:
http://jsfiddle.net/uB4U2/3/
P.S. I'm a little confused about your "count" properties, since the count for parents are sometimes smaller than the count for children. If this isn't what you wanted, I hope it has given you enough information to figure out where to go from here. --ABR
Create dynamic radius according to the maximum number of count.Try this code for maximum number
DEMO
D3.js:
var Maxcount = new Array();
$.each(nodes, function (i,value) {
Maxcount.push(value.count);
});
radius =d3.max(Maxcount);