0

I'm trying to create a graph with multiple y axes like this example: http://c3js.org/samples/axes_y2.html, using Keen IO, but can't seem to figure it out. Any pointers?

EDIT: figured it out, just have to add to chartOptions :

.chartOptions({
                data: {
                    axes: {
                        "Series 1": "y2",
                        "Series 2": "y2"
                    }
                },
                axis:{
                    y: {
                        label: "label1"
                    },
                    y2: {
                        label: "label2",
                        show: true
                    }
                }
jgui
  • 1
  • 1

1 Answers1

0

https://github.com/keen/keen-dataviz.js#multiple-query-results-on-one-chart

 const client = new KeenAnalysis({
   projectId: 'YOUR_PROJECT_ID',
   readKey: 'YOUR_READ_KEY'
   });

 const queryPageviews = client
   .query({
   analysis_type: 'count',
   event_collection: 'pageviews',
   timeframe: 'this_30_days',
   interval: 'daily'
   });

 const queryFormSubmissions = client
   .query({
     analysis_type: 'count',
     event_collection: 'form_submissions',
     timeframe: 'this_30_days',
     interval: 'daily'
   });

 client
   .run([queryPageviews, queryFormSubmissions])
   .then(results => {
     const chart = new KeenDataviz({
       container: '#some_container',
       results,
       // optional
       labelMapping: {
         'pageviews count': 'Pageviews',
         'form_submissions count': 'Forms collected'
       }
      });
  })
  .catch(err => {
    // Handle errors
    console.error(err);
  });

If you don't want to rely so much on queries - you can always pass your custom data. https://jsfiddle.net/94z60cpp/

  const result = {
    'clicks': [3, 14, 7, 22, 11, 55, 11, 22],
    'views': [14, 58, 11, 32, 11, 23, 45, 66]
  };

  function customParser(data){
      var ds = new KeenDataset();
      Object.keys(data).forEach(dataKey => {
        ds.appendColumn(dataKey);
        data[dataKey].forEach((item, itemIndex) => {
          ds.set([dataKey, itemIndex+1], item);
        });
      });
      return ds;
  }

  chart
    .render(customParser(result));
AdamKas
  • 1
  • 4