CODEWITHSUNDEEP
highchartsmeteor
ralphie
ralphie

Reputation: 132

Highchart, Combined Two Chart in One with different data from Meteor Collection

I am trying compare Donation vs Disbursement and wanted to combine two Highchart into one however they have different data resulting from different query in my Meteor Collection.

Below are my result data in a sample query instance.

Donation:
 Label ['May', 'Jun', 'Jul', 'Aug']
 Value [106.4, 129.2, 144.0]

Disbursement:
 Label ['Jun', 'Jul', 'Aug', 'Sep', 'Oct']
 Value [ 148.5, 216.4, 194.1, 95.6, 54.4]

Here's the jfiddle link Highchart- two charts

I did tried the normal two data sets in Highchart but only works when the both query have the same label values and when not then it started to show erroneously.

Upvotes: 0

Views: 480

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

You'll have to process the data after your query.

I would do this by finding the highest/lowest category, and doing a loop to fill in all values in between. At each pass through the loop, you build one array for you categories, and two separate arrays for your data series, including both the x and y values.

How to do it specifically will depend on how you are getting your data and what environment you are working in.

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

How about using one concatenated categories, and for each of points use proper index of that category? Like this: http://jsfiddle.net/teEQ3/9/

$('#container1').highcharts({
    xAxis: {
        categories: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] // result from  query
    },

    legend: {
        enabled: false
    },

    series: [{
        id: 'someId',
        data: [ [0, 106.4], [1, 129.2], [2, 144.0]] // result from  query
    }, {
        id: 'someId2',
        data: [ [1, 148.5], [2, 216.4], [3, 194.1], [4, 95.6], [5, 54.4]] // result from  query
    }]
});

As you said: two charts combined in one.

Upvotes: 1

Related Questions