Here, I have used line chart from nvd3. I am trying to fix a few issues with this chart
1. This is an interactive chart, but even if i hover over a point where there are no points from the data, it still shows up the x and y-points.
2. x-axis and y-axis lines do NOT show up. Also the interactive guide doesn't come up in a rectangular box outlined.
3. The x-axis gets cut off at the end (see 14:29:19 being cut off at the end) no matter how much i increase the width to.
4. I am trying to remove the fill that we see above the line graph but styling changes made by me resulted in no success.
code that i use to fetch the line chart
var redraw = function(testData) {
var dataT = [{
key : 'Character Count',
values : testData,
color : '#00AEEF',
area : false
}];
var margin = {
top : 80,
right : 20,
bottom : 80,
left : 50
}, width = 1000 - (margin.left + margin.right), height = 600 - (margin.top + margin.bottom), x = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]);
x.domain(d3.extent(dataT[0].values, function(d) {
return d3.time.format('%X')(new Date(d.TimeStamp));
}));
y.domain([0, d3.max(dataT[0].values, function(d) {
return d.CharCount;
})]);
nv.addGraph(function() {
chart = nv.models.lineChart().transitionDuration(350).useInteractiveGuideline(true)
.showLegend(true).showYAxis(true).showXAxis(true).x(function(d) {
return new Date(d.TimeStamp);
}).y(function(d) {
return d.CharCount;
});
chart.xAxis.axisLabel('Time').tickFormat(function(d) {
return d3.time.format('%X')(new Date(d));
}).scale(x).orient("bottom");
chart.yAxis.axisLabel('Character Count').tickFormat(d3.format(',')).scale(y);
chart.lines.forceY([0]);
d3.select('#chart2 svg')//.append("g")
.datum(dataT).attr('height', height).attr('width', width).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
};
redraw(data)--data fetched froma service ith dateTimeStamp in x-axis and integer in y-axis points.
Please help!
This is an interactive chart, but even if i hover over a point where there are no points from the data, it still shows up the x and
y-points. 2. x-axis and y-axis lines do NOT show up. Also the
interactive guide doesn't come up in a rectangular box outlined.
Adding corresponding javascript file in nvd3 zip file should solve the problem(line.js, linechart.js and corresponding css file)
3.The x-axis gets cut off at the end (see 14:29:19 being cut off at the end) no matter how much i increase the width to.
This is because you have not set the width and height of the chart in your codes to generate the chart
you should do
chart.width(width).height(height)
4.I am trying to remove the fill that we see above the line graph but styling changes made by me resulted in no success
This I am not sure how to solve as I do not have your dataset, so I not able to reproduce the problem
Here is my test code
Related
I have a requirement to show data labels of two graphs on the same axes.
Only when they intersect, one of the two labels won't show. This can be demonstrated below:
As you can see on the 2nd, 5th and 6th columns from the left with values 0%, 7% and 8% respectively
only the orange line values are shown but the blue column values are missing.
This is the final html of the graph after rendering:
So data-datapoint-id 142, 145 and 146 are missing from the html.
I tried using the plotArea.dataLabel.renderer function as a manipulation of what was proposed here but nothing changed, still not rendering.
Anyone encountered a similar problem? Is that a sapui5 issue or can it be fixed by manually inserting the labels into the HTML if so how?
Thanks,
Ori
Using SVG text and jQuery I managed to manually insert the labels into the top middle of the blue rectangle columns.
This is the result, not perfect but works:
and this is the code:
chart.setVizProperties({
plotArea: {
dataLabel: {
formatString: {'פחת כללי': FIORI_PERCENTAGE_FORMAT_2},
renderer: function (oLabel) {
// Create empty text node to be returned by the function such that the label won't be rendered automatically
var node = document.createElement("text");
if (oLabel.ctx.measureNames === "כמות פחת כללי") {
var kamutLabelIdx = oLabel.ctx._context_row_number;
// Use jQuery and SVG to manipulate the HTML
var kamutLabelQuery = '[data-id=\"' + kamutLabelIdx + '\"]';
var kamutColumn = $(kamutLabelQuery)[0];
// Create text element as child of the column
kamutColumn.innerHTML += "<text>" + oLabel.text + "</text>";
var labelNode = $(kamutLabelQuery += ' text');
// Set the label position to be at the middle of the column
const labelLength = 60;
const xPos = (labelLength + oLabel.dataPointWidth) / 2;
const yPos = oLabel.styles['font-size'];
labelNode.attr({
"textLength" : labelLength,
"x" : xPos,
"y" : yPos,
"font-size" : yPos
});
return node;
}
}
}
}
});
The oLabel parameter of the renderer function provides useful info about the data label to be created:
I still wonder if that's a bug with sapui5 vizframe and if there is a simpler way to do this.
Please let me know of your thoughts
HI as i'm trying to align the horizontal stacked bar chart using d3.js.
Here i'm using d3.stack() method to generate the stacked bar. This works fine with set of data
dataset = [{
"goodRating": 12,
"avgRating": 12,
"badRating": 12,
}]
But when im trying to change the data to
dataset = [{
"goodRating": 2344412,
"avgRating": 23234434,
"badRating": 443333,
}]
This works but alignment doesn't fit into the chart width.
As i want to fit the bar chart inside the svg to 100%. Please check my fiddle
Can please suggest me what i have missed. Thank you
Try setting width and x of rect as percentage
attr('width', function(d) {
return (d[1] - d[0]) + '%';
})
.attr('x', function(d) {
return d[0] + '%';
})
Demo
https://jsfiddle.net/aswinkumar863/7bnmr9cd/
I am using Line Charts Library from ANYCHARTS to display some dynamic data(data fetched from csv file).
I am facing some issues when the data is 100%. The line does not display properly. I tried adding padding to the line chart configuration but it adds padding to whole chart rather than just giving padding to the data-line.
I wish if someone could help me on this.
enter image description here
Here is the code if it helps;
anychart.onDocumentReady(function() {
var dataSet = anychart.data.set(AnyData);
var Q6_Trend_AnyChart = anychart.line();
Q6_Trend_AnyChart.animation(true);
Q6_Trend_AnyChart.padding([15, 20, 5, 20]);
Q6_Trend_AnyChart.title();
Q6_Trend_AnyChart.yScale().minimum(0);
Q6_Trend_AnyChart.yScale().maximum(100);
Q6_Trend_AnyChart.contextMenu().itemsFormatter(function(items) {
// Disable save as image option
// delete about and separator
delete items["full-screen-separator"];
delete items["about"];
delete items["anychart-credits"];
delete items["share-with"];
delete items["select-marquee-start"];
// return modified array
return items;
});
var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});
var series_1 = Q6_Trend_AnyChart.line(seriesData_1);
series_1.name('');
series_1.hovered().markers()
.enabled(true)
.type('circle')
.size(4);
series_1.tooltip()
.position('right')
.anchor('left-center')
.offsetX(5)
.offsetY(5);
series_1.stroke("3 white");
Q6_Trend_AnyChart.tooltip().format("\nPercent:{%Value}%");
Q6_Trend_AnyChart.background().fill("transparent");
var labelsx = Q6_Trend_AnyChart.yAxis().labels();
labelsx.fontSize(12);
labelsx.fontColor("#fff");
labelsx.useHtml(true);
labelsx.fontWeight(600);
var labels = Q6_Trend_AnyChart.xAxis().labels();
labels.enabled(false);
series_1.markers(true);
Q6_Trend_AnyChart.legend()
.enabled(false)
.fontSize(13)
.padding([0, 0, 10, 0]);
// set container id for the chart
Q6_Trend_AnyChart.container(id);
// initiate chart drawing
Q6_Trend_AnyChart.draw();
});
}
if I increase the top padding from 15px to 45px in the given code, it results this; but still the line is not displaying perfectly
enter image description here
The scale max means the top edge of the data plot. When the yScale maximum is auto-calculated chart adds a gap as a default. This allows avoiding this issue.
But the default gap is dropped if the yScale maximum applied manually.
In this case, to add some gap you should increase the scale maximum value. Also, you can define required ticks manually too. For details, check the sample.
I'm having an issue where the display of the max value on a HighCharts chart is changing depending on the display width of the chart.
For example, the largest value in the series is chart.series[0].yData[426]
When the chart is displayed in a smaller sized browser window I get the following values from the browsers Developer Tools:
> chart.series[0].yData[426]
> 446.528
> chart.series[0].yAxis.dataMax
> 223.43449999999999
And the chart shows the peak value at the 223 point with the y axis to match.
When I maximize the window and run the same commands I get:
> chart.series[0].yData[426]
> 446.528
> chart.series[0].yAxis.dataMax
> 446.528
And the chart displays correctly (y Axis is scaled for max value of ~446, max value shown on the chart is correct).
I am changing the the chart size with the following function:
var chartContainer = $("#highstock-chart"); // #highstock-chart is where the chart is located
var resizeChart = function() {
window.chart.setSize(chartContainer.width(), chartContainer.height());
};
$(".fullscreen").click(function() {
chartContainer.css("z-index", 100);
chartContainer.css("position", "fixed");
chartContainer.css("top", 0);
chartContainer.css("left", 0);
chartContainer.css("padding", 0);
chartContainer.css("width", "100%");
chartContainer.css("height", "100%");
resizeChart();
});
Is this an issue with the way I'm resizing the chart? Is this a quirk in HighCharts?
It's dataGrouping from Highstock, you can disable it (I don't advice that): http://api.highcharts.com/highstock#plotOptions.series.dataGrouping
This is my dimple bar chart (powered by d3):
var sidechart = new dimple.chart(chart_svg, data);
sidechart.setBounds(60, 30, 200, 300)
var x = sidechart.addCategoryAxis("x", "Long name");
sidechart.addMeasureAxis("y", "Measure");
sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar);
sidechart.draw();
Text on x-axis is quite long and by default dimple rotates it so it is displayed vertically. I want to rotate it by 45 degrees instead. Using d3 this would be done by doing this:
myAxis.attr("transform", "rotate(-45)");
Unfortunately I am unable to find a similar way of doing that in dimple. Any help will be appreciated.
You can get hold of the shapes once the draw method has been called and set a transform:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform", "rotate(-45)");
However dimple already uses the transform to move the labels between the ticks and do the rotate, so you might want to append the transform like this:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " rotate(-45)";
});
I tried this and it offset the labels from where I was expecting, so you may need to add a translate in, but you'll probably need to find an appropriate offset for your own chart, I've used 20 here as an example:
...
sidechart.draw();
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(0, 20) rotate(-45)";
});