I am creating a pie chart using d3 to load a pie chart -
var pie = new d3pie(
// pie control Json
);
This is working great however I am looking to do logic after the pie has fully rendered.
I have tried to use the when done logic (like when doing an ajax call) like so -
$.when(pie).done(function () {
// further logic to be completed after pie has loaded
});
However this does not work in that it just steps into the when clause even tho the pie has not loaded fully. How can I do this?
You are looking for the onload callback:
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
Full code sample:
<html>
<head></head>
<body>
<div id="pieChart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "Lots of Programming Languages",
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"text": "A full pie chart to show off label collision detection and resolution.",
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [
{
"label": "JavaScript",
"value": 264131,
"color": "#2484c1"
},
{
"label": "Ruby",
"value": 218812,
"color": "#0c6197"
},
{
"label": "Java",
"value": 157618,
"color": "#4daa4b"
},
{
"label": "PHP",
"value": 114384,
"color": "#90c469"
},
{
"label": "Python",
"value": 95002,
"color": "#daca61"
},
{
"label": "C+",
"value": 78327,
"color": "#e4a14b"
},
{
"label": "C",
"value": 67706,
"color": "#e98125"
},
{
"label": "Objective-C",
"value": 36344,
"color": "#cb2121"
},
{
"label": "Shell",
"value": 28561,
"color": "#830909"
},
{
"label": "Cobol",
"value": 24131,
"color": "#923e99"
},
{
"label": "C#",
"value": 100,
"color": "#ae83d5"
},
{
"label": "Coldfusion",
"value": 68,
"color": "#bf273e"
},
{
"label": "Fortran",
"value": 218812,
"color": "#ce2aeb"
},
{
"label": "Coffeescript",
"value": 157618,
"color": "#bca44a"
},
{
"label": "Node",
"value": 114384,
"color": "#618d1b"
},
{
"label": "Basic",
"value": 95002,
"color": "#1ee67b"
},
{
"label": "Cola",
"value": 36344,
"color": "#b0ec44"
},
{
"label": "Perl",
"value": 32170,
"color": "#a4a0c9"
},
{
"label": "Dart",
"value": 28561,
"color": "#322849"
},
{
"label": "Go",
"value": 264131,
"color": "#86f71a"
},
{
"label": "Groovy",
"value": 218812,
"color": "#d1c87f"
},
{
"label": "Processing",
"value": 157618,
"color": "#7d9058"
},
{
"label": "Smalltalk",
"value": 114384,
"color": "#44b9b0"
},
{
"label": "Scala",
"value": 95002,
"color": "#7c37c0"
},
{
"label": "Visual Basic",
"value": 78327,
"color": "#cc9fb1"
},
{
"label": "Scheme",
"value": 67706,
"color": "#e65414"
},
{
"label": "Rust",
"value": 36344,
"color": "#8b6834"
},
{
"label": "FoxPro",
"value": 32170,
"color": "#248838"
}
]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
},
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
});
</script>
</body>
</html>
Related
I have treemap chart and it has two values Squadra2 with value of 13778.00 and Squadra1 with value of 16.00
Now when treemap renders it takes percentage difference between them and split them accordingly BUT now I ended up in situation where I need to be sniper precise in order to select Squadra1 with value of 16.00
As you can see in the picture
Is there a possibility to declare for example minimal width of Squadra1, and to disallow it to go under that value ( to remain clickable ) ?
Please let me know, thank you
{
"chart": {
renderTo:"container",
"backgroundColor": "#FFFFFF"
},
"colorAxis": {
"labels": {
"enabled": false
},
"tickLength": 0,
"gridLineWidth": 0,
"min": 0,
"max": 20,
"stops": [
[
-0.001,
"#ffffff"
],
[
0.5,
"#7cb5ec"
],
[
0.501,
"#7cb5ec"
],
[
0.499,
"#ffffff"
],
[
1,
"#434348"
],
[
1.001,
"#434348"
]
]
},
"legend": {
"enabled": true,
"itemStyle": {
"color": "#FFF"
}
},
"tooltip": {},
"series": [
{
"drillUpButton": {
"position": {
"align": "center",
"verticalAlign": "bottom"
},
"theme": {
"fill": "white",
"stroke-width": 1,
"stroke": "silver",
"r": 2,
"style": {
"fontSize": "12px"
},
"states": {
"hover": {}
}
}
},
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levelIsConstant": false,
"levels": [
{
"level": 1,
"dataLabels": {
"enabled": true
},
"borderWidth": 6,
"borderColor": "#FFFFFF"
}
],
"data": [
{
"id": "id_0",
"name": "Squadra1",
"parentName": "Squadra1"
},
{
"id": "id_0_0",
"name": "ACC",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 1,
"colorValue": 1.8117836848479765
},
{
"id": "id_0_1",
"name": "FEB",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 0,
"colorValue": 5.48633338681632
},
{
"id": "id_0_2",
"name": "MAG",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 8,
"colorValue": 3.4398769612396007
},
{
"id": "id_0_3",
"name": "PAM",
"parent": "id_0",
"parentName": "Squadra1",
"scale": 0,
"value": 7,
"colorValue": 2.775814171372472
},
{
"id": "id_1",
"name": "Squadra2",
"parentName": "Squadra2"
},
{
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 13778,
"colorValue": 13.595706940649173
}
],
"events": {},
"_colorIndex": 0
}
],
"subtitle": {
"text": "",
"align": "",
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
}
},
"title": {
"text": "",
"align": "",
"style": {
"color": "",
"fontWeight": "none",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none"
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"color": "",
"fontSize": "",
"fontFamily": "",
"fontStyle": "none",
"textDecoration": "none",
"fontWeight": "none"
},
"position": {
"align": "",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"series": {
"turboThreshold": 5000,
"colorByPoint": false
}
}
}
Link of fiddle
http://jsfiddle.net/3k5fmrut/2/
The easiest way to achieve it is to set a smaller value for Squadra2 and add an additional property with real value to point object that can be used in tooltip.formatter callback to present the real value in the tooltip. Check demo and code posted below.
Code:
data:
{
"id": "id_1",
"name": "Squadra2",
"realValue": 13778,
"parentName": "Squadra2"
}, {
"id": "id_1_0",
"name": "ACC",
"parent": "id_1",
"parentName": "Squadra2",
"scale": 10,
"value": 137.78,
"colorValue": 13.595706940649173
}
tooltip.formatter:
tooltip: {
formatter: function() {
return this.point.realValue;
}
}
Demo:
https://jsfiddle.net/BlackLabel/trz96fy7/
You can define your own algorithm to build the treemap : Highcharts treemap series
You could choose an algorithm such that each element has a minimum width and height, and the biggest elements share the remaining space.
I have a line chart, quite basic (see below for a simplified example that works on the Vega Editor). Basically, it draws lines, the X axis is successive dates, the Y axis is some numerical values.
I am trying to add labels for some of the data points on the line, with the value of Y at that point. Only for some of the data points, because some charts can be for over a year, so there can be hundreds of days (X values).
This is by the way how labels are put on the X axis automatically by Vega. If there are too many X values, it does not display every day, it says e.g. "Jan 1", then "Jan 8", then "Jan 15", etc. (nice one!)
Just for reference, with C3 (a charting library for D3), I used the following to draw one label out of every 7 data point:
data: {
json: data.data,
type: 'spline',
labels: {
format: function(v, id, i, j) {
if ( i % 7 === 3 ) {
return d3.format('.2f')(v);
}
}
...
Unfortunately, I have no idea where to start. I did not find any such example, and could not find anything related in the documentation.
Just for reference, here is an example chart to which I'd like to add these labels:
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 500,
"height": 250,
"autosize": {
"type": "fit",
"resize": true
},
"data": [{
"name": "table",
"format": {
"parse": {
"date": "date",
"value": "number"
}
},
"values": [
{ "date": "2017-09-01", "value": "12.34", "what": "one" },
{ "date": "2017-09-01", "value": "4.34", "what": "two" },
{ "date": "2017-09-02", "value": "13.34", "what": "one" },
{ "date": "2017-09-02", "value": "13.34", "what": "two" },
{ "date": "2017-09-03", "value": "4.34", "what": "one" },
{ "date": "2017-09-03", "value": "15.34", "what": "two" },
{ "date": "2017-09-04", "value": "15.34", "what": "one" },
{ "date": "2017-09-04", "value": "5.34", "what": "two" },
{ "date": "2017-09-05", "value": "16.34", "what": "one" },
{ "date": "2017-09-05", "value": "6.34", "what": "two" },
{ "date": "2017-09-06", "value": "17.34", "what": "one" },
{ "date": "2017-09-06", "value": "17.34", "what": "two" },
{ "date": "2017-09-07", "value": "18.34", "what": "one" },
{ "date": "2017-09-07", "value": "8.34", "what": "two" },
{ "date": "2017-09-08", "value": "18.34", "what": "one" },
{ "date": "2017-09-08", "value": "14.34", "what": "two" },
{ "date": "2017-09-09", "value": "9.34", "what": "one" },
{ "date": "2017-09-09", "value": "14.34", "what": "two" },
{ "date": "2017-09-10", "value": "20.34", "what": "one" },
{ "date": "2017-09-10", "value": "4.34", "what": "two" }
]
}],
"scales": [{
"name": "x",
"type": "utc",
"range": "width",
"domain": {"data": "table", "field": "date"}
}, {
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "value"}
}, {
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "what"}
}],
"axes": [{
"orient": "bottom",
"scale": "x",
"encode": {
"labels": {
"interactive": true,
"update": {
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}}}
}, {
"orient": "left",
"scale": "y"
}],
"marks": [{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "what"
}
},
"marks": [{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "date"},
"y": {"scale": "y", "field": "value"},
"stroke": {"scale": "color", "field": "what"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}]
}]
}
Vega has a property called tickCount that can be added to your axes definitions. Adding this to your y-axis must solve your case:
{
"orient": "left",
"scale": "y",
"tickCount": 4
}
You could use a signal as well if it should be dynamic.
The feature is even more powerful than illustrated. Go check out the docs for other options in below link:
https://vega.github.io/vega/docs/axes/
I have a pie chart that has a single series with all the data it shows, this data has objects of two types, source and destiny. By default the legends that appear are of each object name, but I need that the legends group the objects by type, source objects between them and destiny objects between them. I saw something similar in this post: Grouping Legends in Highcharts but it does not work for pie charts, I need that same thing but it works with pie charts. I'm using highcharts 4.2.6 .
Here is my pie chart with all its legends, I need show only two legends, one for blue section and the other one for light-blue section.
There is an example of my series object:
{
"id": "Group11App36",
"data": [
{
"name": "apple.com",
"y": 2158959,
"origin": "destiny",
"color": "#195580"
},
{
"name": "machtv.info",
"y": 46442,
"origin": "destiny",
"color": "#195580"
},
{
"name": "10.10.10.151",
"y": 462724,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.213",
"y": 133774,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.120",
"y": 111039,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.13.99",
"y": 69530,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.9",
"y": 66338,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.36",
"y": 64559,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.8.251",
"y": 57293,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.196",
"y": 53450,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.191",
"y": 44372,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.119",
"y": 43556,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.149",
"y": 36618,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.139",
"y": 35831,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.42",
"y": 35316,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.17",
"y": 34151,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.125",
"y": 33135,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.10.117",
"y": 32885,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.11.93",
"y": 31926,
"origin": "source",
"color": "#8fbbda"
},
{
"name": "10.10.12.102",
"y": 31816,
"origin": "source",
"color": "#8fbbda"
}
]
}
Thanks in advance!
i don't think its possible without a custom legends
here is an example (with custom legends)
var data = [{ "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" }];
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Banyantmaya out'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
}
},
showInLegend: false
}
},
series: [{
colorByPoint: true,
data: data
}]
}, function(chart) {
$legend = $('#customLegend');
var types = chart.series[0].data.reduce((arr, {origin, color}, i) => {
var obj = arr.find(o => o.origin === origin);
if (obj) obj.indexes.push(i);
else arr.push({ origin, color, indexes: [i] });
return arr;
}, []);
types.forEach(type => {
$legend.append('<label class="serieLabel" data-name="' + type.origin + '"><span class="symbol" style="background-color:' + type.color + '"></span><span class="name">' + type.origin + '</span></label>');
});
$('#customLegend .serieLabel').click(function() {
var indexes = types.find(t => t.origin === this.dataset.name).indexes;
$(this).toggleClass('hide');
indexes.forEach((inx, i) => {
var point = chart.series[0].data[inx];
point.setVisible(!point.visible, i === indexes.length - 1);
});
});
});
div#customLegend { background-color: #fff; text-align: center; padding-bottom: 20px; }
.symbol { width: 12px; height: 12px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; }
.name { margin: 0 20px 0 10px; display: inline-block; vertical-align: text-bottom; font-weight: bold; font-size: 14px; }
.serieLabel { cursor: pointer; text-transform: capitalize; }
.serieLabel.hide { opacity: 0.2; }
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<div id="customLegend"></div>
I want to get the value of text a "Label" and the type with JSON from this JSon text :
{
"cells": [{
"type": "devs.Model",
"size": {
"width": 40,
"height": 40
},
"inPorts": [""],
"outPorts": [""],
"position": {
"x": 168,
"y": 99
},
"angle": 0,
"id": "c7cf7b2d-3b54-4dd1-9cbf-7a37a72559fc",
"z": 1,
"attrs": {
".label": {
"text": "aa",
"ref-x": 0.4,
"ref-y": 0.2
},
"rect": {
"fill": "#2ECC71"
},
".inPorts circle": {
"fill": "#16A085",
"magnet": "active",
"type": "input"
},
".outPorts circle": {
"fill": "#E74C3C",
"type": "output"
},
".inPorts>.port0>.port-label": {
"text": ""
},
".inPorts>.port0>.port-body": {
"port": {
"id": "in8",
"type": "in"
}
},
".inPorts>.port0": {
"ref": ".body",
"ref-y": 0.5
},
".outPorts>.port0>.port-label": {
"text": ""
},
".outPorts>.port0>.port-body": {
"port": {
"id": "out9",
"type": "out"
}
},
".outPorts>.port0": {
"ref": ".body",
"ref-y": 0.5,
"ref-dx": 0
}
}
}, {
"type": "link",
"source": {},
"target": {},
"id": "1e977b11-c003-4c22-ba48-c04994f63c79",
"z": 2,
"attrs": {}
}]
}
For the label , I do : document.write(jsonString.cells[0].attrs.label.text);
and for the type : (jsonString.cells[0].attrs.label.text);
var jsonString = JSON.stringify(graph);
document.write(jsonString.cells[0].type);
I have this graph :
http://jsfiddle.net/ZKGZb/
$(document).ready(function() {
chart16 = new Highcharts.Chart({
"chart": {
"renderTo": "right-22",
"type": "column",
"width": 550,
"height": 400,
},
"xAxis": {
"categories": ["a very long long text ", "2another long text", "dda", "bbb", "aaa"],
"allowDecimals": "0",
"title": {
"text": "Hello world",
"offset": -350,
"align": "left",
"style": {
"color": "red"
}
},
"labels":{"useHtml": true }
},
"yAxis": {
"allowDecimals": false,
"labels": {
"overflow": "justify"
},
"title": {
"text": " "
},
"max": 20
},
"tooltip": {
"formatter": function() {
return this.series.name + this.y + "";
}
},
"title": {
"text": "a very long long text",
"margin": 50
},
"plotOptions": {
"column": {
"groupPadding": null,
"borderWidth": null,
"dataLabels": {
"enabled": null,
"color": null,
"style": {
"fontSize": null,
"font-weight": "bold"
},
"formatter": function() {
return this.series.name + this.y + "";
}
}
}
},
"exporting": {
"enabled": false
},
"credits": {
"enabled": false
},
"labels": {
"enabled": null
},
"legend": {
"enabled": 0,
"layout": "vertical",
"align": "top",
"verticalAlign": "top",
"y": 0,
"x": 0,
"floating": false,
"borderWidth": 1,
"backgroundColor": "#FFFFFF",
"shadow": true
},
"series": [{
"data": [{
"y": 19,
},
{
"y": 0,
"name": ""},
{
"y": 0,
"name": ""},
{
"y": 1,
"name": ""},
{
"y": 0,
"name": ""}],
"name": "Total: "}]
}, function(chartObj) {});
});
How do I make the categories labels look good? I need to be able to show the whole text of each category but I cannot find a way to do it .
I tried adding and using "useHtml" option but it didn't work
Thanks in advance
"xAxis": {
"categories": ["a very long long text ", "2another long text", "dda", "bbb", "aaa"],
"allowDecimals": "0",
"title": {
"text": "Hello world",
"offset": -350,
"align": "left",
"style": {
"color": "red"
}
},
Removing the "title=>offset" fixes it..