I am trying to create sunburst chart in d3.js. What I want is if the value is positive I should get green arc. and when the the value is negative the arc should be red. Another issue I am facing is whenever I enter negative value that arc/slice just hide. I also want to show my that slice with negative value.
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #562F34;
background: #33573D;
}
</style>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
<div id="container"></div>
<script>
file2 = [
{
"name": "KES100",
"fill": "#33573D",
"children": [
{
"name": "TEXTILE",
"id": "textileId",
"children": [
{
"continent": "textileId",
"name": "COST",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "COOT",
"value": "10",
"points": "30"
},
{
"continent": "textileId",
"name": "AHTM",
"value": "10",
"points": "30"
}
]
},
{
"name": "OIL",
"id": "oilId",
"children": [
{
"continent": "oilId",
"name": "PSO",
"value": "20"
},
{
"continent": "oilId",
"name": "BYCO",
"value": "20"
},
{
"continent": "oilId",
"name": "MPCL",
"value": "10"
}
]
}
]
}
]
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile('file2.json',
function (data) {
var color1 = [255, 0, 0];
var color2 = [0, 0, 255];
anychart.color.blend(color1, color2, 0.2);
var chart = anychart.sunburst(data, "as-tree");
chart.calculationMode("parent-independent");
chart.labels().format('{%Name}\n{%Value}');
console.log(chart.labels())
chart.tooltip().format('{%Name}:{%Value}');
chart.container("container");
chart.draw();
});
});
</script>
The "value" should always be positive as it affects the size of the node directly. You can provide negative values in the data and then preprocess it. Copy the positive/negative value to another custom field of the item data, and leave the absolute value in the "value" field. Then you can apply condition coloring by a callback function in fill() chart method. For details, check the sample based on your snippet.
Related
I'm using Highcharts 5 in styled mode, when I create a radar chart in this mode I get a circle around the outside of the chart.
Styled Mode Example
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/highcharts-more.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
$(function() {
Highcharts.chart('container', {
"chart": {
"polar": true,
},
"exporting": {
"enabled": true,
"filename": "bar",
"url": "http://export.highcharts.com",
"chartOptions": {
"chart": {
"backgroundColor": "white"
}
}
},
"plotOptions": {
"pie": {
"dataLabels": {
"enabled": true
}
}
},
"series": [{
"data": [
[1379790000],
[1330780000],
[324897000],
[260581000],
[206927000],
[194772000],
[86987000],
[161401000],
[146727405],
[126693000]
],
"id": "series-7"
}],
"xAxis": {
"categories": ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
"title": {},
"labels": {
"rotation": 0,
"enabled": true
},
"lineWidth": 0,
"tickmarkPlacement": "on"
},
"yAxis": {
"title": {},
"gridLineInterpolation": "polygon",
"lineWidth": 0
},
"title": {
"text": "Population of Countries"
},
"subtitle": {
"text": "Bar Chart"
},
"loading": false
});
});
http://jsfiddle.net/8pv79gy9/
However if I run the same configuration in the normal mode used by Highcharts previously I don't get the circle round the outside.
http://jsfiddle.net/fex0hnoy/
Any suggestions or solution welcome, this maybe a Highcharts 5 issue.
In a styled mode lineWidth property is replaced by css stroke-width.
If you want to set axis line width to 0, then you have to use css for axis line class (by default it is 1)
.highcharts-xaxis .highcharts-axis-line {
stroke-width: 0;
}
example: http://jsfiddle.net/8pv79gy9/1/
Or can use yaxis as Circle:
"yAxis": {
"title": {},
"gridLineInterpolation": "circle",
"lineWidth": 0
},
http://jsfiddle.net/8pv79gy9/2/
I am trying to render a tree with certain childs in a div using javascript and html. I am wondering why it is not rendering given all the objects are created and everything is fine in read of tree and parent
from Json (see "data" in my code).
NOTE:I have Layout.cshtml and it shares the top most menu which is "Application Name" at the top and is like this http://prntscr.com/7czhas
Could some one please let me know why tree don't appear in my div with ID:jqxTree
My code is 2nd edit:
I am trying to render a tree with certain childs in a div using javascript and html. I am wondering why it is not rendering given all the objects are created and everything is fine in read of tree and parent
from Json (see "data" in my code).
Could some one please let me know why tree don't appear in my div with ID:jqxTree
My code is 2nd edit:
#{
ViewBag.Title = "TreeCreation";
}
<h2>TreeCreation</h2>
<head>
<title></title>
<script src="~/bootstrap/js/LiveMap/Ajax/JsonStringCarryingData/jqx-all.js"></script>
<link href="~/bootstrap/css/LiveMap/jqx.base.css" rel="stylesheet" />
<link href="~/bootstrap/css/LiveMap/jqx.energyblue.css" rel="stylesheet" />
</head>
<body>
<div id='jqxTree' style="background-color:green; height:400px;width:200px;">
</div>
<script type="text/javascript">
var data = [
{
"text": "Chocolate Beverage",
"id": "1",
"parentid": "-1"
}, {
"id": "2",
"parentid": "1",
"text": "Hot Chocolate"
}, {
"id": "3",
"parentid": "1",
"text": "Peppermint Hot Chocolate"
}, {
"id": "4",
"parentid": "1",
"text": "Salted Caramel Hot Chocolate"
}, {
"id": "5",
"parentid": "1",
"text": "White Hot Chocolate"
}, {
"id": "6",
"text": "Espresso Beverage",
"parentid": "-1"
}, {
"id": "7",
"parentid": "6",
"text": "Caffe Americano"
}, {
"id": "8",
"text": "Caffe Latte",
"parentid": "6"
}, {
"id": "9",
"text": "Caffe Mocha",
"parentid": "6"
}, {
"id": "10",
"text": "Cappuccino",
"parentid": "6"
}, {
"id": "11",
"text": "Pumpkin Spice Latte",
"parentid": "6"
}, {
"id": "12",
"text": "Frappuccino",
"parentid": "-1"
}, {
"id": "13",
"text": "Caffe Vanilla Frappuccino",
"parentid": "12"
}, {
"id": "15",
"text": "450 calories",
"parentid": "13"
}, {
"id": "16",
"text": "16g fat",
"parentid": "13"
}, {
"id": "17",
"text": "13g protein",
"parentid": "13"
}, {
"id": "14",
"text": "Caffe Vanilla Frappuccino Light",
"parentid": "12"
}]
function run() {
// alert('Inside buidldata');
var source = [];
var items = [];
// build hierarchical source.
alert('data length:' + data.length);
for (i = 0; i < data.length; i++) {
var item = data[i];
var label = item["text"];
var parentid = item["parentid"];
var id = item["id"];
if (items[parentid]) {
var item = { parentid: parentid, label: label, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
}
else {
items[id] = { parentid: parentid, label: label, item: item };
source[id] = items[id];
}
}
return source;
}
// create jqxTree
var source = run();
alert('source:' + source);
$('#jqxTree').jqxTree(
{
source: source, width: '350px'
});
</script>
</body>
It also gives 2 errors http://prntscr.com/7czj92 and it makes me feel that there is some problem in this jqx-all.js file which i copy and pasted from the link http://jqwidgets.com/public/jqwidgets/jqx-all.js . Please help me i am stuck here since last 4 days
Add reference to the required js files.
i.e http://jqwidgets.com/public/jqwidgets/jqx-all.js - Will contain the source for all jq widgets.
The files required are jqx-all.js, jqx.base.css and jqx.energyblue.css.
Add reference to the files as shown below.
<script type='text/javascript' src="jqx-all.js"></script>
<link rel="stylesheet" type='text/css' href='jqx.base.css'>
<link rel="stylesheet" type='text/css' href='jqx.energyblue.css'>
Note : The above code is assuming that the required files are in the same folder as the current html.
If you are using only jqxtree, get the specific files from the vendor.
Please refer the working fiddle here http://jsfiddle.net/sherin81/ccegq/274/
The external resources section on the left pane will show you the references required to run the code.
I am working on chart library,
I have json format, which will be coming from server, year and month format
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
}
Now I need to pass present and target values in a array format.
the data must be passed or parsed like below.
How to do I do this in javascript and jquery?
I tried all the available solutions, since I am new to the javascript world!
Expected result
var legendsText = [["present name1","target name1"]],
jsonFormat = [[18, 18],[15,18],[36, 18]];
FIDDLE
This is the fiddle our friend Eli Gassert has created, it is the closeset one
http://http://jsfiddle.net/Yq3DW/126/
but it is loading only present values of all 3 months
i want present and target values of each name.
For example
name1 link clicked, chart should load name1 present and target for all 3 months.
name2 link clicked, chart should load name2 present and target for all 3 months.
name3 link clicked, chart should load name3 present and target for all 3 months.
My JSON format which is coming dynamically from server
data={
"perspective": "something",
"year": "2014",
"measures": [
{
"id": 1,
"name": "some name",
"target": "200",
"responsiblePerson": null
},
{
"id": 2,
"name": "some name",
"target": "100",
"responsiblePerson": null
}
],
"values": {
"jan": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "21",
"target": "22",
"status": "red"
},
{
"id": 3,
"name": "name3",
"present": "50",
"target": "50",
"status": "yellow"
}
],
"feb": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "21",
"target": "22",
"status": "red"
},
{
"id": 3,
"name": "name3",
"present": "50",
"target": "50",
"status": "yellow"
}
],
"mar": [
{
"id": 1,
"name": "name1",
"present": "18",
"target": "18",
"status": "yellow"
},
{
"id": 2,
"name": "name2",
"present": "22",
"target": "22",
"status": "yellow"
},
{
"id": 3,
"name": "name3",
"present": "52",
"target": "50",
"status": "yellow"
}
]
}
}
HTML
<div id="chart"></div>
JS
var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
legendsText.push(data.measures[i].name);
legendsText = [legendsText];
var rows = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
row.push(data.values[i][j].present);
}
rows.push(row);
}
rows = legendsText.concat(rows.sort(function (a, b) { }));
console.log(rows);
var chart = c3.generate({
bindto: '#chart',
data: {
rows: rows,
type: 'bar',
}
});
Any help is appreciated.
Here's an updated fiddle that transforms your data to the results: http://jsfiddle.net/Yq3DW/119/
Key aspects:
Your Legend Text can be gotten dynamically from your measures data. The format for the legendsText is an "array of arrays" so that's why I wrap it in [...] at the end of the loop.
var legendsText = [];
for(var i = 0; i != data.measures.length; ++i)
legendsText.push(data.measures[i].name);
legendsText = [legendsText];
Your rows can be gotten from your "values" data. But because it's not an array, like measures you need to use a for each loop instead of for loop:
var rows = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
row.push(data.values[i][j].present);
}
rows.push(row);
}
EDIT: Updated question. To show just one label's worth of data but show both values for that data, and give nice labels: http://jsfiddle.net/Yq3DW/130/
The key here:
Switch to columns instead of rows, allowing one "row" of data to stand-in for the label indexer
Only add the data if the name in the value data matches the name you're searching for (had to update your data JSON so the names matched)
Had to use a 'tick' formatter to format the labels from 1-3 to jan, feb, mar. You can further customize it by using upper case/proper case conversions. That is outside the scope of this question and I'm not including it here. If you need further formatting, search for an answer first and if you can't find it, start a new Q.
Display a dynamic list of links to click that calls your loadData function to change the data in the chart between the various measure names
HTML:
<ul id="links"></ul>
<div id="chart"></div>
JS:
var $links = $('#links');
$links.html('');
for(var i = 0; i != data.measures.length; ++i)
{
(function()
{
var name = data.measures[i].name;
$('<li></li>')
.text(data.measures[i].name)
.click(function() { loadData(name); })
.appendTo($links);
})();
// legendsText.push(data.measures[i].name);
}
function loadData(name)
{
//var legendsText = [ ["present", "target"] ];
var columns = [ ["labels"], [ "present" ], [ "target" ]];
var labels = [];
for(var i in data.values)
{
var row = []
for(var j = 0; j != data.values[i].length; ++j)
{
if(data.values[i][j].name == name)
{
labels.push(i);
columns[0].push(labels.length);
columns[1].push(data.values[i][j].present);
columns[2].push(data.values[i][j].target);
}
}
//rows.push(row);
}
console.log(columns);
//rows = legendsText.concat(rows.sort(function (a, b) { }));
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'labels',
columns: columns,
type: 'bar',
},
axis: {
x: {
tick: {
format: function(index) { return labels[index-1]; }
}
}
}
});
}
I am trying to make horizontal grouped stacked bar graph in NVD3.js.
Everything works great until I got a "gap" in my JSON data like bellow:
[{
"key": "Education & news",
"values": [{
"label": "2014-02-26",
"value": 702
}, {
"label": "2014-02-27",
"value": 204
}, {
"label": "2014-02-28",
"value": 3213
}]
}, {
"key": "Entertainment",
"values": [{
"label": "2014-02-26",
"value": 21
},
//Missing entry for 2014-02-27
{
"label": "2014-02-28",
"value": 3213
}]
}]
The error which I got is Uncaught TypeError: Cannot read property '1' of undefined in d3.js. The example and the error of the problem I put on http://jsfiddle.net/vaa3V/
Can I somehow fill gaps automatically?
#shabeer90's comment is on track. You can use underscore.js to get the domain values and apply a sensible default.
//Find domain values
DEFAULT = 0
defaults = _.chain(data)
.pluck('values')
.flatten().pluck('label')
.uniq()
.value()
.map( function(item){ return {label:item, value:DEFAULT} })
// Group by 'label' so we can apply defaults
defaults = _.groupBy(defaults, 'label'))
// Apply defaults
_.each(data, function (series) {
grouped = _.groupBy(series.values, 'label')
series.values = _.flatten( _.defaults(grouped, defaults))
})
Should give you:
[
{
"key": "Education & news",
"values": [
{
"label": "2014-02-26",
"value": 702
},
{
"label": "2014-02-27",
"value": 204
},
{
"label": "2014-02-28",
"value": 3213
}
]
},
{
"key": "Entertainment",
"values": [
{
"label": "2014-02-26",
"value": 21
},
{
"label": "2014-02-28",
"value": 3213
},
{
"label": "2014-02-27",
"value": 0
}
]
}
]
I have 2 json files,services.json and services_show.json.At page load am fetching the data from services.json and it working properly.On a button click,i need to fetch the contents from service_show.json and append to the services array but it does not work.
var beautyApp = angular.module('findbeauty', []);
beautyApp.controller('beautycntrl',function($scope,$http){
$http.get('http://localhost/Find-Beauty/media/services.json').success(function(data) {
$scope.services=data.services;
$scope.services1=data.services1;
});
$scope.Add = function(){
$http.get('http://localhost/Find-Beauty/media/services_show.json').success(function(data) {
console.log(angular.toJson(data.services));
$scope.services.push(data.services);
});
};
$scope.ViewMore = function(){
});
Services.json
{
"services":[
{
"name": "Arun",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/prfilepic1.png",
"percentage": "90%"
},
],
"services1":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/profilepic4.png",
"percentage": "25%"
},
]
}
service_show.json
{
"services":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/profilepic4.png",
"percentage": "5%"
},
],
"services1":[
{
"name": "Schnitt & Föhnen",
"gender": "Damen",
"duration": "1.5 Stunden",
"price": "€65,00",
"imagepath": "media/images/prfilepic1.png",
"percentage": "50%"
},
]
}
How can i push the services_show.json data to $scope.services ? Any Help?
Array.prototype.push.apply() can be used for merging two arrays.
Merge the second array into the first one
$scope.services.push.apply($scope.services, data.services);
You need to push one item at a time, like
angular.forEach(data.services,function(item) {
$scope.services.push(item);
});
You also can use concat:
Here I have my own code: Please refer
$http.get('store/LoadAlbums/', {'iCategoryID': iCategoryID}).then(function (data) {
for (var i = 0; i < $scope.result.mainalbums.length; i++) {
if($scope.result.mainalbums[i].iCategoryID == iCategoryID){
$scope.result.mainalbums[i].albums = $scope.result.mainalbums[i].albums.concat(data.data.albums);
$scope.result.mainalbums[i].totalAlbumCategory = $scope.result.mainalbums[i].albums.concat(data.data.totalAlbumCategory);
$scope.result.mainalbums[i].loadmore = $scope.result.mainalbums[i].albums.concat(data.data.loadmore);
$scope.result.mainalbums[i].newpage = $scope.result.mainalbums[i].albums.concat(data.data.newpage);
}
} });