In this link there is an example of pie chart created by Zoomcharts. To change the color of label outside of the slice I can use styleFunction to modify slice option.
styleFunction: function (slice, data) {
slice.label.textStyle.fillColor = 'red';
},
This only changes the color of letter. I would like to change color of line that connects slice to its label, too. Thanks.
You can try with this
slice: {
connectorStyle: {
lineColor: 'red' // Color you to give to the line of the chart connection
}
}
for more you can check in
https://zoomcharts.com/developers/en/pie-chart/api-reference/settings/slice/connectorStyle.html
Hope you will get the answer.
Check the solution
var data = {
"subvalues": [
{
"value": 50, "name": "Apples", "subvalues": [
{ "value": 25, "name": "Red apples" },
{ "value": 15, "name": "Yellow apples" },
{ "value": 10, "name": "Green apples" }]
},
{
"value": 30, "name": "Oranges", "subvalues": [
{ "value": 10, "name": "Big oranges" },
{ "value": 9, "name": "Small oranges" },
{ "value": 7, "name": "Green oranges" },
{ "value": 4, "name": "Pink oranges" }]
},
{
"value": 20, "name": "Grapes", "subvalues": [
{ "value": 15, "name": "Sweet grapes" },
{ "value": 5, "name": "Sour grapes" }]
},
{ "value": 50, "name": "Vegetables", style: { fillColor: "yellow" } }]
};
var t = new PieChart({
container: document.getElementById("demo"),
area: { height: 350 },
data: { preloaded: data },
slice: {
styleFunction: function (slice, data) {
slice.label.textStyle.fillColor = 'red';
},
connectorStyle: {
lineColor: 'red'
}
}
});
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
<div id="demo"></div>
Related
I have an object, which I need to turn into a list "grouped" by a child element. The current object is something like:
{
"results": [
{
"id": 14,
"name": "Productivity",
"category": {
"id": 4,
"name": "Work",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 15,
"name": "Focus",
"category": {
"id": 4,
"name": "Work",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 16,
"name": "Happiness",
"category": {
"id": 5,
"name": "Mood",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 17,
"name": "Positivity",
"category": {
"id": 5,
"name": "Mood",
"color": "#fff",
"color2": "#999"
}
}
]
}
What I'm trying to accomplish is to sort and group results by the category.name key, ie:
[
{
"name": "Work",
"color": "#fff",
"color2": "#999",
"packs": [
{
"id": 14,
"name": "Productivity"
},
{
"id": 15,
"name": "Focus"
}
]
},
{
"name": "Mood",
"color": "#fff",
"color2": "#999",
"packs": [
{
"id": 16,
"name": "Happiness"
},
{
"id": 17,
"name": "Positivity"
}
]
}
]
And so on in such a way that I can loop over the result and build some sort of list.
I'm pretty sure there's a way to accomplish this with either map or reduce, but even though I've had some progress, I just can't seem to order the results in the way I need. (Pretty new to R/RN).
What I'm trying to accomplish in the long run is to be able to pass said info to a looped Component such as
<CategoryList
key={name}
title={name}
results={packs}
/>
Thanks in advance!
Use a Map with the category names as keys and new objects as values to group all the items by category.
When done grouping get the Map values and spread to array
const cats = data.results.reduce((a, {id, name, category:cat})=>{
const obj = a.get(cat.name) || {...cat, packs: []};
obj.packs.push({id, name});
return a.set(cat.name, obj);
}, new Map);
const res = [...cats.values()];
console.log(res)
.as-console-wrapper { max-height: 100%!important;}
<script>
const data={results:[{id:14,name:"Productivity",category:{id:4,name:"Work",color:"#fff",color2:"#999"}},{id:15,name:"Focus",category:{id:4,name:"Work",color:"#fff",color2:"#999"}},{id:16,name:"Happiness",category:{id:5,name:"Mood",color:"#fff",color2:"#999"}},{id:17,name:"Positivity",category:{id:5,name:"Mood",color:"#fff",color2:"#999"}}]};
</script>
var data = {
"results": [
{
"id": 14,
"name": "Productivity",
"category": {
"id": 4,
"name": "Work",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 15,
"name": "Focus",
"category": {
"id": 4,
"name": "Work",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 16,
"name": "Happiness",
"category": {
"id": 5,
"name": "Mood",
"color": "#fff",
"color2": "#999"
}
},
{
"id": 17,
"name": "Positivity",
"category": {
"id": 5,
"name": "Mood",
"color": "#fff",
"color2": "#999"
}
}
]
};
var processedData = [];
data['results'].forEach(result => {
var pack = {
'id': result['id'],
'name': result['name']
};
var category = processedData.find(element => element['name'] === result['category']['name']);
if (category) {
category['packs'].push(pack);
} else {
category = {
'name': result['category']['name'],
'color': result['category']['color'],
'color2': result['category']['color2'],
'packs': [pack]
};
processedData.push(category);
}
});
console.log(processedData);
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.
I have a JSON dataset which could be very large when it returns, with the following structure for each object:
{
"ctr": 57,
"averageECPC": 23,
"cost": 2732.54,
"margin": 66,
"profit": 2495.9,
"property": {
"value": "Izzby",
"uri": "/Terrago/2"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 2573.13,
"compare": 0
},
"children": [{
"ctr": 79,
"averageECPC": 54,
"cost": 3554.78,
"margin": 88,
"profit": 3145.81,
"property": {
"value": "Comvex",
"uri": "/Octocore/4"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 1247.92,
"compare": 0
}
}]
}
Now I want to search all objects in the array and return only objects which include a string of some sort, but I only want to search certain properties.
I basically have another array which contains the keys I want to search, e.g.
const iteratees = ['ctr', 'property.value', 'status.stage']
I have lodash available within the project, but I have no idea where to start.
Any ideas?
You could use filter(), some() and reduce() to do this.
const iteratees = ['ctr', 'property.value', 'status.stage'];
var searchFor = 'lo';
var result = arr.filter(function(o) {
return iteratees.some(function(e) {
var res = e.split('.').reduce(function(a, b) {
if(a) return a[b];
}, o);
if(res) {
if((res).toString().indexOf(searchFor) != -1) return true;
}
})
})
var arr = [{
"ctr": 'lorem',
"averageECPC": 23,
"cost": 2732.54,
"margin": 66,
"profit": 2495.9,
"property": {
"value": "Izzby",
"uri": "/Terrago/2"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 2573.13,
"compare": 0
},
"children": [{
"ctr": 79,
"averageECPC": 54,
"cost": 3554.78,
"margin": 88,
"profit": 3145.81,
"property": {
"value": "Comvex",
"uri": "/Octocore/4"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 1247.92,
"compare": 0
}
}]
}, {
name: 'lorem',
ctr: 12,
property: {
value: 1
},
status: {
stage: 1
}
}, {
name: 'ipsum'
}]
const iteratees = ['ctr', 'property.value', 'status.stage'];
var searchFor = 'lo';
var result = arr.filter(function(o) {
return iteratees.some(function(e) {
var res = e.split('.').reduce(function(a, b) {
if (a) return a[b];
}, o);
if (res) {
if ((res).toString().indexOf(searchFor) != -1) return true;
}
})
})
console.log(result)
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 am using the highcharts:highcharts-meteor package in my application. I added highmaps to my configuration. My config object for highcharts is as follows:
{
"version": "4.2.1", // Choose version of Highcharts/Highstock/Highmaps.
"base": "highcharts.js", // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
"adapter": "jquery", // Choose adapter, e.g. "jquery" or "standalone-framework.js".
"modules": [ // Choose modules to be installed altogether with main library.
"highcharts-3d.src.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/maps.js",
"modules/drilldown.js",
"themes/gray.js"
]
}
I added the maps.js to be able to use both highcharts and highmaps. I am trying to render the sample demo map "US Population Density" without any luck. I am unsure what the right configuration option is and where should I put the us-all.js file in my directory.
The error I get in the browser console is
Cannot set property 'countries/us/us-all' of undefined
The JSFiddle from highcharts demo site is below.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
So highcharts.Map is undefined. I have tried multiple things:
changed the config base option to highmaps.js
Removing the modules/maps.js
Putting us-all.js in the compatibility directory
Same issue. What am I doing wrong?
The error:
highcharts.Map is undefined
occurs, because you are including modules/maps.js but this file cannot be found. The module you want to include instead is named map.js. This file is located in the directory /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/.
If you want to implement the Highcharts Maps demo in Meteor, follow these seven steps:
Run the command meteor add highcharts:highcharts-meteor.
Run meteor in order to initialise the highcharts-container.
Open the file /client/config.highcharts.json and insert the following Highcharts configuration:
{
"version": "4.2.1",
"base": "highcharts.js",
"adapter": "default",
"modules": [
"highmaps.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/drilldown.js",
"modules/map.js",
"themes/gray.js"
]
}
Load the US map in your HTML head:
<head>
<title>meteor-highcharts-demo</title>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
Implement a container which wraps your map:
<template name="map">
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
Instanciate the map:
if (Meteor.isClient) {
var data = [{
"value": 438,
"code": "nj"
}, {
"value": 387.35,
"code": "ri"
}, {
"value": 312.68,
"code": "ma"
}, {
"value": 271.4,
"code": "ct"
}, {
"value": 209.23,
"code": "md"
}, {
"value": 195.18,
"code": "ny"
}, {
"value": 154.87,
"code": "de"
}, {
"value": 114.43,
"code": "fl"
}, {
"value": 107.05,
"code": "oh"
}, {
"value": 105.8,
"code": "pa"
}, {
"value": 86.27,
"code": "il"
}, {
"value": 83.85,
"code": "ca"
}, {
"value": 72.83,
"code": "hi"
}, {
"value": 69.03,
"code": "va"
}, {
"value": 67.55,
"code": "mi"
}, {
"value": 65.46,
"code": "in"
}, {
"value": 63.8,
"code": "nc"
}, {
"value": 54.59,
"code": "ga"
}, {
"value": 53.29,
"code": "tn"
}, {
"value": 53.2,
"code": "nh"
}, {
"value": 51.45,
"code": "sc"
}, {
"value": 39.61,
"code": "la"
}, {
"value": 39.28,
"code": "ky"
}, {
"value": 38.13,
"code": "wi"
}, {
"value": 34.2,
"code": "wa"
}, {
"value": 33.84,
"code": "al"
}, {
"value": 31.36,
"code": "mo"
}, {
"value": 30.75,
"code": "tx"
}, {
"value": 29,
"code": "wv"
}, {
"value": 25.41,
"code": "vt"
}, {
"value": 23.86,
"code": "mn"
}, {
"value": 23.42,
"code": "ms"
}, {
"value": 20.22,
"code": "ia"
}, {
"value": 19.82,
"code": "ar"
}, {
"value": 19.4,
"code": "ok"
}, {
"value": 17.43,
"code": "az"
}, {
"value": 16.01,
"code": "co"
}, {
"value": 15.95,
"code": "me"
}, {
"value": 13.76,
"code": "or"
}, {
"value": 12.69,
"code": "ks"
}, {
"value": 10.5,
"code": "ut"
}, {
"value": 8.6,
"code": "ne"
}, {
"value": 7.03,
"code": "nv"
}, {
"value": 6.04,
"code": "id"
}, {
"value": 5.79,
"code": "nm"
}, {
"value": 3.84,
"code": "sd"
}, {
"value": 3.59,
"code": "nd"
}, {
"value": 2.39,
"code": "mt"
}, {
"value": 1.96,
"code": "wy"
}, {
"value": 0.42,
"code": "ak"
}];
Template.map.onRendered(function() {
// Make codes uppercase to match the map data
_.each(data, (el) => el.code = el.code.toUpperCase());
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
}
Run meteor to start your app.
I have prepared also a demo repository, which is hosted on GitHub.