javascriptcanvaschartsraphaelgraphael

Straight-lines chart with dynamic data (currently using graphael lib)

I am trying to build a dynamically fed (data) straight lines chart. I built a prototype using graphael.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line Charts</title>
  <script src="raphael.js"></script>
  <script src="g.raphael.js"></script>
  <script src="g.line.js"></script>
  <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
  window.onload = function () {
    var r = Raphael("holder");
    var yAxisTags = ["A","B","C","D"];
    var xData = [
        [2000,2015],//hack line, transparent; used to specify the range of the axis
        [2008,2014],[2004,2005],[2009,2010],[2000,2007],[2000,2014],[2010,2012]
    ];
    var yData = [
        [1, 1],//y coordinates of hack line
        [0, 0],[1, 1],[1, 1],[2, 2],[3, 3],[0,0],
        [0, 0]//hack line, transparent.Used to be able to draw straight lines
    ];
    var colors =  [
      'transparent',//line 1
      'red','green','green','purple','turquoise','black',
      'transparent'];//'transparent' IS A MUST, a hack to make it have a straight line
    var options = {
        nostroke: false,
        gutter: 90,
        axis: "0 0 1 1",
        symbol: "circle",
        axisxstep:10,
        axisystep:3,
        colors: colors
    };
    var lines = r.linechart(100, 10, 700, 300,xData,yData,options);

    // AXIS (x and y) have values but do not drawn the lines
    lines.axis[0].attr([{stroke: false}]);
    lines.axis[1].attr([{stroke: false}]);

    // Thickness of symbols (ie dots)
    lines.symbols.attr({ r: 4 });

    // Animate dots on first load
    lines.animate({"stroke-width": 1}, 1000);//ALL lines,1000 is animation time

    // Set text for Y axis coordinates (instead of numbers)
    $.each(lines.axis[1].text.items, function(index, label) {
      this.attr("text", yAxisTags[index]);
    });
};
</script>
</head>
  <body>
    <div id="holder" style="width:50%"></div>
  </body>
</html>

And here is how it looks like: graphael_line_chart


So basically I want a time related (jumps +2 years from point to point) line chart graph with labels on Y-axis, that is made by drawing straight lines and to which dynamic data is being fed. The current code works with this specific configuration only but once i start modifying the data, the display is not accurate anymore:

Is there a technique/hack around to make my desired line chart concept work with dynamic data using graphael? or it is not feasible with this library?

Solution

  • For anyone stuck with this same scenario:

    Since I am using AngularJS, I ended up using angular-google-chart.

    It is a directive wrapper around google chart; it is stable and straightforward to use.