Fusion Charts - Gantt Chart - Chart Type is not supported - fusioncharts

I am trying the trial version of Fusion Charts. I downloaded FusionCharts XT(v3.2.2) SR5 and FusionWidgets XT (v3.2) Service Release 2 trial versions, copied the scripts and flash files into my application, included FusionCharts/jquery.min.js, FusionCharts/FusionCharts.js, FusionCharts/FusionCharts.HC.js, FusionCharts/FusionCharts.HC.Widgets.js in my aspx, I tried the below chart (Column3D) with sample JSON provided and it worked fine. i was able to see the chart.
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
myChart.setJSONData(
{ "chart":
{ "caption": "Weekly Sales Summary", "xAxisName": "Week", "yAxisName": "Sales", "numberPrefix": "$" },
"data":
[{ "label": "Week 1", "value": "14400" },
{ "label": "Week 2", "value": "19600" },
{ "label": "Week 3", "value": "24000" },
{ "label": "Week 4", "value": "15700"}]
});
myChart.render("chartContainer");
But when i want to try gantt chart with sample JSON provided, I get Chart type not supported. Please see the code and complete JSON i tried below.
var myChart = new FusionCharts("Gantt", "myChartId", "800", "700");
myChart.setJSONData(
{ "chart": { "manageresize": "1", "dateformat": "dd/mm/yyyy", "outputdateformat": "ddds mns yy", "ganttwidthpercent": "65", "canvasbordercolor": "999999", "canvasborderthickness": "0", "gridbordercolor": "4567aa", "gridborderalpha": "20", "ganttpaneduration": "3", "ganttpanedurationunit": "m" }, "categories": [{ "bgcolor": "009999", "category": [{ "start": "1/3/2008", "end": "31/8/2008", "label": "Residential Construction", "fontcolor": "ffffff", "fontsize": "16"}] }, { "bgcolor": "4567aa", "fontcolor": "ff0000", "category": [{ "start": "1/3/2008", "end": "31/8/2008", "label": "Months", "alpha": "", "font": "Verdana", "fontcolor": "ffffff", "fontsize": "16"}] }, { "bgcolor": "ffffff", "fontcolor": "1288dd", "fontsize": "10", "isbold": "1", "align": "center", "category": [{ "start": "1/3/2008", "end": "31/3/2008", "label": "March" }, { "start": "1/4/2008", "end": "30/4/2008", "label": "April" }, { "start": "1/5/2008", "end": "31/5/2008", "label": "May" }, { "start": "1/6/2008", "end": "30/6/2008", "label": "June" }, { "start": "1/7/2008", "end": "31/7/2008", "label": "July" }, { "start": "1/8/2008", "end": "31/8/2008", "label": "August"}]}], "processes": { "headertext": "Task", "fontcolor": "000000", "fontsize": "11", "isanimated": "1", "bgcolor": "4567aa", "headervalign": "bottom", "headeralign": "left", "headerbgcolor": "4567aa", "headerfontcolor": "ffffff", "headerfontsize": "16", "align": "left", "isbold": "1", "bgalpha": "25", "process": [{ "label": "Writing", "id": "1" }, { "label": "Signing", "id": "2" }, { "label": "Financing", "id": "3" }, { "label": "Permission", "id": "4" }, { "label": "Plumbing", "id": "5" }, { "label": "Terrace", "id": "6" }, { "label": "Inspection", "id": "7" }, { "label": "Wood Work", "id": "8" }, { "label": "Interiors", "id": "9" }, { "label": "Shifting", "id": "10"}] }, "datatable": { "showprocessname": "1", "namealign": "left", "fontcolor": "000000", "fontsize": "10", "valign": "right", "align": "center", "headervalign": "bottom", "headeralign": "left", "headerbgcolor": "4567aa", "headerfontcolor": "ffffff", "headerfontsize": "16", "datacolumn": [{ "bgcolor": "eeeeee", "headertext": "Start", "text": [{ "label": "7/3/2008" }, { "label": "6/4/2008" }, { "label": "1/5/2008" }, { "label": "13/5/2008" }, { "label": "2/5/2008" }, { "label": "1/6/2008" }, { "label": "15/6/2008" }, { "label": "22/6/2008" }, { "label": "18/6/2008" }, { "label": "15/7/2008"}] }, { "bgcolor": "eeeeee", "headertext": "Finish", "text": [{ "label": "22/4/2008" }, { "label": "12/5/2008" }, { "label": "2/6/2008" }, { "label": "19/6/2008" }, { "label": "19/6/2008" }, { "label": "19/7/2008" }, { "label": "11/8/2008" }, { "label": "5/8/2008" }, { "label": "22/7/2008" }, { "label": "11/8/2008"}] }, { "bgcolor": "eeeeee", "headertext": "Hrs", "text": [{ "label": "150" }, { "label": "340" }, { "label": "60" }, { "label": "20" }, { "label": "30" }, { "label": "45" }, { "label": "40" }, { "label": "102" }, { "label": "60" }, { "label": "30" }, { "label": "90" }, { "label": "30"}] }, { "align": "right", "bgcolor": "4567aa", "bgalpha": "25", "headertext": "Cost", "isbold": "1", "text": [{ "label": "$4100" }, { "label": "$8290" }, { "label": "$12340" }, { "label": "$2330" }, { "label": "$4550" }, { "label": "$15720" }, { "label": "$1780" }, { "label": "$32330" }, { "label": "$9890" }, { "label": "$1110" }, { "label": "$1260" }, { "label": "$4260"}]}] }, "tasks": { "task": [{ "label": "Planned", "processid": "1", "start": "7/3/2008", "end": "18/4/2008", "id": "1-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "1", "start": "9/3/2008", "end": "22/4/2008", "id": "1", "color": "EEEEEE", "alpha": "100", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "8", "start": "22/6/2008", "end": "29/7/2008", "id": "2-1", "color": "4567aa", "alpha": "100", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "8", "start": "22/6/2008", "end": "5/8/2008", "id": "2", "color": "EEEEEE", "alpha": "100", "height": "32%", "toppadding": "56%", "percentcomplete": "78" }, { "label": "Planned", "processid": "2", "start": "6/4/2008", "end": "2/5/2008", "id": "3-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "2", "start": "6/4/2008", "end": "12/5/2008", "id": "3", "color": "EEEEEE", "alpha": "100", "isanimated": "1", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "9", "start": "18/6/2008", "end": "21/7/2008", "id": "4-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "9", "start": "18/6/2008", "end": "22/7\t/2008", "id": "4", "color": "EEEEEE", "alpha": "100", "isanimated": "1", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "3", "start": "1/5/2008", "end": "2/6/2008", "id": "5-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "3", "start": "1/5/2008", "end": "2/6/2008", "id": "5", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "4", "start": "11/5/2008", "end": "12/6/2008", "id": "6-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "4", "start": "13/5/2008", "end": "19/6/2008", "id": "6", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "5", "start": "1/5/2008", "end": "12/6/2008", "id": "7-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "5", "start": "2/5/2008", "end": "19/6/2008", "id": "7", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "6", "start": "1/6/2008", "end": "12/7/2008", "id": "8-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "6", "start": "1/6/2008", "end": "19/7/2008", "id": "8", "color": "EEEEEE", "height": "32%", "toppadding": "56%", "percentcomplete": "91" }, { "label": "Planned", "processid": "7", "start": "11/6/2008", "end": "7/8/2008", "id": "9-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "7", "start": "15/6/2008", "end": "11/8/2008", "id": "9", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "10", "start": "11/7/2008", "end": "7/8/2008", "id": "10-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "10", "start": "15/7/2008", "end": "11/8/2008", "id": "10", "color": "EEEEEE", "height": "32%", "toppadding": "56%"}] }, "connectors": [{ "connector": [{ "fromtaskid": "3", "totaskid": "5", "color": "4567aa", "thickness": "2", "fromtaskconnectstart": "1" }, { "fromtaskid": "8", "totaskid": "2", "color": "4567aa", "thickness": "2", "fromtaskconnectstart": "1"}]}], "milestones": { "milestone": [{ "date": "7/8/2008", "taskid": "10-1", "color": "2E4472", "shape": "star", "tooltext": "Original moving date" }, { "date": "21/8/2008", "taskid": "10", "color": "999999", "shape": "star", "tooltext": "New estimated moving date"}] }, "legend": { "item": { "label": "Slack (Delay)", "color": "FF5E5E"} }, "styles": { "definition": [{ "type": "Font", "name": "legendFont", "size": "12"}], "application": [{ "toobject": "LEGEND", "styles": "legendFont"}]} });
myChart.render("chartContainer");
I dont think there is any problem with the JSON asi took it straight from the sample. But why am i getting Chart type not supported? Is there anything additional we have to do to make fusionwidgets work? Any help would be appreciated.

The latest version of FusionWidgets XT 3.3.1 supports Gantt chart in JavaScript flavor.
Refer for more info at: http://forum.fusioncharts.com/topic/13689-javascript-variant-of-gantt-chart/

Related

Adding a regression line on Vegalite

I'm trying to add a regression line and R-squared value on my scatterplot. I know I'm supposed to use the layer function and
"transform": [
{
"regression": "GDP per capita",
"on": "Educationalattainment",
}
but after trying a million times I can't figure out where to insert the line of codes. This is the code for my chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"text": "GDP per capita and Education Attainment",
"subtitle": "From 2015-2020. Sources: World Bank",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"height": 300,
"width": 300,
"data": {
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
},
"transform": [
{"calculate": "datum.Educationalattainment/100", "as": "percent"},
{"filter": {
"field": "Educationalattainment",
"gt": 0
}}
],
"selection": {
"paintbrush": {
"type": "multi",
"on": "mouseover",
"nearest": true
},
"grid": {
"type": "interval",
"bind": "scales"
}
},
"mark": {
"type": "circle",
"opacity": 0.5,
"color": "#EC9D3E"
},
"encoding": {
"x": {
"field": "GDP per capita",
"type": "quantitative",
"axis": {
"title": "GDP per capita",
"grid": false,
"tickCount": 10,
"labelOverlap": "greedy"
}
},
"y": {
"field": "percent",
"type": "quantitative",
"axis": {
"title": "Educational Attainment",
"grid": false, "format":"%"
}
},
"size": {
"condition": {
"selection": "paintbrush",
"value": 300,
"init": {
"value": 70
}
},
"value": 70
},
"tooltip": [
{
"field": "Year",
"type": "nominal",
"title": "Year"
},
{
"field": "Country",
"type": "ordinal",
"title": "Country"
},
{
"field": "GDP per capita",
"type": "nominal",
"title": "GDP per capita"
},
{
"field": "Educationalattainment",
"type": "nominal",
"title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
}
]
}
}
And this is my reference chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Figure 5: Plotting a regression of Social Mobility Index on Global Entrepreneurship Index, equation acquired via Python",
"data": {
"url": "https://raw.githubusercontent.com/marinabrts/marinabrts.github.io/main/GEIxSMI.csv",
"format": {"type": "csv"}
},
"background": "#E0E0E0",
"config": {"axis": {"grid": true, "gridColor": "#FFFFFF"}},
"title": {
"text": "Figure 5: Regressing SMI on Global Entrepreneurship Index",
"subtitle": "Source: World Economic Forum (2020), Global Entrepreneurship & Development Institute (2019)",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start"
},
"height": 300,
"width": 370,
"layer": [
{
"mark": {"type": "point", "size": 30, "color": "#FF3399"},
"encoding": {
"x": {
"field": "GEI",
"type": "quantitative",
"title": "Global Entrepreneurship Index (GEI)"
},
"y": {
"field": "Index Score",
"type": "quantitative",
"title": "Social Mobility Index (SMI)",
"scale": {"domain": [30, 90]}
},
"tooltip": [
{"field": "Country", "type": "nominal", "title": "Country"},
{"field": "GEI", "type": "quantitative", "title": "GEI"},
{"field": "Index Score", "type": "quantitative", "title": "SMI"}
]
}
},
{
"mark": {"type": "line", "color": "#7F00FF", "size": 3},
"transform": [{"regression": "Index Score", "on": "GEI"}],
"encoding": {
"x": {"field": "GEI", "type": "quantitative"},
"y": {"field": "Index Score", "type": "quantitative"}
}
},
{
"transform": [
{"regression": "Index Score", "on": "GEI", "params": true},
{"calculate": "'R²= '+format(datum.rSquared, '.2f')", "as": "R2"}
],
"mark": {
"type": "text",
"color": "red",
"size": 14,
"x": "width",
"align": "center",
"y": -5
},
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}
I'd be so so grateful for any help. Thank you!
Edit:
Code for R-squared value
{
"transform": [
{
"regression": "GDP per capita",
"on": "percent",
"params": true
},
{"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
],
"mark": {
"type": "text",
"color": "black",
"x": "width",
"align": "right",
"y": -5
},
"encoding": {
"text": {"type": "nominal", "field": "R2"}
}
}
Complete chart code where the value does not appear
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"text": null,
"subtitle": null,
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"height": 100,
"width": 100,
"data": {
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
},
"transform": [
{"calculate": "datum.Educationalattainment/100", "as": "percent"},
{"filter": {"field": "Educationalattainment", "gt": 0}}
],
"layer": [
{
"selection": {
"paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
"grid": {"type": "interval", "bind": "scales"}
},
"mark": {"type": "circle", "opacity": 0.5, "color": "#EC9D3E"},
"encoding": {
"x": {
"field": "GDP per capita",
"type": "quantitative",
"axis": {
"title": "GDP per capita",
"grid": false,
"tickCount": 10,
"labelOverlap": "greedy"
}
},
"y": {
"field": "percent",
"type": "quantitative",
"axis": {
"title": "Educational Attainment",
"grid": false,
"format": "%"
}
},
"size": {
"condition": {
"selection": "paintbrush",
"value": 300,
"init": {"value": 70}
},
"value": 70
},
"tooltip": [
{"field": "Year", "type": "nominal", "title": "Year"},
{"field": "Country", "type": "ordinal", "title": "Country"},
{
"field": "GDP per capita",
"type": "nominal",
"title": "GDP per capita"
},
{
"field": "Educationalattainment",
"type": "nominal",
"title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
}
]
}
},
{
"mark": {"type": "line", "color": "#347DB6", "size": 3},
"transform": [{"regression": "GDP per capita", "on": "percent"}],
"encoding": {
"x": {"field": "GDP per capita", "type": "quantitative"},
"y": {"field": "percent", "type": "quantitative"}
}
},
{
"transform": [
{
"regression": "GDP per capita",
"on": "percent",
"params": true
},
{"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
],
"mark": {
"type": "text",
"color": "black",
"x": "width",
"align": "right",
"y": -5
},
"encoding": {
"text": {"type": "nominal", "field": "R2"}
}
}
]
}
You need to simply add the scatter chart and a line mark inside a layer which will be stacked on top of each other. Then, perform regression transform on the line mark. The transform which is provided in your question seems wrong, as there is no x or y field having Educationalattainment, so I did the regression on percent field as it was calculated and derived from the Educationalattainment field:
"transform": [
{
"regression": "GDP per capita",
"on": "Educationalattainment",
}]
Below is the modified config or refer editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": {
"text": null,
"subtitle": null,
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"height": 100,
"width": 100,
"data": {
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
},
"transform": [
{"calculate": "datum.Educationalattainment/100", "as": "percent"},
{"filter": {"field": "Educationalattainment", "gt": 0}}
],
"layer": [
{
"selection": {
"paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
"grid": {"type": "interval"}
},
"mark": {"type": "circle", "opacity": 0.5, "color": "#EC9D3E"},
"encoding": {
"x": {
"field": "GDP per capita",
"type": "quantitative",
"axis": {
"title": "GDP per capita",
"grid": false,
"tickCount": 10,
"labelOverlap": "greedy"
}
},
"y": {
"field": "percent",
"type": "quantitative",
"axis": {
"title": "Educational Attainment",
"grid": false,
"format": "%"
}
},
"size": {
"condition": {
"selection": "paintbrush",
"value": 300,
"init": {"value": 70}
},
"value": 70
},
"tooltip": [
{"field": "Year", "type": "nominal", "title": "Year"},
{"field": "Country", "type": "ordinal", "title": "Country"},
{
"field": "GDP per capita",
"type": "nominal",
"title": "GDP per capita"
},
{
"field": "Educationalattainment",
"type": "nominal",
"title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
}
]
}
},
{
"mark": {"type": "line", "color": "#347DB6", "size": 3},
"transform": [{"regression": "GDP per capita", "on": "percent"}],
"encoding": {
"x": {"field": "GDP per capita", "type": "quantitative"},
"y": {"field": "percent", "type": "quantitative"}
}
},
{
"transform": [
{"regression": "GDP per capita", "on": "percent", "params": true},
{"calculate": "'R²: '+format(datum.rSquared, '.2f')", "as": "R2"}
],
"mark": {
"type": "text",
"color": "black",
"x": "width",
"align": "right",
"y": -5
},
"encoding": {"text": {"type": "nominal", "field": "R2"}}
}
]
}
Edit
To show the text, I have removed the bind config from your grid selection. After removing it the text was properly visible, this can be an issue or there will be some reason behind it.
Updated the following line in above snippet:
"selection": {
"paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
"grid": {"type": "interval"}
},

Filter for one attribute (array) for one of its value (json)

Having the following record
{
"name": "
 Festões Plástico, 12mt x 17cm - Festas Populares",
"categories": [
"Festas",
"Casamentos",
"Decorações"
],
"hierarchicalCategories": {
"lvl0": "Festas",
"lvl1": "Festas > Casamentos",
"lvl2": "Festas > Casamentos > Decorações"
},
"description": "",
"brand": "Misterius",
"price": 14.94,
"stock": "Disponível",
"prices": [
{
"value": 12,
"type": "specificValue",
"family": "fatos",
"subfamily": "example"
},
{
"value": 13,
"type": "specificValue13",
"family": "fatos13",
"subfamily": "example13"
},
{
"value": 14,
"type": "specificValue14",
"family": "fatos14",
"subfamily": "example14"
},
{
"value": 15,
"type": "specificValue15",
"family": "fatos15",
"subfamily": "example15"
},
{
"value": 16,
"type": "specificValue16",
"family": "fatos16",
"subfamily": "example16"
}
],
"color": [
{
"name": "Amarelo",
"label": "Amarelo,#FFFF00",
"hexa": "#FFFF00"
},
{
"name": "Azul",
"label": "Azul,#0000FF",
"hexa": "#0000FF"
},
{
"name": "Branco",
"label": "Branco,#FFFFFF",
"hexa": "#FFFFFF"
},
{
"name": "Laranja",
"label": "Laranja,#FFA500",
"hexa": "#FFA500"
},
{
"name": "Verde Escuro",
"label": "Verde Escuro,#006400",
"hexa": "#006400"
},
{
"name": "Vermelho",
"label": "Vermelho,#FF0000",
"hexa": "#FF0000"
}
],
"specialcategorie": "",
"reference": "3546",
"rating": 0,
"free_shipping": false,
"popularity": 0,
"objectID": "30"
}
Now by searching for "Festas Populares" will return the record and its attributes, is it possible to also filter for one attribute array as "prices" to only return one json. for example "prices.type"="specificValue14" and "family"="fatos14" and "family"="fatos" and "subfamily"="example"
{
“value”: 14,
“type”: “specificValue14”,
“family”: “fatos14”,
“subfamily”: “example14”
}
the record return would be:
{
"name": "
 Festões Plástico, 12mt x 17cm - Festas Populares",
"categories": [
"Festas",
"Casamentos",
"Decorações"
],
"hierarchicalCategories": {
"lvl0": "Festas",
"lvl1": "Festas > Casamentos",
"lvl2": "Festas > Casamentos > Decorações"
},
"description": "",
"brand": "Misterius",
"price": 14.94,
"stock": "Disponível",
"prices": [
{
"value": 14,
"type": "specificValue14",
"family": "fatos14",
"subfamily": "example14"
}
],
"color": [
{
"name": "Amarelo",
"label": "Amarelo,#FFFF00",
"hexa": "#FFFF00"
},
{
"name": "Azul",
"label": "Azul,#0000FF",
"hexa": "#0000FF"
},
{
"name": "Branco",
"label": "Branco,#FFFFFF",
"hexa": "#FFFFFF"
},
{
"name": "Laranja",
"label": "Laranja,#FFA500",
"hexa": "#FFA500"
},
{
"name": "Verde Escuro",
"label": "Verde Escuro,#006400",
"hexa": "#006400"
},
{
"name": "Vermelho",
"label": "Vermelho,#FF0000",
"hexa": "#FF0000"
}
],
"specialcategorie": "",
"reference": "3546",
"rating": 0,
"free_shipping": false,
"popularity": 0,
"objectID": "30"
}
for some context a product can have multiple prices associated, for a specific user, or one day there is campaign giving discount, etc so for that cases want to filter price associated to the product/record.
No, this is not possible with Algolia. Records are always returned with the attributes specified inside attributesToRetrieve. These attributes are returned in full.

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();
});

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
},