CODEWITHSUNDEEP
javascriptchartshighcharts
Ray Wu
Ray Wu

Reputation: 1033

javascript charting framework to plot two charts together

I use highcharts to plot and it works great. Right now I have a requirement to plot two charts and they are binding (in some sense) together.

I didn't find this in highcharts demo, the closest one plotting two charts in the same plot. Is there a name to call this? Is there any existed charting framework to handle this?

enter image description here

Upvotes: 0

Views: 123

Answers (2)

Patrick RoDee
Patrick RoDee

Reputation: 1106

Based on your link and the embedded image, it's not exactly clear what you’re asking for. However, there are quite a few charting libraries that could likely accomplish what you're looking for. The examples below were built with ZingChart.

It seems you're looking for shared tooltips. The included code snippet demonstrates this. Run the snippet to see the chart.

var myChart = {
  "graphset": [{
    "type": "line",
    "id": "chart1",
    "legend": {
      "shared": true,
      "layout": "h"
    },
    "plotarea": {
      "margin": "35 50"
    },
    "scaleX": {
      "zooming": true
    },
    "zoom": {
      "shared": true
    },
    "crosshair-x": {
      "shared": true,
      "plot-label": {
        "multiple": false
      }
    },
    "scaleY": {

    },
    "plot": {

    },
    "tooltip": {
      "visible": false
    },
    "series": [{
      "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
      "text": "Apple"
    }, {
      "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
      "text": "Microsoft"
    }, {
      "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
      "text": "Oracle"
    }, {
      "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
      "text": "Dell"
    }]
  }, {
    "type": "line",
    "id": "chart2",
    "legend": {
      "visible": false,
      "shared": true
    },
    "plotarea": {
      "margin": "35 50"
    },
    "scaleX": {
      "zooming": true
    },
    "zoom": {
      "shared": true
    },
    "scaleY": {

    },
    "crosshair-x": {
      "shared": true,
      "plot-label": {
        "multiple": false,
        "visible": false,
        "offset-x": 15
      }
    },
    "plot": {

    },
    "tooltip": {
      "visible": false
    },
    "series": [{
      "values": [79, 65, 34, 41, 40, 64, 95, 72, 78, 64, 59, 49],
      "text": "Apple"
    }, {
      "values": [53, 63, 57, 50, 49, 57, 74, 62, 66, 57, 69, 68],
      "text": "Microsoft"
    }, {
      "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
      "text": "Oracle"
    }, {
      "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
      "text": "Dell"
    }]
  }]
};

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

It also allows you to share information across multiple charts. (This uses a preview chart for zooming.)

If your concern is more for creating two charts in one plot without the shared tooltips, you can see an example of that here.

If you’d like to clarify what you’re trying to do, or know more about these demos, please feel free to message me or reach out to [email protected], I’m on the ZingChart team and happy to discuss.

Upvotes: 4

Maertz
Maertz

Reputation: 4952

you are probably looking for stock charts, amCharts would be a great alternative which is really easy to handle

Upvotes: 2

Related Questions