javascript - Adding buttons to a chart - svg

Question

I want to develop an interactive chart using a JS library. In this chart I want to have buttons (inside the chart), in this way (in red):

I want also to change the line type (dotted for example).

I tried Morris.js but this lib is not allowing me to do what I want to do.

Is there any other library that I can use instead ?

Answer 1

That's possible with Morris.js, but you need to add some code to Morris (latest version 0.5.1) to draw dotted lines:

Extend Morris and add a parameter called lineStyle and set this parameter to . in the Morris Area configuration.

See this answer for the possible values for raphael.js line style:

["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

On mouseover solution:

(function () {
    var $, MyMorris;

    MyMorris = window.MyMorris = {};
    $ = jQuery;

    MyMorris = Object.create(Morris);

    MyMorris.Grid.prototype.gridDefaults["lineStyle"] = "";
 
    MyMorris.Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
      return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex)).attr('stroke-dasharray', this.options.lineStyle);
    };
}).call(this);

Morris.Area({
  element: 'chart',
  data: [
    { y: 'LUN', a: 1, b: 2 },
    { y: 'MAR', a: 2,  b: 3 },
    { y: 'MER', a: 4,  b: 2 },
    { y: 'JEU', a: 2,  b: 1 },
    { y: 'VEN', a: 2,  b: 2 },
    { y: 'SAM', a: 4,  b: 3 },
    { y: 'DIM', a: 1, b: 2 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Label 1', 'Label 2'],
  fillOpacity: 0.6,
  hideHover: 'auto',
  behaveLikeLine: true,
  resize: true,
  pointFillColors: ['#ffffff'],
  pointStrokeColors: ['black'],
  lineColors: ['gray', 'blue'],
  lineStyle: ".",
  parseTime: false,
  smooth: false,
  hoverCallback: function (index, options, content, row) {
    var currentDiv = "";
    var finalContent = $("<div/>");

    $(content).each(function () {
		currentDiv = $(this);
        $(finalContent).append(currentDiv);
    });
            
    var btnEdit = $("<img/>").attr("src", "http://i.stack.imgur.com/Z2AxP.png").addClass("morrisEdit").css({"cursor":"pointer"}).attr("onclick", "editAction();");
    $(finalContent).append(btnEdit);
    return finalContent;    
  }
});

function editAction() {
  alert("Edit Clicked");
  // Do some actions
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="chart"></div>