I was trying to use dimplejs draw a multi-line chart. But the default line marker looks kinda too "big" for my chart. Is there a way to change the size or the color of the linemarker in dimplejs?
After drawing you can modify the shapes:
// dimple's draw method will create the shapes in the svg
chart.draw();
// this will select the markers and set the radius to 2
svg.selectAll(".dimple-marker,.dimple-marker-back").attr("r", 2);
Related
I tried to draw a line between two points in canvas, but I would like to have the line only covers the area within specific color range.
For example,
I will draw a line from point(0,5) to point(3,5), along the line there are three points with RGB (1,2,3) (4,5,6) and (7,8,9). My color range will be R value from 1 to 4. So I expect the line will be covering point(0,5) and point(1,5) but not for point(3,5).
How can I implement it?
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 relatively new to nvd3. I am using the nvd3 linechart module (http://nvd3.org/examples/line.html) to plot multiple graphs. I want to color the area between the lines and above a certain y value with yellow while the line color is grey.
Setting area:true (http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html) allows me to fill it in the same color as the color of linechart.
Is there a way I can write my own color function to override dis behavior?
How do I add a background circle to a sunburst plot in d3? I'm using the standard zoomable sunburst example:
I just want a full circle of specified color, to highlight the 'jaggy-ness' of a particular display.
All you need to do is append a circle to the SVG as the first thing after creating it:
svg.append("circle").attr("r", radius).style("fill", "pink");
Complete example here.
Svg line not displayed on google charts?
Refering this question i want to find out point at which svg line cuts google chart.
This is fiddle link to http://jsfiddle.net/nc6uf/
i want to find point at which mouse intersects google chart in mouse move event
graph.on('mousemove', function() {
line.attr("y1", d3.event.y - 50);
line.attr("y2", d3.event.y - 50);
});
Each Google Chart is drawn in an SVG that is in its own div. SVG objects can only be drawn within an element, and since you have two SVG canvases in your example (one on top and one on the bottom) your line will only be drawn in the element to which you appended the line. Because you used d3.select() you selected the first element that satisfied your condition "svg".
You can see the second SVG canvas interact with your mousemove by changing this line in your example:
var graph = d3.select('svg');
to:
var graph = d3.selectAll('svg');
If you wanted the line to pass through both charts, you'd need the charts to be drawn on the same SVG canvas.