I am getting as a result a badly rendered pie chart. Why is this happening? Am I doing smth wrong? What can I do to have a better border? I am corrently using v3.5.17.
var w = 500,
h = 500;
//var data = [10, 80, 50, 60, 30, 42, 27, 77];
var max = d3.max(data);
var min = d3.min(data);
var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
console.log(color(50));
var canvas = d3.select("#piegraphic").append("svg")
.attr("width", w)
.attr("height", h);
var group = canvas.append("g")
.attr("transform", "translate(200, 200)");
var r = 150;
var arc = d3.svg.arc()
.outerRadius(r - 10)
.innerRadius(0);
var arc2 = d3.svg.arc()
.outerRadius(r + 10)
.innerRadius(0);
var pie = d3.layout.pie()
.value(function (d) {
return d.count;
});
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
var asdf = arcs.append("path")
.attr("d", arc)
.attr("fill", function (d) {
return color(d.data);
})
asdf.on("mouseover", function (d) {
d3.select(this).transition().duration(200).attr("d", arc2);
});
asdf.on("mouseout", function (d, i) {
d3.select(this).transition().duration(200).attr("d", arc);
});
var circle = group.append("circle")
.attr({
"cx": 0,
"cy": 0,
"r": 140,
"fill": "none",
"stroke": "#fff",
"stroke-width": 2
});
I tried other approaches but I always getting the same result I dont know what else I can try. Thanks in advance
EDIT
My data looks like this :
[{count:106136313.3, label : "RR" },{count:136313.3, label : "RA" },{count:1061313.3, label : "TE" }]
Related
I'm trying to dynamically set the width of each x point based on the number of non-zero stacks with that x value.
Example:
What I have:
What I want:
I want to get rid of the empty spaces by lowering the width of each date. (Sep 7 should have width 2, Sep 8 and Sep 9 should have width 1, instead of all 3 dates having width 3)
Here's a more extreme example, lots of wasted space:
I've looked into variwide charts but I can't seem to find an example of a variwide chart with both stacking and grouping.
The closest question I was able to find on stackoverflow is Display Different Number of Groups in Highcharts Stacked Column Graph but that answer doesn't change the width of the points, it just centers the bars.
JSFiddle: http://jsfiddle.net/t3z76o4b/3/
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
},
legend: {
enabled: false
},
title: {
text: 'Fruits by day'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
formatter: function() {
var placeholder = Number(this.value);
if (!!placeholder) {
return ""
}
//var obj = data[this.value];
if (this.axis.series[0].levelNumber == 1 && !this.isFirst) {
return '';
} else {
return this.value;
}
}
},
crosshair: true,
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: "Apples",
stack: "Apples",
date: "7 Sep 2018",
data: [{
color: "rgba(51,193,59,1)",
name: "7 Sep 2018",
y: 1
},
{
color: "rgba(51,193,50,0.4)",
name: "7 Sep 2018",
y: 2
}],
},
{
name: "Blueberries",
stack: "Blueberries",
date: "7 Sep 2018",
data: [{
color: "rgba(51,50,250,1)",
name: "7 Sep 2018",
y: 3
},
{
color: "rgba(51,50,250,0.4)",
name: "7 Sep 2018",
y: 1
}],
},
{
name: "Oranges",
stack: "Oranges",
date: "8 Sep 2018",
data: [{
color: "rgba(250,193,10,0.5)",
name: "8 Sep 2018",
y: 1
}, ],
},
{
name: "Blueberries",
stack: "Blueberries",
date: "9 Sep 2018",
data: [{
color: "rgba(51,50,250,1)",
name: "9 Sep 2018",
y: 2
}],
},
]
});
});
In the above JSFiddle, each series element represents a certain fruit on a certain day:
series[ 0] = Apples on Sep 7 2018
series[ 1] = Blueberries on Sep 7 2018
series[ 2] = Oranges on Sep 8 2018
series[ 3] = Blueberries on Sep
9 2018
Thanks in advance!
Unfortunately, Highcharts calculate groups space as xAxis width divided by categories length. So this space will be always equal among categories. The chart as you showed above requires a lot of changes in the core Highcharts functions and it is tricky to achieve.
Only centring columns in the group can be done with a bit of custom code:
var stacks = [
'section 1',
'section 2',
'section 3',
'section 4',
'section 5',
'section 6',
'section 7'
];
var categoriesStacksColl = [];
var seriesStackColl = {};
function calculateColumnTranslate(params) {
var m = params.stackLen / 2 + 0.5, // middle bar + offset to calc
barIndex = params.stackIndex,
a = Math.abs(barIndex - m), // bar offset from the middle point
barW = params.barW,
p = params.padding,
posX,
translateX;
if (barIndex === m) {
posX = -barW / 2;
} else if (barIndex > m) {
posX = a * barW + a * p - barW / 2;
} else {
posX = -a * barW - a * p - barW / 2;
}
translateX = posX - params.offset;
return translateX;
}
// Inside Highcharts options
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series,
categoriesLen = chart.xAxis[0].tickPositions.length,
changeWidthFlag = false,
seriesPoints,
nextSeriesPoints,
stack,
length,
arrIndex,
i,
j;
categoriesStacksColl = [];
// Init stacks per categories array
for (j = 0; j < categoriesLen; j++) {
categoriesStacksColl.push(stacks.slice());
}
series.forEach(function(singleSeries) {
stack = singleSeries.options.stack;
if (!seriesStackColl[stack]) {
seriesStackColl[stack] = [];
}
seriesStackColl[stack].push(singleSeries);
});
stacks.forEach(function(initStack) {
seriesPoints = seriesStackColl[initStack][0].points;
length = seriesStackColl[initStack].length;
seriesPoints.forEach(function(point, index) {
if (!point.y && length === 1) {
// increase column width
changeWidthFlag = true;
} else if (!point.y && length > 1) {
changeWidthFlag = true;
for (i = 1; i < length; i++) {
nextSeriesPoints = seriesStackColl[initStack][i].points;
if (nextSeriesPoints[index].y) {
changeWidthFlag = false;
}
}
}
// when all points in category stack are null
if (changeWidthFlag) {
arrIndex = categoriesStacksColl[index].indexOf(initStack);
categoriesStacksColl[index].splice(arrIndex, 1);
changeWidthFlag = false;
}
});
});
},
render: function() {
var chart = this,
series = chart.series[0],
columnMetrics = series.columnMetrics,
barW = columnMetrics.width,
barOffsets = {},
offsets = [],
columnsToTranslate = [],
offsetMin = 0,
offsetMax = 0,
columnsGroupLen = stacks.length,
offset,
columnsGroupWidth,
padding,
point,
pointOffset,
stackIndex,
stackLen,
pointOffsetTemp,
translateBarX;
stacks.forEach(function(stack) {
if (seriesStackColl[stack][0].visible) {
offset = seriesStackColl[stack][0].columnMetrics.offset;
offsetMax = offsetMax < offset ? offset : offsetMax;
offsetMin = offsetMin > offset ? offset : offsetMin;
barOffsets[stack] = offset;
offsets.push(offset);
}
});
columnsGroupWidth = Math.abs(offsetMin) + Math.abs(offsetMax) + barW;
padding = (columnsGroupWidth - columnsGroupLen * barW) / (columnsGroupLen - 1);
categoriesStacksColl.forEach(function(cat, index) {
if (cat.length < stacks.length) {
columnsToTranslate.push({
index: index,
stack: cat
});
}
});
columnsToTranslate.forEach(function(elem) {
stackIndex = 0;
pointOffsetTemp = 0;
chart.series.forEach(function(singleSeries) {
point = singleSeries.points[elem.index];
if (point.y && singleSeries.visible) {
pointOffset = point.series.columnMetrics.offset;
stackLen = elem.stack.length;
if (pointOffsetTemp !== pointOffset) {
pointOffsetTemp = pointOffset;
stackIndex++;
}
translateBarX = calculateColumnTranslate({
padding: padding,
barW: barW,
offset: pointOffset,
stackIndex: stackIndex,
stackLen: stackLen
});
point.graphic.translate(translateBarX);
}
});
});
}
}
}
Demo:
https://jsfiddle.net/wchmiel/9eb74hys/2/
Defined an own table layouts using pdfmake.js. On print I want per page to contain 7 rows(fixed).I have tried adjusting the height and width of the table cell to contain 7 rows but however if the data in table cell increases the page accumulates with less/more no.of rows.
//layout of the table:
var tablelist={
style: 'tableExample',
table: {
dontBreakRows: true,
widths: [ 20,55,55,55,55,55,55,55,55,55,55,55,55],
headerRows: 1,
body: body
},
layout: {
hLineWidth: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 1 : 1;
},
vLineWidth: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 1: 1;
},
hLineColor: function (i, node) {
return (i === 0 || i === node.table.body.length) ? 'gray' : 'gray';
},
vLineColor: function (i, node) {
return (i === 0 || i === node.table.widths.length) ? 'gray' : 'gray';
},
},
}
return tablelist;
}
//pushing the table header and other data to the table body
$scope.makePrintTable = function(){
var headers = {
col_1:{ text: 'Day', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
col_2:{ text: 'Date', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
col_3:{ text: '0600-0800', style: 'tableHeader',rowSpan: 1, alignment: 'center',margin: [0, 8, 0, 0] },
.
.
.//Similarly till col_13
col_13:{ text: '1700-1800', style: 'tableHeader',rowSpan: 1, alignment: 'center' ,margin: [0, 8, 0, 0]},
}
body = [];
var row = new Array();
for (var key in headers) {
row.push( headers[key] );
}
body.push(row);
for ( var j=0 ; j< $scope.table.length; j++){
var tableEach={ };
tableEach= $scope.table[j];
/*This for Genarating Object variables*/
for (var i = 1; i < 3; i++) {
window["obj"+i] = new Object();
}
var row = new Array();
var slNoValue = tableEach.slNo;
/*This is for slNo */
obj1["text"] = slNoValue;
obj1["style"]= "cellswidth";
row.push(obj1);
/*This is for Date */
var dateValue = new Date(tableEach.date);
obj2["text"]= dateValue.getDate() + '-' + basicFormats.getMonthName(dateValue.getMonth() )+ '-' + dateValue.getFullYear()+','+ basicFormats.getDayName(dateValue.getDay());
obj2["style"]= "cellswidth";
row.push(obj2);
/*This is for remaining columns (i ranges from 6 to 17 (time in 24hrs clock format) ) */
for(var i=6 ; i<=17 ; i++){
var obj={};
var hourValue = "hour_"+i+"_"+(i+1)+"_value";
var hourValueColor = "hour_"+i+"_"+(i+1)+"_"+"color_value";
hourValue = ( tableEach["hour_"+i] == undefined ? '':(tableEach["hour_"+i]));
hourValueColor =(tableEach["hour_"+i+"_colour"] == undefined ? '#ffffff':(tableEach["hour_"+i+"_colour"]));
obj["text"] = hourValue;
obj["fillColor"] = hourValueColor;
obj["style"] = "cellswidth";
row.push(obj);
console.log(obj);
}
// if( j!= 0 && j % 7 == 0){
// pageBreak : 'before'
// }
}
body.push(row);
}
};
//CSS for tablecells
cellswidth : {
fontSize: 10,
// color:'gray',
bold: true,
alignment: 'center',
margin: [0, 12.55, 0, 12.75],
},
You can use pageBreak function for it:
pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
//Here you can change the criteria according to your requirements
if (currentNode.index % 7 === 0)) {
return true;
}
return false;
},
I have a Highstock chart with three lines. When I add data, it will at in semi regular cases let the max range handle move off the right side, and then stay put instead of staying glued to the right side as expected. This behavior is not wanted.
Before it slips:
After it slips:
I have made a simplified example
https://jsfiddle.net/eskil_saatvedt/rdwdbht1/3/
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Javascript
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'line',
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 2
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime();
data.push([
time +1 * 1000,
Math.round(Math.random() * 100)
]);
return data;
}())
},
{
name: 'Random data2',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime();
data.push([
time +1 * 1000,
Math.round(Math.random() * 100)
]);
return data;
}())
},
{
name: 'Random data3',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime();
data.push([
time +1 * 1000,
Math.round(Math.random() * 100)
]);
return data;
}())
}
]
});
});
function UpdateData() {
var chart = $('#container').highcharts();
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100),
k = Math.round(Math.random() * 100)+50,
z = Math.round(Math.random() * 100)+20;
chart.series[0].addPoint([x, y], false, false);
chart.series[1].addPoint([x, z], false, false);
chart.series[2].addPoint([x, k], false, false);
chart.redraw();
}
setInterval(function() {
UpdateData();
}, 1000);
Normally I would display 2 temperatures and gain, using it for room heat control.
You need to call setExtremes()](http://api.highcharts.com/highcharts#Axis.setExtremes) function after adding point with new range.
function UpdateData() {
var chart = $('#container').highcharts(),
min = chart.xAxis[0].dataMin,
max = chart.xAxis[0].dataMax,
x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100),
k = Math.round(Math.random() * 100) + 50,
z = Math.round(Math.random() * 100) + 20;
chart.series[0].addPoint([x, y], false, false);
chart.series[1].addPoint([x, z], false, false);
chart.series[2].addPoint([x, k], false, false);
chart.xAxis[0].setExtremes(min,x);
}
Example:
- https://jsfiddle.net/xh1sjk3L/
Thanks to Sebastian.
By using max = chart.xAxis[0].userMax I was able to set the max value to max if it is close to the side. In the example 1 second
function UpdateData() {
var chart = $('#container').highcharts();
var userMax = chart.xAxis[0].userMax; // <- change
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100),
k = Math.round(Math.random() * 100)+50,
z = Math.round(Math.random() * 100)+20;
chart.series[0].addPoint([x, y], false, false);
chart.series[1].addPoint([x, z], false, false);
chart.series[2].addPoint([x, k], false, false);
chart.redraw(); // Redraw it again, as the left handle position I want is most often correct after the redraw.
// ----- change --------
var deltaX = x - userMax;
if (deltaX < 1000){ // the handle was closer to the end than 1 second
chart.xAxis[0].setExtremes(chart.xAxis[0].min,x);
}
}
http://jsfiddle.net/Margo/yKG7X/1/
I'm using the tooltip function as in fiddle.
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
}
});
I'm adding several graphlines to my graph, and i want to expand the function to show all points for all lines(should say something like:2/3 for data2 2/3 for data3) when the lines are 'over' eachother. But i dont know how to find if there are other points under the hovered point or not.
As in my fiddle example the tooltip only shows point for one of the datasets but both has point at [0, 1], [1, 2], [2, 3]
Thanks for any help!
Unfortunately, I know of no "nice" way to fix this situation. An easy workaround is to just search the points yourself:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series; // what series am I hovering?
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label; // start string with current hover
var allSeries = plot.getData();
$.each(allSeries, function(i,s){ // loop all series
if (s == hoverSeries) return; // if the loop series is my hover, just keep going
$.each(s.data, function(j,p){
if (p[0] == x){ // if my hover x == point x add to string
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
Updated fiddle here.
Running code:
var plot;
$(function() {
//Add tooltip
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var hoverSeries = item.series;
var x = item.datapoint[0],
y = item.datapoint[1];
var strTip = x + " / " + y + " for " + item.series.label;
var allSeries = plot.getData();
$.each(allSeries, function(i,s){
if (s == hoverSeries) return;
$.each(s.data, function(j,p){
if (p[0] == x){
strTip += "</br>" + p[0] + " / " + p[1] + " for " + s.label;
}
});
});
showTooltip(item.pageX, item.pageY, strTip);
}
});
var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
var data = [
{
label: 'data2',
color:1,
data: d2
},
{
label: 'data3',
color:2,
data: d3
}];
var conf = {
lines: { show: true },
points: { show: true },
grid: { hoverable: true, clickable: true },
};
plot = $.plot($('#placeholder'), data, conf);
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200).fadeOut(6000);
}
.graph-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
<div id="placeholder" class="graph-placeholder"></div>
</div>
I'm pushing the boundaries of experience here and cant see what I am doing wrong.
I'm pulling a bunch of data from a DB in rails, converting it to JSON and trying to plot it in d3.
The data is a simple JSON of {date => number} and the data is fine.
I'm doing something wrong with d3 in the loop at the bottom of the code but cant see what.
The axes plot fine but I can't get the line to draw.
Here is my code:
var data = <%= #signups.to_json.html_safe %>;
var date, signups
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(date)
.y(signups)
.interpolate("linear");
var svg = d3.select(".container").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Find range of data for domain
var min_date = Infinity, max_date = -Infinity;
var min_signups = Infinity, max_signups = -Infinity;
var x;
$.each(data, function(key, value) {
temp = parseDate(key)
if( temp < min_date) min_date = temp;
if( temp > max_date) max_date = temp;
if( +value < min_signups) min_signups = +value;
if( +value > max_signups) max_signups = +value;
});
x.domain([min_date, max_date]);
y.domain([0, max_signups]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
$.each(data, function(key, value) {
date = parseDate(key);
signups = value;
d3.select("path")
.append("svg")
.attr("d", d3.svg.line()
.x(date)
.y(signups)
.interpolate("linear"));
});
Any help would be greatly appreciated
The D3 way would be to pass all your data to a suitable line generator. This is fairly simple in your case, you just need to convert the object that contains all the data to an array that D3 can work with using d3.entries().
var line = d3.svg.line()
.x(function(d) { return x(parseDate(d.key)); })
.y(function(d) { return y(d.value); });
svg.selectAll("path").data([d3.entries(data)])
.enter().append("path").attr("d", line);
As you have only a single line, you could also use .datum() to bind the data, but using .data() leaves you the option of passing in data for more lines later.
Complete jsfiddle here. When modifying this, make sure that you create the line before adding the axes, otherwise D3's data matching won't work with the default matching and you won't get any lines. To fix this, you could supply a matching function, but to start with it's much easier to keep to this order.