I build FusionCharts multilevelpie graph. But huge indents appear.
500 x 500
With a decrease in space, the graph is greatly reduced.
padding 1
100% x 100%
When doing a full size chart, the indents become too large.
padding 2
When I reduce the space of the graph, the graph becomes too small.
My code:
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "#",
"plottooltext": "$label",
"theme": "fusion",
},
"category": {{ pie }},
}
}
);
fusioncharts.render();
});
You can adjust the size of the outer part of the pie using pieRadius attribute at the chart object level, take a look at this sample -
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue",
"pieRadius": "170"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
},
{
"label": "Noodles",
"color": "#f8bd19",
"value": "9.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
{
"label": "Handbags",
"color": "#e44a00",
"value": "6.3"
},
{
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}
]
},
{
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [{
"label": "Bath &{br}Grooming",
"color": "#008ee4",
"value": "9.45"
},
{
"label": "Feeding",
"color": "#008ee4",
"value": "6.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "6.75"
}
]
},
{
"label": "Electronics",
"color": "#33bdda",
"value": "30",
"category": [{
"label": "Laptops",
"color": "#33bdda",
"value": "8.1"
},
{
"label": "Televisions",
"color": "#33bdda",
"value": "10.5"
},
{
"label": "SmartPhones",
"color": "#33bdda",
"value": "11.4"
}
]
}
]
}]
}
});
topProductsChart.render();
});
Here is a live demo - http://jsfiddle.net/cebu68vt/
Related
I have searched a lot regarding filter of product data using checkbox but couldn't able to find the right answer for my issue.
Problem: I'm making a product filter page using checkbox in react but could not found the proper way to filter the true value of object key.
ie. I have to only filter object key value === true. Below array object is after checkbox selection before the selection it will be falsy value.
const category = [
{
"type":"Color",
"options":[
{
"key":"Red",
"value":true
},
{
"key":"Blue",
"value":false
},
{
"key":"Green",
"value":true
}
]
},
{
"type":"Gender",
"options":[
{
"key":"Men",
"value":true
},
{
"key":"Women",
"value":false
}
]
},
{
"type":"Price",
"options":[
{
"key":"0 - Rs. 250",
"from":0,
"to":250,
"value":false
},
{
"key":"Rs. 251 - 450",
"from":251,
"to":450,
"value":true
},
{
"key":"Rs. 451 & above",
"from":451,
"to":"Number.MAX_VALUE",
"value":false
}
]
},
{
"type":"Type",
"options":[
{
"key":"Polo",
"value":false
},
{
"key":"Hoodie",
"value":false
},
{
"key":"Basic",
"value":true
}
]
}
]
const productData = [
{
"id": 1,
"name": "Black Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 3
},
{
"id": 2,
"name": "Blue Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 3
},
{
"id": 3,
"name": "Pink Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Pink",
"gender": "Women",
"quantity": 6
},
{
"id": 4,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Men",
"quantity": 2
},
{
"id": 5,
"name": "Green Polo",
"type": "Polo",
"price": 250,
"currency": "INR",
"color": "Green",
"gender": "Men",
"quantity": 1
},
{
"id": 6,
"name": "Green Polo",
"type": "Polo",
"price": 350,
"currency": "INR",
"color": "Green",
"gender": "Women",
"quantity": 1
},
{
"id": 7,
"name": "Blue Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Blue",
"gender": "Women",
"quantity": 2
},
{
"id": 8,
"name": "Black Hoodie",
"type": "Hoodie",
"price": 500,
"currency": "INR",
"color": "Black",
"gender": "Women",
"quantity": 5
}]
Now,I need filtered product data from the above category data and product-data.
Here's my Codesandbox link for this.
This question already has answers here:
Finding the max value of an attribute in an array of objects
(21 answers)
Closed 1 year ago.
I try to find the highest key value of 'sequence' where it's value is 'true'.
I know it's not sql, but I would like know if it's possible to do this request on javascript.
For example, in my case I would like to have : 5 because "70" it's the highest value with bug_tab is true.
Here my js array myTab :
[
{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
]
What I have do :
This return the first occurence where bug_tab is equal to true :
var indexbugTabArray = myTab.map(function(o) { return o.bug_tab; }).indexOf(true);
Advance thanks,
Use array.reduce to get the highest index.
Also, as noted by another user, the correct answer based on your description is 4, not 5 like you said.
var arr = [{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
];
var res = arr.reduce((acc, curr, idx, arr) =>
curr.bug_tab && +curr.sequence > +arr[acc].sequence ? idx : acc
, 0);
console.log(res);
It can be done like that, maybe it's not the most efficient way but it works as expected
const toto = [
{
"value": "AHAH",
"field": "15",
"color": "",
"bug_tab": true,
"sequence": "40",
"text": "slash"
},
{
"value": "BABA",
"field": "8",
"color": "",
"bug_tab": true,
"sequence": "50",
"text": "zip"
},
{
"value": "CACA",
"field": "25",
"color": "",
"bug_tab": false,
"sequence": "63",
"text": "vite"
},
{
"value": "DADA",
"field": "22",
"color": "",
"bug_tab": true,
"sequence": "66",
"text": "meat"
},
{
"value": "EVA",
"field": "13",
"color": "",
"bug_tab": true,
"sequence": "70",
"text": "zut"
},
{
"value": "FAFA",
"field": "jut",
"color": "",
"bug_tab": false,
"sequence": "90",
"text": "cut"
}
];
const max = {
index: -1, // -1 so you can check if you find one
value: 0,
};
toto.forEach((el, index) => {
if (+el.sequence > max.value && el.bug_tab) {
max.index = index;
max.value = +el.sequence;
}
});
console.log(max.index, max.value, toto[max.index]);
Here, I want to render a dynamic fusion Gantt chart. On the below example, I have hard-coded the data for rendering the chart. But I need in an dynamic format. My data is coming from an API, so how can I get that data and pass dynamically?
Also, I want x-axis and y-axis in an dynamic format.
FusionCharts.ready(function() {
var smoPlan = new FusionCharts({
type: 'gantt',
renderAt: 'chart-container',
width: '750',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"dateformat": "mm/dd/yyyy",
"caption": " ",
"captionFontSize": "14",
"subCaption": "Project Plan",
"subCaptionFontSize": "12",
"milestoneFont": "Times New Roman",
"milestoneFontSize": "15"
},
"categories": [{
"category": [{
"start": "08/01/2014",
"end": "08/31/2014",
"label": "Aug '14"
}, {
"start": "09/01/2014",
"end": "09/30/2014",
"label": "Sep '14"
}, {
"start": "10/01/2014",
"end": "10/31/2014",
"label": "Oct '14"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"process": [{
"label": "Identify Customers"
}, {
"label": "Survey 500 Customers"
}, {
"label": "Interpret Requirements"
}
]
},
"tasks": {
"task": [{
"id": "1",
"start": "08/04/2014",
"end": "08/10/2014"
}, {
"id": "2",
"start": "08/08/2014",
"end": "08/19/2014"
}, {
"id": "3",
"start": "08/19/2014",
"end": "09/02/2014"
}]
},
//Adding milestones to task with id 1 and 3
"milestones": {
"milestone": [{
"date": "8/06/2014",
"taskid": "1",
"color": "#f8bd19",
"shape": "rhombus",
"tooltext": "Successful Completion of Development",
"label": " ",
"color": "#587B17"
}, {
"date": "8/25/2014",
"taskid": "3",
"color": "#f8bd19",
"shape": "triangle",
"tooltext": "Successful Completion of Campaign",
"label": " ",
"color": "#4838D2"
}]
}
}
}).render();
});
Please help me to solve this! Thanks in advance.
If I have multiple charts, say a stacked bar and a pie chart on my page. I would like to interact (e.g. click) on one of it and see some visual update on the other chart.
I tried creating them using FusionCharts in the following manner:
FusionCharts.ready(function() {
var pieChart = new FusionCharts({
type: 'pie2d',
renderAt: 'pieContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"enableMultiSlicing": "0",
"bgcolor": "FFFFFF",
"showvalues": "1",
"showpercentvalues": "1",
"showborder": "0",
"showplotborder": "0",
"showlegend": "1",
"legendborder": "0",
"legendposition": "bottom",
"enablesmartlabels": "1",
"use3dlighting": "0",
"showshadow": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3",
"palettecolors": "#f8bd19,#e44a00,#008ee4,#33bdda,#6baa01,#583e78"
},
"data": [{
"label": "Services",
"value": "26"
}, {
"label": "Hardware",
"value": "32"
}, {
"label": "Software",
"value": "42"
}]
}
}).render();
var stackedBar = new FusionCharts({
type: 'stackedBar2D',
renderAt: 'barContainer',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Company Revenue",
"xaxisname": "Month",
"yaxisname": "Revenue",
"bgcolor": "FFFFFF",
"outcnvbasefontcolor": "666666",
"numberprefix": "$",
"showvalues": "0",
"numvdivlines": "10",
"showalternatevgridcolor": "1",
"alternatevgridcolor": "e1f5ff",
"divlinecolor": "e1f5ff",
"vdivlinecolor": "e1f5ff",
"basefontcolor": "666666",
"tooltipbgcolor": "F3F3F3",
"tooltipbordercolor": "666666",
"canvasbordercolor": "666666",
"canvasborderthickness": "1",
"showplotborder": "1",
"plotfillalpha": "80",
"showborder": "0",
"legendbgcolor": "#CCCCCC",
"legendbgalpha": "20",
"legendborderalpha": "0",
"legendshadow": "0",
"legendnumcolumns": "3"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Product A",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "Product B",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "42000",
"color": "91C728",
"displayvalue": "Target",
"showontop": "1"
}]
}],
"styles": {
"definition": [{
"name": "CanvasAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "Canvas",
"styles": "CanvasAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div>
<span id="barContainer">FusionCharts XT will load here!</span>
<span id="pieContainer">FusionCharts XT will load here!</span>
</div>
Now how to update the other chart on interacting one of the chart? Say by clicking or hovering plots on one of the chart, has its visual update in another chart.
**Note: ** The data is not relevant in this case. Only the chart to chart interactivity needs to be established. There is no restriction on JS library being used and can be entirely based on the responder choice.Any help is highly appreciable.
With highcharts, you could override the click function, then update whichever properties you want.
See: http://api.highcharts.com/highcharts#chart.events
I do not know how it is with FusionCharts, although I think syncing data between different type of charts should be possible, but I was using a lot amCharts and if you have no restriction on library then I put this quick tips link to show you what you can fairly quickly implement there.
http://www.amcharts.com/tips/automatically-syncing-pie-chart-data-column-chart-hover/
I am relatively new to both MVC and FusionCharts. I Have a View where the Model contains all the data I need, I need to pass this(or rather specific data from the model) to the FusionChart.
I have a FusionChart that I got from their site(FusionCharts), which has hard coded values, but have no idea how to replace this with the data from my model. Below is my FusionChart :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xaxisname": "Week of Year",
"showvalues": "0",
"numvdivlines": "2",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"captionFontSize": "13",
"subcaptionFontSize": "13",
"subcaptionFontBold": "0",
"showBorder": "0",
"showPlotBorder": "0",
"showXAxisLine": "1",
"showShadow": "0",
"showCanvasBorder": "0",
"showAlternateHGridColor": "0",
"showalternatevgridcolor": "1",
"usePlotGradientColor": "0",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"legendBorderAlpha": "0",
"legendShadow": "0",
"alignCaptionWithCanvas": "0"
},
"categories": [
{
"category": [
{ "label": "0" },
{ "label": "5000.00" },
{ "label": "4000.00" },
{ "label": "6000.00" },
{ "label": "8000.00" },
{ "label": "10000.00" },
{ "label": "12000.00" },
{ "label": "14000.00" },
{ "label": "16000.00" }
]
}
],
"axis": [
{
"title": "Revenue",
"titlepos": "left",
"tickwidth": "10",
"numberPrefix": "$",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Revenue",
"linethickness": "3",
"data": [
{ "value": "137500" },
{ "value": "124350" },
{ "value": "156700" },
{ "value": "131450" },
{ "value": "208300" },
{ "value": "219900" },
{ "value": "227500" },
{ "value": "254300" },
{ "value": "155900" },
{ "value": "105650" },
{ "value": "120950" },
{ "value": "127500" }
]
}
]
}, {
"title": "Orders",
"axisonleft": "0",
"titlepos": "right",
"numdivlines": "8",
"tickwidth": "10",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Orders",
"data": [
{ "value": "22567" },
{ "value": "21348" },
{ "value": "24846" },
{ "value": "19237" },
{ "value": "20672" },
{ "value": "23403" },
{ "value": "30278" },
{ "value": "26719" },
{ "value": "21940" },
{ "value": "24396" },
{ "value": "22340" },
{ "value": "25439" }
]
}
]
},
{
"title": "Footfalls",
"titlepos": "RIGHT",
"axisonleft": "0",
"numdivlines": "5",
"tickwidth": "10",
"numberSuffix": "",
"divlineisdashed": "1",
"dataset": [
{
"seriesname": "Footfalls",
"data": [
{ "value": "68473" },
{ "value": "57934" },
{ "value": "78925" },
{ "value": "69213" },
{ "value": "74892" },
{ "value": "81123" },
{ "value": "90086" },
{ "value": "91174" },
{ "value": "68934" },
{ "value": "80934" },
{ "value": "73634" },
{ "value": "84453" }
]
}
]
}
]
}
}).render();
});
I have also tried populating a string with the XML data and then did the following :
FusionCharts.ready(function () {
var hourlySalesChart = new FusionCharts({
type: 'multiaxisline',
renderAt: 'chart-container2',
width: '600',
height: '350'
});
hourlySalesChart.setXMLData(#Model.strChartData); // - This gives an error : Incorrect Syntax
hourlySalesChart.render();
If anyone could help point me to the right direction, I would greatly appreciate it.
Thanks!