Question

I have a mysql table with date, hour of day and a parameter value. I want to display a graph with hour of day as x-axis and multiple lines, one for each day. I have got the data into json format, how can i display multiple lines, one for each day in c3.js ?

json format: [
    {"hour":"00:00:00","day":"2017-04-18","kpi":"41.54"},
    {"hour":"01:00:00","day":"2017-04-18","kpi":"0.00"},
    {"hour":"02:00:00","day":"2017-04-18","kpi":"0.00"},
    {"hour":"03:00:00","day":"2017-04-18","kpi":"0.00"},
    {"hour":"04:00:00","day":"2017-04-18","kpi":"0.00"},
    {"hour":"05:00:00","day":"2017-04-18","kpi":"0.00"},
    {"hour":"06:00:00","day":"2017-04-18","kpi":"31.94"},
    {"hour":"07:00:00","day":"2017-04-18","kpi":"47.44"},
    {"hour":"08:00:00","day":"2017-04-18","kpi":"35.05"},
    {"hour":"09:00:00","day":"2017-04-18","kpi":"43.24"},
    {"hour":"10:00:00","day":"2017-04-18","kpi":"32.40"},
    {"hour":"11:00:00","day":"2017-04-18","kpi":"32.03"},
    {"hour":"12:00:00","day":"2017-04-18","kpi":"37.22"},
    {"hour":"13:00:00","day":"2017-04-18","kpi":"30.85"},
    ...
    {"hour":"00:00:00","day":"2017-04-19","kpi":"44.88"},
    {"hour":"01:00:00","day":"2017-04-19","kpi":"0.00"},
    {"hour":"02:00:00","day":"2017-04-19","kpi":"0.00"},
    {"hour":"03:00:00","day":"2017-04-19","kpi":"0.00"},
    {"hour":"04:00:00","day":"2017-04-19","kpi":"0.00"},
    {"hour":"05:00:00","day":"2017-04-19","kpi":"0.00"},
    {"hour":"06:00:00","day":"2017-04-19","kpi":"38.75"},
    {"hour":"07:00:00","day":"2017-04-19","kpi":"40.03"},
    {"hour":"08:00:00","day":"2017-04-19","kpi":"37.36"}
]

Answer 1

查看Timeseries example，您可以创建一个显示一天中小时数的图表：

kpi

然后你需要拆分那个长的json数组：每天创建一个包含该日期chart.load()值的数组。

最后，将每个较小的数组加载到图表中（inline-block）。

添加评论的示例：https://codepen.io/Sphinxxxx/pen/BRLPwP?editors=0010

Multi line chart from mysql data c3

1 个答案: