I am working on a D3.js chart where I would like to brush on a timeline. I stucked when I want to redraw the chart with the new data.
´function brushed() {
var startDate=new Date(brush.extent()[0]);
var endDate=new Date(brush.extent()[1]);
var newDates=[];
var i=0;
while(JSONdata.measurementPoints[i].measurementDateTime<=endDate){
if(JSONdata.measurementPoints[i].measurementDateTime>=startDate){
newDates.push(JSONdata.measurementPoints[i].measurementDateTime);
}
i++;
}
if(newDates.length>0){
chart.select('path').attr('d',pathGenerator(newDates));
chart.select(".x.axis").call(xAxis);
}
}´
My problem is that after I change the data on the element the whole graph disappear. I am pretty rookie in D3.js and dont really know if this is the best way to achive this functionality.
I appreciate any suggestion.
Code: http://codepen.io/laczko090/pen/ozJANP?editors=1010
Thanks in advance!
You need to redraw the main graph line and axes in brushed.
Modified CodePen
Save a reference to the graph line's path:
var path = series.append('path')
.attr('vector-effect', 'non-scaling-stroke')
[...]
In brushed, redraw:
path.attr('d', pathGenerator(dates));
xAxis.scale(xScale);
xAxisEl.call(xAxis);
Related
Please have a look at this JSFIDDLE. I'm trying to follow a tutorial to create a very basic scatter chart in NVD3.js, but to no avail.
function createBasicChart1(){
var chart;
nv.addGraph(function(){
//Create chart
chart = nv.models.scatterChart()
.showLegend(false) // Remove legend (will put it back later)
.showDistX(true) // Show X axis
.showDistY(true) // Show Y axis
.useVoronoi(false) // For now, disable hovering on points
.color(d3.scale.category10().range()) // Colormap
.duration(500); // Fade in duration
// Generate toy data
data = [{key: "", values:[{x:0,y:0},{x:1,y:1}, {x:3, y:3}, {x:3, y:10}]}];
//Add chart to page
d3.select("#basicChart1").datum(data).call(chart)
// Register chart with window resize event
nv.utils.windowResize(chart.update);
return chart
});
}
Could you please tell what I'm missing here? I've added all the resources like the tutorial says.
There is one mistake from you and one mistake from the tutorial's author.
Your mistake is that the ID of the SVG is basicChart1, not basicChart. Actually, it is on the tutorial:
When you write the javascript code, make sure to change the d3 selector id to a one that will match with the template.
The author's mistake is a little bit more strange: in his tutorial, the author never calls createBasicChart1. But, of course, unless it is an IIFE, you have to call it:
createBasicChart1()
Here is your updated fiddle: https://jsfiddle.net/5eydu463/
I'd like to know how to access the left and right margins of a chart in Chart.js.
Looking for something like "chart.canvas.marginLeft".
Thanks!
With
var chart = new Chart(ctx).Line(data);
the following will get you your 'margins'
alert(chart.scale.xScalePaddingLeft);
alert(chart.scale.xScalePaddingRight);
I was wondering if I could use some javascript library like Google Charts, gRaphaeljs, flotcharts, or d3js to create a chart like the following:
It has custom circle in more of like a donut shape and the line style I want it to be like connecting dots on a picture. As you can see in the image, the lines have a small margin between each point.
You can use Google Chart for this. I admit I tried it just out of curiosity but it does work. All you have to do is draw chart with standard round points and then when chart is finished (on ready event) add shapes of your own:
google.visualization.events.addListener(chart, 'ready', function(){
// Looping thru every standard point
$('circle').each(function() {
var $c = $(this);
// addinng outer circle
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",$c.attr('cx'));
circles.setAttribute("cy",$c.attr('cy'));
circles.setAttribute("r",$c.attr('r'));
circles.setAttribute("fill",$c.attr('fill'));
circles.setAttribute("stroke",'white');
circles.setAttribute("stroke-width",'3');
this.parentElement.appendChild(circles);
// addinng inner circle
circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",$c.attr('cx'));
circles.setAttribute("cy",$c.attr('cy'));
circles.setAttribute("r", "4");
circles.setAttribute("fill","white");
this.parentElement.appendChild(circles);
})
});
Demo: http://jsfiddle.net/focnsyu9/1/
Check out charts.js line charts. http://www.chartjs.org/docs/#line-chart
I am trying to add some data visualization to web map I am working on and I am exploring the use of D3, specifically NVD3. I am using the PieChart Example as a test run for a proof of concept.
I add a leaflet control to my map like this (forgive the bad formatting):
var visualizationControl = L.control({ position: 'bottomleft' });
var visualizationDiv = L.DomUtil.get("visualizationContainerDiv");
// ...
visualizationControl.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'control');
this._div.innerHTML = result;
return this._div;
}
visualizationControl.addTo(MapProvider.map);
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) { return d.label })
.y(function (d) { return d.value })
.showLabels(false);
d3.select("#chart svg") //div with chart Id and svg container within that div
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
The chart will render ok in my control, and the on hover behaviour does register correctly.
However, when it appends the tooltip to the DOM it appends it to the body instead of my SVG or even the control div.
It's difficult to tell from this image but this was taken during an on.hover over one of the slices of the pie and it should write out the tooltip on top of the pie slice. Notice the "One 29.77" sitting off to the side in the navbar.
I have been poking around the development version of the NVD3 js and found a few blocks that refer to the tooltip container and it looks like it should append it to the SVG container.
I also tried changing the css of the tooltip to no avail.
I don't want to give up on this just yet. Any suggestions, help, ideas would be greatly appreciated. Thanks.
Using the current versions of leaflet, D3 and NVD3, debugging/testing in Chrome.
UPDATE
I did not solve this problem using NVD3 I did, however, end up using C3js. It also has a pie chart and this played nicely with my L.control(). A word of caution though, (if you try to go with C3) look carefully at how the charts are looking to receive the data that is being passed to them. I had to play with this for while to get them to work.
I am trying to invert a chart through code in Highcharts.
I am setting the chart inverted property:
chart.inverted = true;
chart.redraw();
You can see the code I am using here:
http://jsfiddle.net/Wajood/Hz4bH/
This doesn't invert the chart. It seems to me that the redraw() function doesn't seem to care for the inverted property.
Any help/suggestions/tips in the matter will be appreciated.
Thanks.
Calling redraw() will only redraw data changes. Browsing the methods in the Highcharts API there does not appear to be a method which will change the inverted setting of an existing chart.
Your only option in this case is to destroy the existing chart and create a new one with the relevant chart.inverted setting.
I faced a similar problem and was able to solve it using chart.update.
chart.update({chart: {inverted: true}});
chart.redraw();
http://api.highcharts.com/highcharts/Chart.update