1

I need a solution to represent the below data in D3.js

Ideally the chart should look similar to the example below.

Based on the following dataset I need to generate a Control Chart for the Javascript application am currently working on. I know D3.js has a lot of chart types but couldn't find which best fits the data. Some sample code would be great.

Dataset in Json format

{
"results": [
{
    "individualValues": 
    {
        "usl": 57.84,
        "nom": 47.7,
        "lsl": 37.56,
        "readings": [
        {
            "date": "2017-01-01T00:00:00.000Z",
            "value": 46.09
        },
        {
            "date": "2017-01-01T01:00:00.000Z",
            "value": 49.12
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 51.67
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 45.67
        }]
    }       
},

{
    "movingRangeValues": 
    {
        "usl": 12.46,
        "nom": 3.81,
        "lsl": 0,
        "readings": [
        {
            "date": "2017-01-01T00:00:00.000Z",
            "value": 3.09
        },
        {
            "date": "2017-01-01T01:00:00.000Z",
            "value": 1.12
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 7.67
        },
        {
            "date": "2017-01-01T02:00:00.000Z",
            "value": 1.67
        }]
    }       
}]

}

Expected result should look like this: this link.

Community
  • 1
  • 1
Coder Absolute
  • 5,417
  • 5
  • 26
  • 41
  • Can you also care to explain how this question is the exact duplicate of an existing question I previously asked, other than the chart is being used for the end result? – Coder Absolute Feb 21 '17 at 03:10
  • Both this question and the last one are off topic, because you have no code and are looking for a tutorial ("how to do it"). The difference between this question and the last one is that in this one you're adding the data, which is not a substantial difference. That being said, you should have edited the **last** question, not this one. However, S.O. is a democratic system: I can see two reopen votes so far. – Gerardo Furtado Feb 21 '17 at 06:21
  • @GerardoFurtado In the previous question, am asking for recommendation to propose the `charting library` which I think is against the SO rules. In the current question am asking for a solution using d3.js to the given problem. How are these two questions looks the same? – Coder Absolute Feb 21 '17 at 06:30
  • The moment you put a D3 tag in the question, you're asking how to do it **using D3**. It's the same thing. But here is what you want: I reopened the question. Good luck. – Gerardo Furtado Feb 21 '17 at 06:37
  • @GerardoFurtado this is not a duplicate question. The other question asked to recommend a library, this one asked how to do something using a specific library. Since you felt this one was off-topic for the same reasons, it would have been better to close it for the same reason rather than mark it as a duplicate. Beyond that, I think this question is valid, if a bit lazy, because asking how to do something is at he heart of SO, and narrowing it down to using JavaScript and D3 provides valuable context that makes the question easier to understand and easier to answer. – Old Pro Feb 21 '17 at 06:55
  • @Old I still believe it's off topic because there is no code at all. Despite you saying that *"asking how to do something is at he heart of SO"*, there is a specific off topic category for questions asking for a tutorial. Besides that, even both questions being off topic, it was not wrong closing it as a duplicate if the differences, I'll say it again, are not substantial. Anyway, the question is active and open. – Gerardo Furtado Feb 21 '17 at 07:01

0 Answers0