1

I want to create a dashboard that would put together four different D3.js-based charts in a single layout. I found this solution: https://github.com/keen/dashboards/blob/gh-pages/README.md However, in readme I found this:

Setup: If you're a registered Keen IO user, navigate to your keen project or if you don't have a user at first, you can simply use some demo data that we've prepared for you. You can access those by going to the repository and navigating to demo-data. There, you will see some javascript files with some code in them. We will simply paste those in the .html file.

It is not clear to me if it's possible to use this tool as an open source or does it actually depend on the account in Keen IO?

Indeed what I need is just the template of the layout with different div containers and some CSS-based styling, so that I could put my D3.js charts in each div container.

Dinosaurius
  • 8,306
  • 19
  • 64
  • 113
  • Are you creating a dashboard with data from [keen.io](https://keen.io/)? This github project primarily looks like a demonstration on how to consume and visualize data from their APIs. If you are just trying to create a page with multiple `d3` charts (of your own making), then this question makes no sense. – Mark Feb 02 '17 at 12:12

1 Answers1

3

Your question is even more doubtful but this may be a duplicate of below question

how to show two d3.js diagrams on the same page

Another option is to use CanvasJS

HTML :

<div id="chartContainer1" style="height: 260px; width: 100%;"></div>
<div id="chartContainer2" style="height: 260px; width: 100%;"></div>

JavaScript :

var chart1 = new CanvasJS.Chart("chartContainer1",
    {

      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });

var chart2 = new CanvasJS.Chart("chartContainer2",
    {

      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 45},
        { x: 30, y: 30 },
        { x: 40, y: 65 },
        { x: 50, y: 55 },
        { x: 60, y: 88 },
        { x: 70, y: 38 },
        { x: 80, y: 54 },
        { x: 90, y: 13}
        ]
      }
      ]
    });

chart1.render();
chart2.render();

JsFiddle (CanvasJS): http://jsfiddle.net/nikdtu/x2fj6b9c/ JsFiddle (D3) : http://jsfiddle.net/nikdtu/4cyv2y0d/

Community
  • 1
  • 1
Nikhil Maheshwari
  • 2,198
  • 18
  • 25
  • It was not me who downvoted your answer, but please tell me why my question is doubtful? Also, I do not need to use Canvas.js. I have everything made using D3.js. Now just want to put things together on a single dashboard without re-inventing the wheel. – Dinosaurius Feb 02 '17 at 11:15
  • For D3 you can refer the link of another Stackoverflow question, Which I have mentioned in the answer. JSFiddle : http://jsfiddle.net/nikdtu/4cyv2y0d/ – Nikhil Maheshwari Feb 02 '17 at 11:30