how to show all bubbles with same x,y and z values in fusionchart bubble chart - fusioncharts

In bubble chart of fusionchart have no option to show all bubbles under one perticular bubble displaying on chart that have same score and size. But i need to show all bubbles that have same score and size.The other bubbles are hiding under the first bubble.
http://jsfiddle.net/58sYu/1276
FusionCharts.ready(function () {
var conversionChart = new FusionCharts({
type: 'bubble',
renderAt: 'chart-container',
width: '600',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales Analysis of Shoe Brands",
"subcaption": "Last Quarter",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
"showValues":"1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%",
"drawQuadrant" : "1",
"quadrantLineAlpha" : "80",
"quadrantLineThickness" : "3",
"quadrantXVal" : "50",
"quadrantYVal": "15000",
//Quadrant Labels
"quadrantLabelTL": "Low Price / High Sale",
"quadrantLabelTR": "High Price / High Sale",
"quadrantLabelBL": "Low Price / Low Sale",
"quadrantLabelBR": "High Price / Low Sale",
//Cosmetics
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"captionFontSize" : "14",
"subcaptionFontSize" : "14",
"subcaptionFontBold" : "0",
"showBorder" : "0",
"bgColor" : "#ffffff",
"showShadow" : "0",
"canvasBgColor" : "#ffffff",
"canvasBorderAlpha" : "0",
"divlineAlpha" : "100",
"divlineColor" : "#999999",
"divlineThickness" : "1",
"divLineIsDashed" : "1",
"divLineDashLen" : "1",
"divLineGapLen" : "1",
"use3dlighting" : "0",
"showplotborder" : "0",
"showYAxisLine" : "1",
"yAxisLineThickness" : "1",
"yAxisLineColor" : "#999999",
"showXAxisLine" : "1",
"xAxisLineThickness" : "1",
"xAxisLineColor" : "#999999",
"showAlternateHGridColor" : "0",
"showAlternateVGridColor" : "0"
},
"categories": [
{
"category": [
{
"label": "$0",
"x": "0"
},
{
"label": "$20",
"x": "20",
"showverticalline": "1"
},
{
"label": "$40",
"x": "40",
"showverticalline": "1"
},
{
"label": "$60",
"x": "60",
"showverticalline": "1"
},
{
"label": "$80",
"x": "80",
"showverticalline": "1"
}, {
"label": "$100",
"x": "100",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"color":"#00aee4",
"data": [
{
"x": "80",
"y": "15000",
"z": "24",
"name": "Nike"
},
{
"x": "80",
"y": "15000",
"z": "24",
"name": "Adidas"
},
{
"x": "80",
"y": "15000",
"z": "24",
"name": "Puma"
},
{
"x": "65",
"y": "10500",
"z": "8",
"name": "Fila"
},
{
"x": "43",
"y": "8750",
"z": "5",
"name": "Lotto"
},
{
"x": "32",
"y": "22000",
"z": "10",
"name": "Reebok"
},
{
"x": "44",
"y": "13000",
"z": "9",
"name": "Woodland"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},
{
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}
],
"vTrendlines": [
{
"line": [
{
"startValue": "44",
"isTrendZone": "0",
"color": "#0066cc",
"thickness" : "1",
"dashed" : "1",
"displayValue": "Gross Avg."
}
]
}
]
}
});
conversionChart.render();
});
This the test data edited in fiddle..under first three datas have same size and values so you can see how bubbles are displaying..
Please help

Related

Paging not working with spring boot and mongodb

I saw several articles here on stackoverflow but I couldn't get my pagination working with mongodb and spring boot. The code always returns only one result when I change the value of the limit or skip variable the result is always nothing.
My Repository:
public interface CategoryProductRepository extends MongoRepository<CategoryProduct, String> {
#Aggregation(pipeline = {
"{ '$match': { 'categories.category_id' : ?0 } }",
"{ '$skip' : ?1 }",
"{ '$limit' : ?2 }"
})
List<CategoryProduct> findCategoriesCategoryId(
Long field0,
Long skip,
Long limit
);
}
My structure:
[
{
"product_id": 4,
"id_colletion": 4,
"product_tite": "Testar",
"product_quant": 50,
"product_slug": "slug6",
"product_active": "ativo",
"product_description": "description",
"product_price_un": 50,
"product_price_kg": 10.25,
"star": 0,
"photos": [
{
"photo": "url",
"type": "mini",
"title": "título",
"active": "ativo"
},
{
"photo": "url 2",
"type": "mini",
"title": "título 2",
"active": "ativo"
}
],
"categories": [
{
"category_id": 1,
"name": "categoria 1",
"active": "ativo"
},
{
"category_id": 2,
"name": "categoria 2",
"active": "ativo"
}
]
},
{
"product_id": 5,
"id_colletion": 5,
"product_tite": "new",
"product_quant": 50,
"product_slug": "slugnew",
"product_active": "ativo",
"product_description": "descriptionnew",
"product_price_un": 50,
"product_price_kg": 10.25,
"star": 0,
"photos": [
{
"photo_id": 13,
"photo": "photo 11",
"type": "mini",
"title": "photo 11",
"active": "ativo"
}
],
"categories": [
{
"category_id": 1,
"name": "categoria 1",
"active": "ativo"
}
]
},
{
"product_id": 9,
"id_colletion": 9,
"product_tite": "2",
"product_quant": 2,
"product_slug": "slugnew2",
"product_active": "ativo",
"product_description": "2",
"product_price_un": 2,
"product_price_kg": 2,
"star": 0,
"photos": [
{
"photo": "photo 2",
"type": "mini",
"title": "photo 2",
"active": "desativo"
}
],
"categories": [
{
"category_id": 2,
"name": "categoria 2",
"active": "ativo"
}
]
}
]
Does anyone have any idea where my mistake is?
[SOLVED]
I was inserting the limit and skip wrong but the code works fine

How to query api with filter options

I am trying filter the response city wise. I am not able to understand how to query filter parameters.
I have tried different ways but with no success. This is the response without applying filter. But I want filter it for a particular city.
{
"index_name": "3b01bcb8-0b14-4abf-b6f2-c1bfd384ba69",
"title": "Real time Air Quality Index from various location",
"desc": "Real time Air Quality Index from various location",
"org_type": "Central",
"org": [
"Ministry of Environment and Forests",
"Central Pollution Control Board"
],
"sector": [
"Industrial Air Pollution"
],
"source": "data.gov.in",
"catalog_uuid": "a3e7afc6-b799-4ede-b143-8e074b27e0621",
"visualizable": "1",
"active": "1",
"created": 1543320551,
"updated": 1559683085,
"created_date": "2018-11-27T17:39:11Z",
"updated_date": "2019-06-05T02:48:05Z",
"target_bucket": {
"index": "air_quality",
"type": "a3e7afc6-b799-4ede-b143-8e074b27e0621",
"field": "3b01bcb8-0b14-4abf-b6f2-c1bfd384ba69"
},
"field": [
{
"id": "id",
"name": "id",
"type": "double"
},
{
"id": "country",
"name": "country",
"type": "keyword"
},
{
"id": "state",
"name": "state",
"type": "keyword"
},
{
"id": "city",
"name": "city",
"type": "keyword"
},
{
"id": "station",
"name": "station",
"type": "keyword"
},
{
"id": "last_update",
"name": "last_update",
"type": "date"
},
{
"id": "pollutant_id",
"name": "pollutant_id",
"type": "keyword"
},
{
"id": "pollutant_min",
"name": "pollutant_min",
"type": "double"
},
{
"id": "pollutant_max",
"name": "pollutant_max",
"type": "double"
},
{
"id": "pollutant_avg",
"name": "pollutant_avg",
"type": "double"
},
{
"id": "pollutant_unit",
"name": "pollutant_unit",
"type": "keyword"
}
],
"status": "ok",
"message": "Resource detail",
"total": 1000,
"count": 10,
"limit": "10",
"offset": "8",
"records": [
{
"id": "13",
"country": "India",
"state": "Andhra_Pradesh",
"city": "Rajamahendravaram",
"station": "Anand Kala Kshetram, Rajamahendravaram - APPCB",
"last_update": "05-06-2019 02:00:00",
"pollutant_id": "CO",
"pollutant_min": "2",
"pollutant_max": "50",
"pollutant_avg": "28",
"pollutant_unit": "NA"
},
{
"id": "14",
"country": "India",
"state": "Andhra_Pradesh",
"city": "Rajamahendravaram",
"station": "Anand Kala Kshetram, Rajamahendravaram - APPCB",
"last_update": "05-06-2019 02:00:00",
"pollutant_id": "OZONE",
"pollutant_min": "37",
"pollutant_max": "132",
"pollutant_avg": "71",
"pollutant_unit": "NA"
}
{
"id": "16",
"country": "India",
"state": "Andhra_Pradesh",
"city": "Tirupati",
"station": "Tirumala, Tirupati - APPCB",
"last_update": "05-06-2019 02:00:00",
"pollutant_id": "PM10",
"pollutant_min": "33",
"pollutant_max": "72",
"pollutant_avg": "55",
"pollutant_unit": "NA"
}
],
"version": "2.1.0"
}
This is only documentation on how to do filtering.
properties: OrderedMap { "id": OrderedMap { "type": "integer" }, "date": OrderedMap { "type": "integer" } }
How to form request url for filtering the response?
yes the documentation is very poor, but still out of many trials I got it work like
this
https://api.data.gov.in/resource/3b01bcb8-0b14-4abf-b6f2-c1bfd384ba69?api-key=<your key>&format=json&offset=0&limit=10
&filters[pollutant_id]=NO2

How to make bars rounded without the glass effect on Fusion Chart?

The purpose is to apply border-radius effect to the chart bars.
What I have found is only this round edges example.
https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-plot#round-edges-7
However, it comes with a glass-effect when applied.
How to have it with the glass-effect and keep the rounded effect only?
FusionCharts does not support rounded edge on column charts, however, you can use arc annotations shape and create the edge rounded, but please note annotations are static in nature, here is sample chart given below :
FusionCharts.ready(function() {
var salesChart = new FusionCharts({
type: 'MSColumn2D',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales report of Apple products",
"subcaption": "In Billion $",
"yaxismaxvalue": "250",
"decimals": "0",
"numberprefix": "$",
"numbersuffix": "B",
"placevaluesinside": "1",
"paletteColors": "#FF0000,#00FF00,#FFFF00",
"divlinealpha": "56",
"plotfillalpha": "100",
"plotSpacePercent": "47",
"crossLineColor": "#cc3300",
"crossLineAlpha": "100",
"theme": "zune"
},
"annotations": {
"showbelow": "1",
"groups": [{
"id": "transarc",
"items": [{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.0.x",
"y": "$dataset.0.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.1.x",
"y": "$dataset.0.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FF0000",
"alpha": "100",
"x": "$dataset.0.set.2.x",
"y": "$dataset.0.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
},
{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.0.x",
"y": "$dataset.1.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.1.x",
"y": "$dataset.1.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#00FF00",
"alpha": "100",
"x": "$dataset.1.set.2.x",
"y": "$dataset.1.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
},
{
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.0.x",
"y": "$dataset.2.set.0.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.1.x",
"y": "$dataset.2.set.1.STARTY+2",
"startangle": "0",
"endangle": "180"
}, {
"type": "arc",
"radius": "16",
"borderColor": "#FFFFFF",
"innerRadius": "0",
"color": "#FFFF00",
"alpha": "100",
"x": "$dataset.2.set.2.x",
"y": "$dataset.2.set.2.STARTY+2",
"startangle": "0",
"endangle": "180"
}
]
}]
},
"categories": [{
"category": [{
"label": "2012"
},
{
"label": "2013"
},
{
"label": "2014"
}
]
}],
"dataset": [{
"seriesname": "iPod",
"data": [{
"value": "42.63"
},
{
"value": "35.16"
},
{
"value": "26.38"
}
]
},
{
"seriesname": "iPhone",
"data": [{
"value": "125.04"
},
{
"value": "150.26"
},
{
"value": "169.22"
}
]
},
{
"seriesname": "iPad",
"data": [{
"value": "58.31"
},
{
"value": "71.04"
},
{
"value": "67.99"
}
]
}
]
}
})
.render();
});

VEGA CHART individual bar color

i whant to make every bar in chart - in different collor. please help.
so default chart like described in docs:
https://vega.github.io/vega/examples/bar-chart/
for example - i whant to make like: blue, red, yellow, green, blue, blue.
please help! thanks!
Using the Vega bar chart example you linked to:
First, create a scale to define the colors:
{
"name": "colors",
"type": "ordinal",
"domain": {"data": "table", "field": "category"},
"range": {"scheme": "category10"}
}
The value for the "scheme" can be a built-in scheme from Vega, or a custom scheme.
Then, you need to specify the color for the fill on the mark's update property set, specifying the name of the scheme:
"update": {
"fill": {"scale": "colors", "field": "category"}
},
You can define a categorical color scale and use it to change the color of the bar mark. Check out some of the other examples that use categorical color scales.
I had the same problem and with a little help from https://vega.github.io/vega-lite/examples/bar_color_disabled_scale.html I got to the following - the idea is to encode the color in the data:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28, "c": "black"},
{"a": "B", "b": 55, "c": "black"},
{"a": "C", "b": 43, "c": "black"},
{"a": "D", "b": 91, "c": "red"}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"},
"color": {"field": "c", "type": "nominal", "scale": null}
}
}
alternatively this also works and keeps the legend if you need it:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43},
{"a": "D", "b": 91}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal", "sort": ["C", "A", "B", "D"]},
"y": {"field": "b", "type": "quantitative"},
"color": {"field": "a", "type": "nominal", "sort": ["C", "A", "B", "D"], "scale": {"range": ["red", "black", "black", "black", "black"]}}
}
}
For bar charts
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A bar chart that directly encodes color names in the data.",
"data": {
"values": [
{
"color": "yellow",
"b": 28
},
{
"color": "green",
"b": 55
},
{
"color": "blue",
"b": 43
}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "color",
"type": "nominal"
},
"y": {
"field": "b",
"type": "quantitative"
},
"color": {
"field": "color",
"type": "nominal",
"scale": null
}
}
}
For Pie charts
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 200,
"height": 200,
"autosize": "none",
"signals": [
{
"name": "startAngle", "value": 0,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "endAngle", "value": 6.29,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "padAngle", "value": 0,
"bind": {"input": "range", "min": 0, "max": 0.1}
},
{
"name": "innerRadius", "value": 0,
"bind": {"input": "range", "min": 0, "max": 90, "step": 1}
},
{
"name": "cornerRadius", "value": 0,
"bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
},
{
"name": "sort", "value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "table",
"values": [
{"field": 10,"color": "blue"},
{"field": 3,"color": "green"},
{"field": 7,"color": "red"},
{"field": 8,"color":"orange"},
{"field": 15,"color":"yellow"}
],
"transform": [
{
"type": "pie",
"field": "field",
"startAngle": {"signal": "startAngle"},
"endAngle": {"signal": "endAngle"},
"sort": {"signal": "sort"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "color"},
"range": {"scheme": "category20"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "table"},
"encode": {
"enter": {
"fill": { "field": "color",
"type": "nominal",
"scale": null},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "padAngle"},
"innerRadius": {"signal": "innerRadius"},
"outerRadius": {"signal": "width / 2"},
"cornerRadius": {"signal": "cornerRadius"}
}
}
}
]
}

kendo chart series legend in top on two lines

I have an implementation of a chart where the legend must be in top for screen size reasons. My customer complains that it is hard to see the (in this case) two series titles.
Currently it shows like this:
[] series title 1 [] series title 2
I want:
[] series title 1
[] series title 2
setting legend.position = "right" shows them like I want, but on the side, so it must be set to "top"
Any way to achieve this?
Look here http://plnkr.co/edit/BVPb4AivJuks5VGr6FGz?p=preview
Chart is configured like this:
{
"chartArea": {
"font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif",
"width": 1000,
"height": 333.3333333333333,
"background": "",
"border": {
"color": ""
}
},
"title": {
"text": "",
"font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
},
"legend": {
"position": "top"
},
"seriesDefaults": {
"markers": {
"visible": false
}
},
"series": [
{
"type": "column",
"name": "03-02-2016",
"data": [
0.110845970287301,
0.0914614304545012,
0.0828538550058511,
0.0828538550056237,
0.0897167892449033,
0.178615728107161,
0.178615728107161,
0.178615728107161,
0.178615728107161,
0.0727362937236649,
0,
0
],
"color": "#8f9b49"
},
{
"type": "line",
"name": "02-02-2016 (perioden før!)",
"data": [
0.110709412367669,
0.0911219388724476,
0.0911219388722202,
0.0911219388724476,
0.0911219388722202,
0.0235651458583561,
0.140159626241029,
0.140159626241029,
0.140159626241029,
0.075608331711237,
0.899526564965754,
0.899526564965754,
0.899526564965754,
0.687138348237795,
0.431259248819742,
0.431259248819742,
0.431259248819515,
0.400167587908072,
0.325565217391159,
0.325565217391386,
0.325565217391159,
0.260910866318909,
0.110845970287073,
0.110845970287073
],
"color": "#bdc779",
"border": {
"width": 1,
"color": "#dddddd"
}
}
],
"valueAxis": {
"plotBands": [],
"title": {
"text": "kWh",
"background": "none",
"font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
},
"labels": {
"format": "{0}",
"font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
},
"line": {
"visible": false
},
"axisCrossingValue": 0
},
"categoryAxis": {
"majorGridLines": {
"width": 0
},
"title": {
"text": "Time",
"background": "none",
"font": "14px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
},
"categories": [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23"
],
"line": {
"visible": false
},
"labels": {
"padding": {
"top": 4
},
"font": "12px/1.714 \"roboto\", \"Arial\", \"Helvetica\", sans-serif"
}
},
"tooltip": {
"visible": true,
"format": "{0}m2",
"template": "#= series.name # #= category #: #= value #"
}
}
Set the legend orientation to vertical and then set the height as needed:
legend: {
position: "top",
orientation: "vertical",
height: 50
},