Example example_5

A jsFiddled Elycharts example: hack it!

by mikeys4u

HTML

<script src="http://elycharts.com/sites/elycharts.com/repo/lib/raphael.js"></script>
<script src="http://elycharts.com/sites/elycharts.com/repo/dist/elycharts.min.js"></script>
<div id="chart" style="width: 300px; height: 300px"></div>

JavaScript

$(function() {
  $("#chart").chart({
  template: "line_basic_2",
  tooltips: {
    serie1: ["a", "b", "120", "d", "e", "e", "e"],
    serie2: ["a", "b", "c", "d", "d", "e", "e", "e"],
   
  },
  values: {
    serie1: [134, 136, 138,190,190,180,170],
    serie2: [76, 80, 78, 80, 80, 90, 89]    
  },
  defaultSeries: {
    fill: false,
    stacked: false,
    highlight: {
      scale: 2
    },
    startAnimation: {
      active: true,
      type: "grow",
      easing: "bounce"
    }
  }
});

});

$.elycharts.templates['line_basic_2'] = {
  type: "line",
  margins: [10, 10, 20, 50],
  defaultSeries: {
    plotProps: {
      "stroke-width": 4
    },
    dot: true,
    dotProps: {
      stroke: "white",
      "stroke-width": 2
    }
  },
  series: {
    serie1: {
      color: "red"
    },
    serie2: {
      color: "blue"
    }
  },
  defaultAxis: {
    labels: true
  },
  features: {
    grid: {
      draw: [true, false],
      props: {
        "stroke-dasharray": "-"
      }
    },
    legend: {
      horizontal: false,
      width: 80,
      height: 50,
      x: 220,
      y: 250,
      dotType: "circle",
      dotProps: {
        stroke: "white",
        "stroke-width": 2
      },
      borderProps: {
        opacity: 0.3,
        fill: "#c0c0c0",
        "stroke-width": 0
      }
    }
  }
};