CODEWITHSUNDEEP
javascriptjsond3.jsc3.js
Amesys
Amesys

Reputation: 836

Is it possible to combine data from JSON object AND from columns? [C3JS]

I am trying to combine 2 types of charts ('scatter' and 'line') having both different data's origin.

I'm able to display successfully each of them alone (hence the following screenshots), but not both together.

Scatter Line Graphs

My guess is that the use of data.keys override the display of the data coming from my columns, but I haven't found yet anything relevant to this problem. 

var jsondata = [{
  "intentId": "QP3035",
  "intentName": "lapin",
  "confidence": 90,
  "occurences": 150
}, {
  "intentId": "QP4019",
  "intentName": "ours",
  "confidence": 80,
  "occurences": 140
}, {
  "intentId": "QP4022",
  "intentName": "chouette",
  "confidence": 60,
  "occurences": 60
}, {
  "intentId": "QP3032 ",
  "intentName": "cheval",
  "confidence": 21,
  "occurences": 120
}, {
  "intentId": "QP4029",
  "intentName": "poule",
  "confidence": 18,
  "occurences": 17
}];

jsondata = jsonfile.sort(function(a, b) {
  return a.confidence - b.confidence;
});


var test = c3.generate({
  bindto: '#intentsConfidenceChart',
  data: {
    json: jsondata,
    keys: {
        x: 'confidence',
      value: ['confidence', 'occurences']
    },
    xs: {
        graphTop: 'x1',
        graphBot: 'x2'
    },
    columns: [
        ['x1',20,100],
        ['x2', 20,20,90,100,100],
        ['graphTop',160,160],
        ['graphBot',160,140,40,40,160]
    ],
    types:{
        occurences: 'scatter',
        graphTop:'line',
      graphBot:'line'
    }
  },
  axis: {
    x: {
      min: 0,
      max: 100,
      label: 'Confidence Level',
      tick: {
        fit: false
      }
    },
    y: {
      label: 'Occurences'
    }
  },
  legend: {
    show: false
  },
  tooltip: {
    contents: function(d) {
      return jsonfile[d[0].index].intentId + ' : ' + jsonfile[d[0].index].intentName;
    }
  }
});

(By the way, the reason I draw these graphs is that I would like to have a responsive region discriminating a certain area of my graph. I've struggled a lot with svg before starting to envisage this little hack.)

Many thanks in advance!

Upvotes: 0

Views: 252

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

I don't think it's possible to mix jsondata with columns directly.

But you can transform your json into array and use it alongside with other arrays:

  data: {
    //json: jsondata,
    // keys: {
    //     x: 'confidence',
    //   value: ['confidence', 'occurences']
    // },
    xs: {
        graphTop: 'x1',
        graphBot: 'x2',
        confidence: 'occurences'
    },
    columns: [
        ['x1',20,100],
        ['x2', 20,20,90,100,100],
        ['graphTop',160,160],
        ['graphBot',160,140,40,40,160],
        ["confidence", 90, 80, 60, 21, 18],
        ["occurences", 150, 140 , 60, 120, 17]
    ],

Upvotes: 2

Related Questions