d3 v4 line chart transition not working Ask Question

I would like my line to draw like this example:

https://bl.ocks.org/shimizu/f7ef798894427a99efe5e173e003260d

The code below does not make any transitions, the chart just appears.

I’m aware of browser caching and that is not the issue. I’ve also tried changing the duration and that doesn’t help either. I feel like I’m probably not being explicit about how I want d3 to transition, but I’m unsure how to give d3 what it wants. Your help is greatly appreciated.

EDIT: x-axis domain: [0, 1]. y-axis domain: [-18600, -3300].

// Here's just a few rows of the data
data = [{"threshold": 0.0, "loss": -18600},
        {"threshold": 0.008571428571428572, "loss": -18600},
        {"threshold": 0.017142857142857144, "loss": -18600}]

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 20},
    width = +svg.attr("width") - 400 - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;


var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([0, height]);

var line = d3.line()
    .x(d => x(d.threshold))
    .y(d => y(d.loss));

var g = svg.append("g")
    .attr("transform", "translate(" + (margin.left + 50) + "," + margin.top + ")");

d3.json("static/data/thresh_losses.json", function(thisData) {
 draw(thisData);
});

let draw = function(data) {
    $("svg").empty()
    var x = d3.scaleLinear()
        .range([0, width]);

    var y = d3.scaleLinear()
        .range([0, height]);

    var line = d3.line()
        .x(d => x(d.threshold))
        .y(d => y(d.loss));

    var g = svg.append("g")
        .attr("transform", "translate(" + (margin.left + 50) + "," + margin.top + ")");

    d3.selectAll("g").transition().duration(3000).ease(d3.easeLinear);

    x.domain([0, d3.max(data, d => d.threshold)]);
    y.domain([d3.max(data, d => d.loss), d3.min(data, d => d.loss)]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .append("text")
        .attr("class", "axis-title")
        .attr("y", 18)
        .attr("dy", "1em")
        .attr("x", (height/2) - 40)
        .attr("dx", "1em")
        .style("text-anchor", "start")
        .attr("fill", "#5D6971")
        .text("Threshold");

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y))
        .append("text")
       .attr("class", "axis-title")
       .attr("transform", "rotate(-90)")
       .attr("y", -40)
       .attr("dy", ".71em")
       .attr("x", -height/2 + 40)
       .attr("dx", ".71em")
       .style("text-anchor", "end")
       .attr("fill", "#5D6971")
       .text("Profit ($)");

    var line_stuff = g.selectAll(".line")
        .data([data]);

    line_stuff.enter().append("path").classed("line", true)
           .merge(line_stuff);

    g.selectAll(".line")
      .transition()
      .duration(10000)
      .ease(d3.easeLinear)
      .attr("d", line);
};

convert a nested JSON file to a table using D3 Ask Question

I have JSON data similar to the one shown below. I would like to convert the same data into a table using D3.js can anyone help me on this?

JSON Data:

{
    "items": [
        {
        "tableName": "incidents",
        "count": 20000,
        "columnNames": [
            "id",
            "subject",
            "category"
        ],
        "rows": [
            [
                "61",
                "Test",
                null
            ],
            [
                "65",
                "TEST 2",
                null
            ]...
}

Output:

Id Subject Category

61  TEST 1  Null

65  TEST 2  Null

How to distribute nodes across all directions without overlapping in d3 chart Ask Question

I am trying to plot dependency graph using d3.

My plunkr what I have tried can be found here: http://plnkr.co/edit/kXlLhM2UziztoFfirX0u?p=preview

So, the node works fine, but it overlaps each other and only in one direction.

I am manually setting the distance between the node (because automatically not working)

var force = self.force = d3.layout.force()
                .nodes(data.nodes)
                .links(data.links)
                .linkDistance(function(d) { return (d.distance*10); })
                //.friction(0.5)
                .charge(-250)
                .size([w, h])
                .start();

But this makes node overlapping each other and also all the nodes are in same direction which is not intended. It should idealy spread across all direction.

Can anyone please help me here.

How to make sankey link flow out the bottom of the diagram in D3.js and html Ask Question

How to make sankey link flow down out the bottom of the diagram. I have used below code:

JS Code:

d3.sankey = function() {
  var sankey = {},
      nodeWidth = 24,
      nodePadding = 8,
      size = [1, 1],
      nodes = [],
      links = [];

  sankey.nodeWidth = function(_) {
    if (!arguments.length) return nodeWidth;
    nodeWidth = +_;
    return sankey;
  };

  sankey.nodePadding = function(_) {
    if (!arguments.length) return nodePadding;
    nodePadding = +_;
    return sankey;
  };

  sankey.nodes = function(_) {
    if (!arguments.length) return nodes;
    nodes = _;
    return sankey;
  };

  sankey.links = function(_) {
    if (!arguments.length) return links;
    links = _;
    return sankey;
  };

  sankey.size = function(_) {
    if (!arguments.length) return size;
    size = _;
    return sankey;
  };

  sankey.layout = function(iterations) {
    computeNodeLinks();
    computeNodeValues();
    computeNodeBreadths();
    computeNodeDepths(iterations);
    computeLinkDepths();
    return sankey;
  };

  sankey.relayout = function() {
    computeLinkDepths();
    return sankey;
  };

  sankey.link = function() {
    var curvature = .5;

    function link(d) {
      var x0 = d.source.x + d.source.dx,
          x1 = d.target.x,
          xi = d3.interpolateNumber(x0, x1),
          x2 = xi(curvature),
          x3 = xi(1 - curvature),
          y0 = d.source.y + d.sy + d.dy / 2,
          y1 = d.target.y + d.ty + d.dy / 2;
      return "M" + x0 + "," + y0
           + "C" + x2 + "," + y0
           + " " + x3 + "," + y1
           + " " + x1 + "," + y1;
    }

    link.curvature = function(_) {
      if (!arguments.length) return curvature;
      curvature = +_;
      return link;
    };

    return link;
  };

  // Populate the sourceLinks and targetLinks for each node.
  // Also, if the source and target are not objects, assume they are indices.
  function computeNodeLinks() {
    nodes.forEach(function(node) {
      node.sourceLinks = [];
      node.targetLinks = [];
    });
    links.forEach(function(link) {
      var source = link.source,
          target = link.target;
      if (typeof source === "number") source = link.source = nodes[link.source];
      if (typeof target === "number") target = link.target = nodes[link.target];
      source.sourceLinks.push(link);
      target.targetLinks.push(link);
    });
  }

  // Compute the value (size) of each node by summing the associated links.
  function computeNodeValues() {
    nodes.forEach(function(node) {
      node.value = Math.max(
        d3.sum(node.sourceLinks, value),
        d3.sum(node.targetLinks, value)
      );
    });
  }

  // Iteratively assign the breadth (x-position) for each node.
  // Nodes are assigned the maximum breadth of incoming neighbors plus one;
  // nodes with no incoming links are assigned breadth zero, while
  // nodes with no outgoing links are assigned the maximum breadth.
  function computeNodeBreadths() {
    var remainingNodes = nodes,
        nextNodes,
        x = 0;

    while (remainingNodes.length) {
      nextNodes = [];
      remainingNodes.forEach(function(node) {
        node.x = x;
        node.dx = nodeWidth;
        node.sourceLinks.forEach(function(link) {
          nextNodes.push(link.target);
        });
      });
      remainingNodes = nextNodes;
      ++x;
    }

    //
    moveSinksRight(x);
    scaleNodeBreadths((width - nodeWidth) / (x - 1));
  }

  function moveSourcesRight() {
    nodes.forEach(function(node) {
      if (!node.targetLinks.length) {
        node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1;
      }
    });
  }

  function moveSinksRight(x) {
    nodes.forEach(function(node) {
      if (!node.sourceLinks.length) {
        node.x = x - 1;
      }
    });
  }

  function scaleNodeBreadths(kx) {
    nodes.forEach(function(node) {
      node.x *= kx;
    });
  }

  function computeNodeDepths(iterations) {
    var nodesByBreadth = d3.nest()
        .key(function(d) { return d.x; })
        .sortKeys(d3.ascending)
        .entries(nodes)
        .map(function(d) { return d.values; });

    //
    initializeNodeDepth();
    resolveCollisions();
    for (var alpha = 1; iterations > 0; --iterations) {
      relaxRightToLeft(alpha *= .99);
      resolveCollisions();
      relaxLeftToRight(alpha);
      resolveCollisions();
    }

    function initializeNodeDepth() {
      var ky = d3.min(nodesByBreadth, function(nodes) {
        return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value);
      });

      nodesByBreadth.forEach(function(nodes) {
        nodes.forEach(function(node, i) {
          node.y = i;
          node.dy = node.value * ky;
        });
      });

      links.forEach(function(link) {
        link.dy = link.value * ky;
      });
    }

    function relaxLeftToRight(alpha) {
      nodesByBreadth.forEach(function(nodes, breadth) {
        nodes.forEach(function(node) {
          if (node.targetLinks.length) {
            var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value);
            node.y += (y - center(node)) * alpha;
          }
        });
      });

      function weightedSource(link) {
        return center(link.source) * link.value;
      }
    }

    function relaxRightToLeft(alpha) {
      nodesByBreadth.slice().reverse().forEach(function(nodes) {
        nodes.forEach(function(node) {
          if (node.sourceLinks.length) {
            var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value);
            node.y += (y - center(node)) * alpha;
          }
        });
      });

      function weightedTarget(link) {
        return center(link.target) * link.value;
      }
    }

    function resolveCollisions() {
      nodesByBreadth.forEach(function(nodes) {
        var node,
            dy,
            y0 = 0,
            n = nodes.length,
            i;

        // Push any overlapping nodes down.
        nodes.sort(ascendingDepth);
        for (i = 0; i < n; ++i) {
          node = nodes[i];
          dy = y0 - node.y;
          if (dy > 0) node.y += dy;
          y0 = node.y + node.dy + nodePadding;
        }

        // If the bottommost node goes outside the bounds, push it back up.
        dy = y0 - nodePadding - size[1];
        if (dy > 0) {
          y0 = node.y -= dy;

          // Push any overlapping nodes back up.
          for (i = n - 2; i >= 0; --i) {
            node = nodes[i];
            dy = node.y + node.dy + nodePadding - y0;
            if (dy > 0) node.y -= dy;
            y0 = node.y;
          }
        }
      });
    }

    function ascendingDepth(a, b) {
      return a.y + b.y;
    }
  }

  function computeLinkDepths() {
    nodes.forEach(function(node) {
      node.sourceLinks.sort(ascendingTargetDepth);
      node.targetLinks.sort(ascendingSourceDepth);
    });
    nodes.forEach(function(node) {
      var sy = 0, ty = 0;
      node.sourceLinks.forEach(function(link) {
        link.sy = sy;
        sy += link.dy;
      });
      node.targetLinks.forEach(function(link) {
        link.ty = ty;
        ty += link.dy;
      });
    });

    function ascendingSourceDepth(a, b) {
      return a.source.y - b.source.y;
    }

    function ascendingTargetDepth(a, b) {
      return a.target.y - b.target.y;
    }
  }

  function center(node) {
    return node.y + node.dy / 2;
  }

  function value(link) {
    return link.value;
  }

  return sankey;
};

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>SANKEY Experiment</title>
<style>


.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

.node text {
  pointer-events: none;
  text-shadow: 0 0px 0 #f00;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .40;
}

.link:hover {
  stroke-opacity: .25;
}

svg {
  position: absolute;
}

canvas {
  position: absolute;
}

</style>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="sankey.js"></script>
<script>

var units = "Energy";

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 1800 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

// format variables
var formatNumber = d3.format(",.0f"),    // zero decimal places
    format = function(d) { return formatNumber(d) + " " + units; },
    color = d3.scaleOrdinal(d3.schemeCategory20);

// append the svg object to the body of the page
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Set the sankey diagram properties
var sankey = d3.sankey()
    .nodeWidth(5)
    .nodePadding(90)
    .size([width, height]);

var path = sankey.link();

// load the data
d3.csv("test_1.csv", function(error, data) {

  //set up graph in same style as original example but empty  
  graph = {"nodes" : [], "links" : []};

  data.forEach(function (d) {
    graph.nodes.push({ "name": d.source });
    graph.nodes.push({ "name": d.target });
    graph.links.push({ "source": d.source,
                       "target": d.target,
                       "value": +d.value });
   });

  // return only the distinct / unique nodes
  graph.nodes = d3.keys(d3.nest()
    .key(function (d) { return d.name; })
    .object(graph.nodes));

  // loop through each link replacing the text with its index from node
  graph.links.forEach(function (d, i) {
    graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
    graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
  });

  // now loop through each nodes to make nodes an array of objects
  // rather than an array of strings
  graph.nodes.forEach(function (d, i) {
    graph.nodes[i] = { "name": d };
  });

  sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(1000);

  // add in the links
  var link = svg.append("g").selectAll(".link")
      .data(graph.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

  // add the link titles
  link.append("title")
        .text(function(d) {
            return d.source.name + " ? " + 
                d.target.name + "n" + format(d.value); });

  // add in the nodes
  var node = svg.append("g").selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { 
          return "translate(" + d.x + "," + d.y + ")"; })
      .call(d3.drag()
        .subject(function(d) {
          return d;
        })
        .on("start", function() {
          this.parentNode.appendChild(this);
        })
        .on("drag", dragmove));

  // add the rectangles for the nodes
  node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { 
          return d.color = color(d.name.replace(/ .*/, "")); })
      .style("stroke", function(d) { 
          return d3.rgb(d.color).darker(2); })
    .append("title")
      .text(function(d) { 
          return d.name + "n" + format(d.value); });

  // add in the title for the nodes
  node.append("text")
      .attr("x", -6)
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .attr("transform", null)
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x < width / 2; })
      .attr("x", 6 + sankey.nodeWidth())
      .attr("text-anchor", "start");

  // the function for moving the nodes
  function dragmove(d) {
    d3.select(this)
      .attr("transform", 
            "translate(" 
               + d.x + "," 
               + (d.y = Math.max(
                  0, Math.min(height - d.dy, d3.event.y))
                 ) + ")");
    sankey.relayout();
    link.attr("d", path);
  }
});

</script>

</body>

I want to make the sankey diagram as all losses and uses will go down flow but now I am not getting expected output. how can I make a link flow out of a node and off the diagram towards either the bottom or top?

Text Overlapping in D3.js Ask Question

I’m using d3.js for data visualization. But when I process big files containing many children it leads to overlap text each other. How can I prevent that?

  • My full d3 tree js is as shown below.
  • My issue also as shown below
    enter image description here

D3js:

function wrap(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            x = text.attr('x'),
            y = text.attr('y'),
            dy = 0, //parseFloat(text.attr('dy')),
            tspan = text.text(null)
                .append('tspan')
                .attr('x', x)
                .attr('y', y)
                .attr('dy', dy + 'em');
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(' '));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(' '));
                line = [word];
                tspan = text.append('tspan')
                    .attr('x', x)
                    .attr('y', y)
                    .attr('dy', lineHeight + dy + 'em')
                    .text(word);
            }
        }
    });
}

https://pastebin.com/Civ1fwmQ

How to use D3js scaleTime() Properly Ask Question

I am having a very troublesome issue which I really can’t figure out what is wrong with my code. I am trying to scale the x-axis according to my timestamp. However for every instance I tried I always less 1 column data.

What is wrong with my code? I noticed that at line 10, the variable deducedValue is used to indicate the column data. However it always less than 1. I have tried to do some changes as shown in line 29.

let w = $('#bodyBackground')[0];
    let clientWidthz = w.clientWidth;
    let clientHeightz = w.clientHeight;
    var radars = [];
    var newSample = [];
    var timeStampLegends = [];
    var deducedValue = 2;
    //insert a total of two timestamp 
    for (var i = 0; i < deducedValue; i++) {
        var legend_xTime = new Date(Date.now() - (i * 60 * 1000));
        timeStampLegends.push(legend_xTime);
    }
    //loop through the timestamp and perform data insertion
    timeStampLegends.forEach(function(dbData){
    	for(var unit = 1; unit <= 3; unit++){
    		var i = Math.random() * 1400;
            newSample.push({ radars: unit, timestamp: dbData, level: i });
    	}
    });
    var newI = 0;
    var margin = { top: 20, right: 20, bottom: 30, left: 60 };
    var width = clientWidthz - margin.left - margin.right;
    var height = clientHeightz - margin.top - margin.bottom;

  	console.log("this is the latter timeStampLegends:" + new Date(timeStampLegends[timeStampLegends.length - 1]));
  
    var x = d3.scaleTime()
        .domain([new Date(timeStampLegends[0]), (new Date(timeStampLegends[timeStampLegends.length - 1])) - (1 * 60 * 1000)])//min to max time
        .range([0, width]);

    var min = d3.min(newSample, function(d) {
        return d.radars;
    });

    var max = d3.max(newSample, function(d) {
        return d.radars;
    });
    console.log("this is the max value:" + max);
    var y = d3.scaleLinear()
        .domain([min-1, max])
        .range([0, height]);

    var xAxis = d3.axisTop(x).tickSize(height); //the size of the inner grid line (vertical - x-axis)

    var yAxis = d3.axisLeft(y).ticks(10).tickSize(-width); //the size of the inner grid line (horizontal - y - axis)

    var svg = d3.select(".DynamicScaling").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     

    var canvas = d3.select('.DynamicScaling').append("canvas")
        .attr("id", "canvas")
        //absolute: a feature that allows any sort of element
        //to be positioned disregards to other elements
        //i.e. it will calculate its own position again from (0,0)
        .style("position", "absolute")
        .style("top", "21")
        .style("left", "61")
        .attr("width", width) //optimization
        .attr("height", height);//optimization



    var context = canvas.node().getContext("2d");
    context.clearRect(0, 0, width, height);
    var detachedContainer = document.createElement("custom");
    var dataContainer = d3.select(detachedContainer);   

    var colorScale = d3.scaleLinear().domain([0, 600, 1200]).range(["#009933", "#FFCC00", "#990000"]);

    //x-axis (solely based on data of times)
    var timeLabels = svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", "translate(0," + (height) + ")")
        .style("font-size", "20px")
        .call(xAxis);

    //y-axis (solely based on data of radars)
    var radarLabels = svg.append("g")
                        .attr("class", "y-axis")
                        .call(yAxis);

    //console.log(JSON.stringify(newSample));
    var heatMap = dataContainer.selectAll(".custom.rect")
                .data(newSample)
                .enter().append("custom")
                .attr("x", function(d){
                    return x(d.timestamp);
                })
                .attr("y", function(d){
                    return y(d.radars);
                })
                .attr("class", "rect")
                //.attr("width", width)
                .attr("height", function(d){
                    console.log(y(d.radars - 1));
                    var offSetY = y(d.radars - 1) - y(d.radars);
                    return offSetY;
                })
                .attr("width", function(d){
                    var offSetX = x(d3.timeMinute.offset(d.timestamp-1)) - x(d.timestamp);
                    return offSetX;
                })
                /*.attr("height", function(d){
                    console.log(y(d.radars - 1));
                    var offSetY = y(d.radars - 1) - y(d.radars);
                    return offSetY;
                })*/
                //.attr("strokeStyle", "rgba(255,255,255,0.0)")
                .attr("fillStyle", function(d, i){
                    return colorScale(d.level);
                });

    //canvas.call(zoom);

    drawCanvas();

    function drawCanvas(){
        context.clearRect(0, 0, width, height);
        var elements = dataContainer.selectAll("custom.rect");

        elements.each(function(d){
            var node = d3.select(this);

            context.beginPath();
            context.fillStyle = node.attr("fillStyle");
            //context.strokeStyle = node.attr("strokeStyle");
            context.rect(node.attr("x"), node.attr("y"), node.attr("width"), node.attr("height"));
            //context.stroke();
            context.fill();
            context.closePath();
        });
    }
<script
  src="https://code.jquery.com/jquery-1.10.0.min.js"
  integrity="sha256-2+LznWeWgL7AJ1ciaIG5rFP7GKemzzl+K75tRyTByOE="
  crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<html>
<head>
    <title></title>
</head>

<body id="bodyBackground">
	<div class="DynamicScaling"></div>

</body>
</html>

Generate chart 3 using X,Y and Series Ask Question

I have this json

    [{
    "serie": "Advertencia",
    "x": 4,
    "y": 15
}, {
    "serie": "Advertencia",
    "x": 6,
    "y": 18
}, {
    "serie": "Advertencia",
    "x": 5,
    "y": 19
}, {
    "serie": "Advertencia",
    "x": 10,
    "y": 23
}, {
    "serie": "Advertencia",
    "x": 12,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 7,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 9,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 3,
    "y": 26
}, {
    "serie": "Advertencia",
    "x": 8,
    "y": 27
}, {
    "serie": "Advertencia",
    "x": 1,
    "y": 29
}, {
    "serie": "Advertencia",
    "x": 11,
    "y": 32
}, {
    "serie": "Advertencia",
    "x": 2,
    "y": 33
}, {
    "serie": "Suspensao",
    "x": 5,
    "y": 1
}, {
    "serie": "Suspensao",
    "x": 2,
    "y": 2
}, {
    "serie": "Suspensao",
    "x": 8,
    "y": 3
}, {
    "serie": "Suspensao",
    "x": 4,
    "y": 3
}, {
    "serie": "Suspensao",
    "x": 7,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 9,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 3,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 1,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 10,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 11,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 12,
    "y": 6
}, {
    "serie": "Suspensao",
    "x": 6,
    "y": 6
}]

this json is generated from my query of database. One list with X, Y and Series
I want generate c3 chart with this json data, in this way.
I tried follow this documentation c3 json data, but the json data, is many different.

I did manually json data and this is expected result:
chart

Someone can generate c3 chart like above using format json cited here ?

Edit1: this is code that i can generate using c3, but i make do manually json data:

var chart = c3.generate({
      bindto: '#chart2',
      data: {
        type: 'line',
        labels: true,
        json: [
          {
            x:1, Suspensao: 10, Advertencia:3
          },
          {
            x:2, Suspensao: 3, Advertencia:5
          }
        ],
        keys: {
          x: 'x', // it's possible to specify 'x' when category axis
          value: ['Advertencia', 'Suspensao']
        }
      },
      axis: {          
      }
    });

Edit2: something like morris chart:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});