How to create a line chart with custom data points and line style in javascript
I was wondering if I could use some javascript library like Google Chart , gRaphaeljs , flotcharts , or d3js to create a chart like this:
It has a custom circle in a larger shape like a donut shape and a line style, I want it to look like the connection of the dots in the picture. As you can see in the image, the lines have a small margin between each point.
+3
source to share
2 answers
You can use Google Chart for this. I admit I tried this just out of curiosity, but it works. All you need to do is draw a chart with standard round points, and then when the chart is finished (in the finished case), add your own shapes:
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);
})
});
+3
source to share