I have used "multilevelpie" chart .
As the data in the chart is less (say 10 or 1) ,the label names are merging with another.
I have attached the screenshot with the message ,please consider it and send me a solution
Kindly check the JsFiddle re-generated the issue.. & i have attached images also, Strange error
Js Fiddle example
FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id : "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"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"
},
"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": "19.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "0"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [
{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "62.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": "16.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "76.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();
});
Lets pin-point the concerns we have here:
Problem 1: If the dataValue is 0, there should be no label for it in the chart.
Solution: There might be a philosophy that how to get the context of a zero data and an absent data. Say if I have a category with 0 value, and I remove it from chart, how to set the context that there was at all a data. No matter what for the sake of this requirement, we might think of a dataRefiner() thats just refines out the zero and null data in the dataSource. :)
Problem2: Texts are overlapping.
Solution: Currently FusionCharts seems not to support overlapping management of texts in a ML pie chart. :'( But definitely I can walk through work-arounds that comes in my mind. Lets get our hands dirty!!!
Soultion 1: Attach a {br} tag to the label so that it breaks the line and accommodate in the arc. Not much useful in very thin slices.
Solution 2: Reduce the data labels font-size to an extent it just accommodates. Docs might be useful.
Solution 3: Access the internal graphic labels and rotate it.Word of caution: Accessing internal graphic elements has no official support from FusionCharts.
Creating a workaround accommodating some of the fixes mentioned avobe. This code is compatible with FC 3.11.0. Extending the support for:
enableSmartLabels
manageLabelOverflow
useEllipsesWhenOverflow
now even in MultiLevel Pie charts. This is a temporary and an approximate workaround until FusionCharts natively supports it.
Run the following snippet or play with the fiddle:
/*
Recursively removes the data containing falsy values.
#param data {Object} - The original data.
#return {Object} - The refined data.
*/
function dataRefiner(data) {
var i,
category = data.category,
len = category && category.length;
for (i = 0; i < len; i += 1) {
elem = category[i];
if (elem.category) {
dataRefiner(elem);
} else if (!Number(elem.value)) {
category.splice(i, 1);
i -= 1;
len -= 1;
}
}
return data;
}
var overlapManager = (function() {
return function(chartRef, dataSet) {
var jsonData = chartRef.getJSONData(),
chartAttrs = jsonData.chart;
if (Number(chartAttrs.enablesmartlabels) === 0 || Number(chartAttrs.managelabeloverflow) === 0) {
return;
}
/*
* Returns the point to point distance for two points.
* #return {Number}
*/
function dist_point(point1, point2) {
var math = Math;
return math.sqrt((math.pow((point1.x - point2.x), 2)) + (math.pow((point1.y - point2.y), 2)))
}
/*
* given a radius, center, and two ends of a chord.
* return: {
inner: Coordinate of the dipped point on the inner circle.
outer: coordinate of the dipped point on the outer circle.
}
*/
function give_dips(center_circle, angle, innerRadius, outerRadius) {
var math = Math,
res = {
inner: {},
outer: {}
},
getExtreme = function(radius) {
return {
x: center_circle.x + (radius * math.cos(angle)),
y: center_circle.y - (radius * math.sin(angle))
}
};
if (center_circle) {
res.inner = getExtreme(innerRadius);
res.outer = getExtreme(outerRadius);
}
return res;
}
/*
* Manages the overlapping of the texts in ML pie chart.
* #params: elem - {Object} - Internal store for the graphic and configurations.
* #params: chartRef - {Object} - The reference for the chart.
*/
function wrapText(elem, chartRef) {
var conf = elem && elem.config || {},
smartLabel = chartRef.jsVars.instanceAPI.linkedItems.smartLabel,
jsonData = chartRef.getJSONData(),
chart = jsonData.chart,
useEllipsesWhenOverflow = chart && !!Number(chart.useellipseswhenoverflow),
math = Math,
graphics = elem && elem.graphics,
ringpath = graphics.element && graphics.element.attr('ringpath') || [],
center_circle = {
x: ringpath[0],
y: ringpath[1]
},
innerRadius = ringpath[3],
outerRadius = ringpath[2],
strechAngle = conf.angleStrech,
angle = (2 * math.PI) - conf.startAngle - (strechAngle / 2),
dipPoints = give_dips(center_circle, angle, innerRadius, outerRadius),
center = {
x: (dipPoints.inner.x + dipPoints.outer.x) / 2,
y: (dipPoints.inner.y + dipPoints.outer.y) / 2
},
textObj,
radius = math.min(dist_point(center, center_circle) * math.sin(strechAngle / 2) - (conf.borderWidth || 0),
dist_point(center, dipPoints.inner)),
offset = radius * math.cos(math.PI / 4),
side = math.sqrt(2) * radius;
smartLabel.useEllipsesOnOverflow(useEllipsesWhenOverflow);
textObj = smartLabel.getSmartText(conf.displayValue, side, side);
if (graphics.label && graphics.label.getBBox().width > side) {
(innerRadius !== 0) && graphics.label
.attr({
text: textObj.text,
});
}
}
if (!dataSet) {
dataSet = chartRef.jsVars.instanceAPI.components.dataset[0];
}
var data = dataSet.components.data || [],
len = data.length,
i;
for (i = 0; i < len; i += 1) {
// recursively traverse the graphical objects.
overlapManager(chartRef, data[i]);
}
wrapText(dataSet, chartRef);
}
})();
FusionCharts.ready(function() {
topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: dataRefiner(data),
events: {
"rendered": function(e, a) {
if (FusionCharts.version.join('.') !== '3.11.0') {
// It access the internal architechural properties of fusioncharts which might change in future release.
console.log('overlapManager() is a work around supported for FusionCharts 3.11.0 and might not work in this version.');
}
overlapManager(e.sender);
}
}
});
topProductsChart.render();
});
var topProductsChart,
data = {
"chart": {
"useEllipsesWhenOverflow": "1",
"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"
},
"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": "19.99"
}, {
"label": "Seafood",
"color": "#f8bd19",
"value": "0"
}]
}, {
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "62.08"
}, {
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
}, {
"label": "Han",
"color": "#e44a00",
"value": "6.3"
}, {
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}]
}, {
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [{
"label": "Bath & Grooming",
"color": "#008ee4",
"value": "9.45"
}, {
"label": "Feeding",
"color": "#008ee4",
"value": "16.3"
}, {
"label": "Diapers",
"color": "#008ee4",
"value": "76.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"
}]
}]
}]
};
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!--
Sales by category shown using Multi-level Pie Chart.
-->
<div id="chart-container">FusionCharts will render here</div>
You might also refer to the fusion treeMap chart to represent the tree and hierarchal data.
Related
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"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": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.
The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"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": "2006",
"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": "2005",
"renderas": "Area",
"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"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.
I have a chart that contain
<script type="text/javascript">
console.log('{{ $cpe_mac }}');
var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {
console.log(data)
var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];
for (var i = 0; i < data.hour_g_up.length; i++) {
array_hour_g_down[i] = {"value":data.hour_g_down[i]};
array_hour_g_up[i] = {"value":data.hour_g_up[i]};
array_hour_p_down[i] = {"value":data.hour_p_down[i]};
array_hour_p_up[i] = {"value":data.hour_p_up[i]};
}
var granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Time-Based Bandwidth Usage",
"subcaption": "Daily View",
"xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
"yaxisname": "Bandwidth (in Megabytes)",
"paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
// "numbersuffix": "MB",
"showvalues": "0",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"categories": [{
"category": [{
"label": "12am-2am"
}, {
"label": "2am-4am"
}, {
"label": "4am-6am"
}, {
"label": "6am-8am"
}, {
"label": "8am-10am"
}, {
"label": "10am-12pm"
}, {
"label": "12pm-2pm"
}, {
"label": "2pm-4pm"
}, {
"label": "4pm-6pm"
}, {
"label": "6pm-8pm"
}, {
"label": "8pm-10pm"
}, {
"label": "10pm-12am"
}]
}],
"dataset": [{
"dataset": [{
"seriesname": "Home Network - Downlink",
"data": array_hour_p_down
}, {
"seriesname": "Home Network - Uplink",
"data": array_hour_p_up
}]
}, {
"dataset": [{
"seriesname": "Guest Network - Downlink",
"data": array_hour_g_down
}, {
"seriesname": "Guest Network - Uplink",
"data": array_hour_g_up
}]
}]
}
});
});
</script>
I wrap my code around ajax.done() because I don't want my page load to wait for that data and rendering the chart as soon as the data arrive. But now I face another issue.
Uncaught ReferenceError: granular_time_network_day is not defined
Error
$('#granular-time').on('click', function() {
$('#granular-total-view').hide();
$('#granular-time-view').fadeIn('slow');
granular_time_network_day.render();
granular_time_device_day.render();
$('#btn-interval').prop('disabled', false);
});
How do I prevent this from happening?
Did I do anything wrong on my Ajax?
Should I look into promise or something like that?
You need to defined granular_time_network_day outside of your ajax.done function
define the function outside of your .done() callback so the click is aware of it even if the call hasn't completed yet.
EDIT
You don't need to check to see if a function is available, you need to check and see if you have the data yet from the $.ajax call:
var data = null;
$.ajax().done(function(data) {
// assign data
data = data;
});
$('#granular-time'.on('click', function() {
// check to see if you have data
if (data) {
// do your stuff
var granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
....
})
}
});
});
I would suggest checking to see if granular_time_network_day exists before calling render.
Example:
$('#interval-day').on('click',function(){
if (granular_time_network_day) {
granular_time_network_day.render();
} else {
//tell user that the data is still being retrieved or handle another way
}
});
I did notice a potential other problem related to the variable being declared in the done call - granular_time_network_day will be in scope only for the done function. It would work out to declare it outside the done function, so that the click handler will be able to access it when the ajax call is complete.
window.
Turn out that window. save my life, and the answer that I am looking for.
Here is my final script
<script type="text/javascript">
var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {
console.log(data)
var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];
for (var i = 0; i < data.hour_g_up.length; i++) {
array_hour_g_down[i] = {"value":data.hour_g_down[i]};
array_hour_g_up[i] = {"value":data.hour_g_up[i]};
array_hour_p_down[i] = {"value":data.hour_p_down[i]};
array_hour_p_up[i] = {"value":data.hour_p_up[i]};
}
window.granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Time-Based Bandwidth Usage",
"subcaption": "Daily View",
"xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
"yaxisname": "Bandwidth (in Megabytes)",
"paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
// "numbersuffix": "MB",
"showvalues": "0",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"categories": [{
"category": [{
"label": "12am-2am"
}, {
"label": "2am-4am"
}, {
"label": "4am-6am"
}, {
"label": "6am-8am"
}, {
"label": "8am-10am"
}, {
"label": "10am-12pm"
}, {
"label": "12pm-2pm"
}, {
"label": "2pm-4pm"
}, {
"label": "4pm-6pm"
}, {
"label": "6pm-8pm"
}, {
"label": "8pm-10pm"
}, {
"label": "10pm-12am"
}]
}],
"dataset": [{
"dataset": [{
"seriesname": "Home Network - Downlink",
"data": array_hour_p_down
}, {
"seriesname": "Home Network - Uplink",
"data": array_hour_p_up
}]
}, {
"dataset": [{
"seriesname": "Guest Network - Downlink",
"data": array_hour_g_down
}, {
"seriesname": "Guest Network - Uplink",
"data": array_hour_g_up
}]
}]
}
});
});
</script>
I'm no longer getting the error.
I need some help about D3js about connecting data.
here is the one iam working on::
http://jsfiddle.net/2emnt8m3/16/
The value should be taken only from the state that the mouse hover for generating PIE chart . but i am facing some difficulty in taking the DATA
from the mouse hover, Any help would be appreciated.
dataSet = [
{
"label": "Assault on women ",
"value": 64131,
"color": "#1ee675"
},
{
"label": "Dowry Deaths",
"value": 57618,
"color": "#44b9ae"
},
{
"label": "Cruelty",
"value": 18812,
"color": "#7b37c0"
},
{
"label": "Dowry Prohibition Act",
"value": 114384,
"color": "#bca349"
},
{
"label": "Immoral Traffic (P) Act",
"value": 67706,
"color": "#8b6834"
},
{
"label": "Importation of Girls",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "Kidnapping and Abduction",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "Total Crimes against Women",
"value": 36344,
"color": "#cc9fb0"
},
{
"label": "INSULT TO MODEST",
"value": 32170,
"color": "#7c9058"
}
];
Here is one of the example I have look on:
http://simonbjohnson.github.io/Ebola_Dashboard/