C3 - gráfico de linhas. Nenhuma linha mostrada - jquery, charts, c3.js

Eu estou tentando obter o gráfico de linha C3 para se afogar usando uma entrada JSON.Mas por algum motivo, ele não está mostrando as linhas, mas apenas mostrando os pontos.

    chart = c3.generate({
data: {
x: "x",
json: [
{"period":"2016-09-18","mp-demo-1":30},
{"period":"2016-09-19","mp-demo-1":13},
{"period":"2016-09-20","mp-demo-1":39},
{"period":"2016-09-21","mp-demo-1":43},
{"period":"2016-09-22","mp-demo-1":27},
{"period":"2016-09-23","mp-demo-1":10},
{"period":"2016-09-24","mp-demo-1":10},
{"period":"2016-09-25","mp-demo-1":20},
{"period":"2016-09-26","mp-demo-1":18},
{"period":"2016-09-18","MP7":20},
{"period":"2016-09-19","MP7":33},
{"period":"2016-09-20","MP7":29},
{"period":"2016-09-21","MP7":23},
{"period":"2016-09-22","MP7":17},
{"period":"2016-09-23","MP7":10},
{"period":"2016-09-24","MP7":40},
{"period":"2016-09-25","MP7":30},
{"period":"2016-09-26","MP7":10}
],
keys: {
x: "period",
value: ["mp-demo-1", "MP7"]
}
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d"
}
}
}
});

Aqui está o meu violino para isso violino. O que está faltando aqui?

Respostas:

Talvez tente mover os dois valores para o mesmo objeto no json:

{"period":"2016-09-18","mp-demo-1":30, "MP7":20},

http://jsfiddle.net/14gsxv0w/