CODEWITHSUNDEEP
javascriptmysqlchartsc3.js
Prashant
Prashant

Reputation: 23

Multi line chart from mysql data c3

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"}
]

Upvotes: 2

Views: 451

Answers (1)

Sphinxxx
Sphinxxx

Reputation: 13017

Looking at the Timeseries example, you can make a chart that shows hours of the day:

var xHours = ['myXValues', "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
    timeFormat = '%H:%M';

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'myXValues',
        xFormat: timeFormat,
        columns: [
            //xHours,
            //['test', 30, 20, 10, 40, 15, 25],
        ],
    },
    axis: {
        x: { type: 'timeseries' }
    }
});

Then you need to split that long json array: For each day, create an array that contains that date's kpi values.

Finally, load each of those smaller arrays into the chart (chart.load()).

Example with added comments: https://codepen.io/Sphinxxxx/pen/BRLPwP?editors=0010

Upvotes: 1

Related Questions