Please, I need help with scale in FusionCharts.
Instead of (0$, 20$ ...) I want : A B C D where each letter has a significant value (A = 1, B = 2 , ...).
The people at the support told me that it's not supported natively. And I could do it with trendlines.
Anyone has tried with trendlines or any other solution ?
Thank you for your help.
You can consider using annotation feature. Here is fiddle which should help you to achieve what you want.
Hide the yAxis by
"showYAxisValues": "0",
Then create the axis through annotation.
For anyone looking for a solution, I've tried with annotations but it did'nt work for me because I was using a multi series bar chart.
So I've finally gone with Trendlines :
"trendlines": [
{
"line": [
{
"startvalue": "1",
"endvalue": "1",
"color": "#111111",
"displayvalue": "A",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
},
{
"startvalue": "2",
"endvalue": "2",
"color": "#111111",
"displayvalue": "B",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
}
]
}
]
Related
EDIT:
Now I am getting the data properly by adding an *ngIf condition for graph component. But, the chart getting rendered, not getting any fill color. The fill URL getting is
fill="url('http://localhost:4200/#rr-1272-xr___89_110_110__rgba_118_193_134_0.9__78-rgba_118_193_134_0.9__89')"
OLD:(Found solution)
In my application, the Fusioncharts graphs are not rendering when the tab is not active. Even when the tab comes to active, the graphs are not rendering. Showing No data to display message as follows
HTML:
<section class="">
<!-- fusion chart starts here -->
<fusioncharts width="220" height="220" type="doughnut2d"
[dataSource]="dataSource" dataFormat="json" SVGDefinitionURL='absolute'>
</fusioncharts>
<!-- fusion chart ends here -->
</section>
Component:
let xyz = {
chart: {
"bgColor": "#ffffff",
"startingAngle": "310",
"showLegend": "0",
"defaultCenterLabel": this.returnValue(this.chartData) + "\n" + "Total",
// "centerLabel": "$value" + "\n" + "$label",
"centerLabelBold": "0",
"showTooltip": "0",
"theme": "fusion",
"minAngleForValue": "75",
"enablesmartLabel": "0",
"showLabels": "0",
"showValues": "0",
"enableMultiSlicing": "0",
"showBorder": "0",
"showPlotBorder": "1",
"plotBorderColor": "#ffffff",
"plotBorderThickness": "5",
// "legendPosition": "RIGHT",
"doughnutRadius": "70",
"paletteColors": "#6C7DED,#3CA653,#FFAB27,#3AC9E9,#6C7DED,#0C8455,#FDCF12,#76E4FC",
"animateClockwise": "0",
"chartLeftMargin": "0",
"chartRightMargin": "0",
"chartTopMargin": "0",
"chartBottomMargin": "0",
"captionPadding": "0",
"slicingDistance": "0",
"plotHoverEffect": "1",
"centerLabelFontSize": "20",
"centerLabelFont": "DroidSans",
"centerLabelColor": "#222222",
},
data: [
{
"label": "Pilot",
"id": "Pilot",
"value": 5,
"color": "#3CA653",
"link": "studies?studies-by-phase=Pilot"
},
{
"label": "Pivotal",
"id": "Pivotal",
"value": 2,
"color": "#FFAB27",
"link": "studies?studies-by-phase=Pivotal"
},
{
"label": "Phase 1",
"id": "Phase 1",
"value": 4,
"color": "#3AC9E9",
"link": "studies?studies-by-phase=Phase 1"
},
{
"label": "Phase 2",
"id": "Phase 2",
"value": 3,
"color": "#6C7DED",
"link": "studies?studies-by-phase=Phase 2"
}
]
};
this.dataSource = { ...xyz };
Please help me solve this issue.
Thank you...
In the module.ts file add SVGDefinitionURL as absolute instead of adding in component.html
FusionCharts.options['SVGDefinitionURL'] = absolute;
I am trying to create a scatterplot using webservice API endpoints provided by my university and Vega-lite visualization library. The goal is to have hour of day plotted on the x-axis and the count of instances on the y axis by using the following.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"mark": "point",
"encoding": {
"x": {"field": "0", "type": "quantitative"},
"y": {"field": "1", "type": "quantitative"}
}
}
I have tried to follow several examples found online and have only able to figure out how to plot one point at a time using the above code or manually input each point on the graph, however doing it manually is not an option for my purposes. My JSON file looks is as follows where the hours of day are represented by 0-23 and count of each instance is right next to it.
{"0":429,"1":231,"2":130,"3":85,"4":42,"5":1,"7":1,"8":17,"9":16,"10":795,"11":425,"12":921,"13":846,"14":1795,"15":1789,"16":2119,"17":1630,"18":1942,"19":1637,"20":1636,"21":1054,"22":843,"23":710}
I have been trying to figure this out for a while and need some help going in the right direction
Data in vega-lite is expected to be specified as a list of records; e.g. rather than
{"0":429,"1":231,"2":130}
it should be
[{"x": "0", "y": 429}, {"x": "1", "y": 231}, {"x": "2", "y": 130}]
If your data source cannot be modified, it is possible to use the fold transform to reshape your data. It would look something like this (view in vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"transform": [
{
"fold": ["0", "1", "2", "3", "4", "5", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
"as": ["x", "y"]
}
],
"mark": "point",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}
Unfortunately, there's no way to fold data like this without explicitly listing all the entries to be folded.
Please, how can I remove colour range slider from fusion chart? I have tried to remove the colorrange from the chart object but it is stil there.
Thanks
In your dataSource colorrange object, set "gradient" to 0
"colorrange": {
"gradient": 0,
"color": [
{
"minvalue": "0",
"maxvalue": "50",
"code": "#62B58F"
},
{
"minvalue": "50",
"maxvalue": "75",
"code": "#FFC533"
},
{
"minvalue": "75",
"maxvalue": "100",
"code": "#F2726F"
}
]
}
I have the following JSON data:
{
"00100": {
"claim_id": "21",
"reference_no": "00100",
"distributor_name": "Standard Match",
"group_name": "A",
"month": "Jun2017",
"grand_total": "268.532",
"details": [
{
"claim_id": "65",
"product_name": "Lucky Match Type 1",
"price": "102.00",
"quantity": "02",
"net_amount": "179.52"
},
{
"claim_id": "66",
"product_name": "Lucky Match Type 2",
"price": "101.15",
"quantity": "01",
"net_amount": "89.012"
}
]
}
}
I want to get this data in Jquery Datatables, but i want to out put like this showing in below image:
i guess you can't since jquery datatable will not work with table inside table.
Sorry if i am wrong.
please go through this for further reference
https://datatables.net/blog/2011-06-19
May be you can.
I am trying to use water fall chart of fusioncharts API.
I want to disable hovering property of chart. Here you can see the on hovering it shows "Variable Costs, $-156K" on the "Variable Costs" column.
I am using some following configuration-
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"connectordashed": "1",
"sumlabel": "Total {br} Profit",
"positiveColor": "#6baa01",
"negativeColor": "#e44a00",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"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",
"divLineDashed": "1",
"divLineDashLen": "1",
"usePlotGradientColor": "0",
"showplotborder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [
{
"label": "Online sales",
"value": "420000"
},
{
"label": "Store Sales",
"value": "710000"
},
{
"label": "Total Sales",
"issum": "1"
},
{
"label": "Fixed Costs",
"value": "-250000"
},
{
"label": "Variable Costs",
"value": "-156000"
},
{
"label": "COGS",
"value": "-310000"
},
{
"label": "Promotion Costs",
"value": "-86000"
},
{
"label": "Total Costs",
"issum": "1",
"cumulative": "0"
}
]
}
You can also check the data and configuration at the following link.
Waterfall Chart
Please suggest fusioncharts API way(If possible) to disable on-hover property. Other way solutions are also welcome.
Just disable the hover event by adding css rule to the elements.
Jquery Solution
$('div#chart-container-1 rect').css('pointer-events','none');
CSS solution
div#chart-container-1 rect {
pointer-events: none !important;
}
Note: chart-container-1 was the id of the parent div which wraps the chart in the link you provied, you can change it to match your div.
!important is used in the css because the elements have inline styles for pointer-events and it takes priority in the rule, So override the inline property priority I have used !important
Also note pointer-events:none will remove all the mouse events including click, hover, mousein, mouseout etc..