How to create line chart, with custom data points and line style in javascript

Question

I was wondering if I could use some javascript library like Google Charts, gRaphaeljs, flotcharts, or d3js to create a chart like the following: enter image description here

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.

Comfortably Numb · Accepted Answer · 2014-10-07 21:49:32Z

4

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/

answered Oct 7, 2014 at 21:49

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nommer Over a year ago

thank you!! i was also wondering is there any site I could use as a guide or tutorial to learn how to customize graphs like you did?

Comfortably Numb Over a year ago

@nommer I don't think there's a specific tutorial, you have to sort of look into how things work. I haven't used either Google Charts or SVG much, but I ran their sample saw that it produced SVG circles as points and simple added to the picture.

Haseeb Over a year ago

@YuriyGalanter thank it works fine, but in my case i want to apply it on specific chart not for all, can it possible that visualization apply only on specific one .

Mick Cullen · Accepted Answer · 2014-10-07 21:03:24Z

1

Check out charts.js line charts. http://www.chartjs.org/docs/#line-chart

answered Oct 7, 2014 at 21:03

Mick Cullen

9,4543 gold badges23 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to create line chart, with custom data points and line style in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related