CODEWITHSUNDEEP
javascriptchartsinteractive
Bondolin
Bondolin

Reputation: 3121

Interactive javascript chart without jQuery and with cursor plotting

I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?

Upvotes: 3

Views: 1949

Answers (3)

Jailbot
Jailbot

Reputation: 2608

var chartJSON = {
  "type": "line",
  "background-color": "#fff",
  "border-color": "#dae5ec",
  "border-width": "1px",
  "title": {
    "margin-top": "7px",
    "margin-left": "12px",
    "text": "TODAY'S SALES",
    "background-color": "none",
    "shadow": 0,
    "text-align": "left",
    "font-family": "Arial",
    "font-size": "11px",
    "font-color": "#707d94"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_LEFT"
    }
  },
  "plotarea": {
    "margin": "50px 25px 70px 46px"
  },
  "scale-y": {
    "values": "0:100:25",
    "line-color": "none",
    "guide": {
      "line-style": "solid",
      "line-color": "#d2dae2",
      "line-width": "1px",
      "alpha": 0.5
    },
    "tick": {
      "visible": false
    },
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-right": "5px"
    }
  },
  "scale-x": {
    "line-color": "#d2dae2",
    "line-width": "2px",
    "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "tick": {
      "line-color": "#d2dae2",
      "line-width": "1px"
    },
    "guide": {
      "visible": "false"
    },
    "markers": [{
      "type": "area",
      "range": [5, 7],
      "background-color": "red",
      "alpha": 0.3,
      "label": {
        "text": "Summer Sale",
        "alpha": 0.5
      }
    }],
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-top": "5px"
    }
  },
  "legend": {
    "layout": "2x2",
    "background-color": "none",
    "shadow": 0,
    "margin": "auto auto 15 auto",
    "border-width": 0,
    "item": {
      "font-color": "#707d94",
      "font-family": "Arial",
      "padding": "0px",
      "margin": "0px",
      "font-size": "9px"
    },
    "marker": {
      "show-line": "true",
      "type": "match",
      "font-family": "Arial",
      "font-size": "10px",
      "size": 4,
      "line-width": 2,
      "padding": "3px"
    }
  },
  "crosshair-x": {
    "lineWidth": 1,
    "line-color": "#707d94",
    "plotLabel": {
      "shadow": false,
      "font-color": "#ffffff",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px",
      "alpha": 1
    },
    "scale-label": {
      "font-color": "#ffffff",
      "background-color": "#707d94",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px"
    }
  },
  "tooltip": {
    "visible": false
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    "text": "Kenmore",
    "line-color": "#4dbac0",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#36a2a8",
      "shadow": 0
    },
    "palette": 0
  }, {
    "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    "text": "Craftsman",
    "line-width": "2px",
    "line-color": "#25a6f7",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#1993e0",
      "shadow": 0
    },
    "palette": 1,
    "visible": 1
  }, {
    "values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
    "text": "DieHard",
    "line-color": "#ad6bae",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#975098",
      "shadow": 0
    },
    "palette": 2,
    "visible": 1
  }, {
    "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
    "text": "Land's End",
    "line-color": "#f3950d",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#d37e04",
      "shadow": 0
    },
    "palette": 3
  }]
}


zingchart.render({
  id: "myChart",
  height: 300,
  width: 500,
  data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>

<div id="myChart"></div>
Line Chart with Marker

Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.

Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)

Upvotes: 6

zeroin
zeroin

Reputation: 6025

You can do this with amCharts, here is a stacked area chart demo. If you don't need a fill, simply set fillAlphas to 0. and stackType of value axis to "none"

Disclaimer: I am the author of amCharts.

Upvotes: 1

joopmicroop
joopmicroop

Reputation: 921

Here is an example made with D3js Framework, it might interest you..

Upvotes: 0

Related Questions