CODEWITHSUNDEEP
javascriptchartshighchartssynchronized
kdaviswx
kdaviswx

Reputation: 23

Highcharts synchronized charts with multiple axes datasets

I am attempting to build a list of highcharts with weather data. Ultimately, there will be about 5 synchronized charts all with a date xAxis. The catch is, that each of those 5 charts will have at least 2 yAxis. I am trying to use this method in the Highchart synchronized charts example to eliminate the excessive breakdown of a ton of x and y axis settings.

Data Format:

  "datasets": [
      {
        "name": "Temperature", 
        "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
      },
      {
        "name": "Dewpoint", 
        "data": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
      },
      {
        "name": "Relative Humidity", 
        "data": [[ 1464796500000, 89],[ 1464796800000, 88],[ 1464797100000, 88],[ 1464797400000, 88],[ 1464797700000, 89]], 
        "unit": "%", 
        "type": "line", 
        "valueDecimals": 1
      }
  ]

My modified version of the Highchart api synchronized charts example: http://jsfiddle.net/bbw37zen/14/

What I really like about this example is that the dataset has all the info needed and you simply run this code to add it to the chart. 

series: [{
    data: dataset.data,
    name: dataset.name,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    }
}]

So, now for the main question. In this example, how could I combine the Temperature and Dewpoint into the same graph (two y axes sharing the same xAxis date). I would want to try to keep the data in the format it is. Is it possible to join two datasets using this method? Or would I have to break down the yAxis options/data using a method like this - http://jsfiddle.net/kmuhw0zf/3/ ?

Upvotes: 2

Views: 2285

Answers (2)

Mike Zavarello
Mike Zavarello

Reputation: 3554

This is a great question!

The demo iterates over several sets of data, adding each chart to the container <div> element. If you wanted to have multiple synchronized charts, but have one with multiple series, you will have to split them out. It's less efficient than the demo, but it should get you the customization you need.

I imagine it would work like this:

  1. Define each chart and its options individually, setting them to their own variable.
  2. For your mixed temperature/dewpoint graph, add both data sets as separate series in that specific chart's options.
  3. Make sure each chart's xAxis.events attribute includes setExtremes: syncExtremes.

  4. Once you've defined the options for each of your charts and assigned the data, use the jQuery appendTo() function to add them to the container <div> element, one by one:

    $("<div class='CHART1'>").appendTo("#container").highcharts(chartOptions_CHART1);
$("<div class='CHART2'>").appendTo("#container").highcharts(chartOptions_CHART2);
// ... and so on

In order for the syncronization to work, each chart will need to live in the container <div>.

Update: After reading the associated comment from the original poster, I had another idea to try out that may be more efficient.

Theoretically, there's no reason why each item in your dataset couldn't include both items you want to chart. So, in your case, package the items that will share the same chart as unique name and data elements in your JSON array:

"datasets": [
    {
        "nameA": "Temperature", 
        "dataA": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
        "nameB": "Dewpoint", 
        "dataB": [[ 1464796500000, 66.94],[ 1464796800000, 66.79],[ 1464797100000, 66.79],[ 1464797400000, 66.97],[ 1464797700000, 67.47]], 
        "unit": "F", 
        "type": "area", 
        "valueDecimals": 1
    },
    ...
]

I'm assuming here that unit, type, and valueDecimals are in common. If you wanted to make those distinct, just make duplicates of those as well.

Here's how you would render that in your options:

series: [{
    data: dataset.dataA,
    name: dataset.nameA,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    },
    yAxis: 0
}, {
    data: dataset.dataB,
    name: dataset.nameB,
    type: dataset.type,
    color: Highcharts.getOptions().colors[i],
    fillOpacity: 0.3,
    tooltip: {
        valueSuffix: ' ' + dataset.unit
    },
    yAxis: 1
}]

This way, you could keep the simplicity of the original fiddle with the your requirements.

Upvotes: 1

moyeradon
moyeradon

Reputation: 453

Specify which y-axis to use. You can include multiple y-axes per chart; you just have to specify.

In your javascript dataset call:

"datasets": [
  {
    "name": "Temperature", 
    "data": [[1464796500000, 70.34],[ 1464796800000, 70.52],[ 1464797100000, 70.52],[ 1464797400000, 70.7],[ 1464797700000, 70.88]], 
    "unit": "F", 
    "type": "area", 
    "valueDecimals": 1,
    **"yAxis": 0**
  }      
]

They are 0 based, so specifiy it that way, or give the axis an id. Specific the axis in your chart init. 

$('chart').highCharts({
yAxis :[ 
  {
  //define axis info
  },
  {
  //Axis 2 info
  }
]
});

If you want the axis to appear on the right side, simply add `'opposite': true' to your axis definition.

http://api.highcharts.com/highcharts#yAxis

Upvotes: 0

Related Questions