c3.js json problem

936 views
Skip to first unread message

theodo...@gmail.com

unread,
Dec 9, 2014, 1:44:18 PM12/9/14
to c3...@googlegroups.com
I am having trouble generating a proper chart ,

On the first try i managed to make my temperature and humidity appear on the chart, but the time on the x axis was not showing,

this was my code:

<style>

path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}

.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}

</style>
<?php

include("data.php");


?>
<body>


<link href="/Home/c3/c3.css" rel="stylesheet" type="text/css">
<script src="/Home/c3/d3.min.js"></script>
<script src="/Home/c3/c3.min.js"></script>
<div id="chart"></div>

<script>

setTimeout(function () {


var chart = c3.generate({
data: {
json: <?php echo json_encode($data); ?>,

keys: {
value: ['temperature', 'humidity']
},
},
axis : {
x : {

type : 'timestamp',
tick : {

x_format : '%Y-%m-%d %H:%M:%S',
}
}
}
});
},
2000);




</script>

</body>






On the second try, i read some documentation , i made the time appear on the x axis but only the first values showed on the graph, but they dont continue

Here is my second attempt code,



<style>

path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}

.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}

</style>
<?php

include("data.php");


?>
<body>


<link href="/Home/c3/c3.css" rel="stylesheet" type="text/css">
<script src="/Home/c3/d3.min.js"></script>
<script src="/Home/c3/c3.min.js"></script>
<div id="chart"></div>

<script>

setTimeout(function () {


var chart = c3.generate({
data: {

json: <?php echo json_encode($data); ?>,

keys: {
x:'timestamp',
value: ['timestamp','temperature', 'humidity']
},
},
axis : {
x : {

type : 'timeseries',
tick : {

xformat : '%Y-%m-%d %H:%M:%S',
}
}
}
});
},
2000);




</script>

</body>




and here is what my json php output is

[{"timestamp":"2014-12-08 23:55:01","temperature":"18","humidity":"14"},{"timestamp":"2014-12-08 23:56:06","temperature":"18","humidity":"14"},{"timestamp":"2014-12-08 23:57:12","temperature":"18","humidity":"14"},{"timestamp":"2014-12-08 23:58:17","temperature":"18","humidity":"14"},{"timestamp":"2014-12-08 23:59:22","temperature":"18","humidity":"14"}]


i would greatly appreciated if someone helped me

thanks in advance!







theodo...@gmail.com

unread,
Dec 11, 2014, 10:55:45 AM12/11/14
to c3...@googlegroups.com, theodo...@gmail.com
After trying to find out the source of the problem , the javascript debugger says : "Failed to parse x '2014-12-11 04:23:37' to Date object" any clues??
Message has been deleted

pgu...@gmail.com

unread,
Jan 18, 2015, 1:33:54 PM1/18/15
to c3...@googlegroups.com, theodo...@gmail.com
I have the same problem with JSON data. Look here:

http://jsfiddle.net/vjr4g13k/4/

What is my mistake?

Rininsland, Ændrew

unread,
Jan 19, 2015, 5:41:04 AM1/19/15
to pgu...@gmail.com, c3...@googlegroups.com, theodo...@gmail.com
Good question, that — I couldn't get timeseries to work with 10 minutes of fiddling. Maybe try it as a categorical axis? Weird timeseries isn't working, though... http://jsfiddle.net/aendrew/vjr4g13k/5/

Ændrew Rininsland <aendrew.r...@the-times.co.uk>
News Developer, The Times and The Sunday Times
w: +44(0)207 7826353
m: +44(0)7402 388762
Twitter: @aendrew


--
You received this message because you are subscribed to the Google Groups "c3js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to c3js+uns...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/c3js/68f6eb6d-381f-4941-aa78-c5aa2abfb438%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

"Please consider the environment before printing this e-mail"


Newsworks - bringing advertisers and newsbrands together

www.newsworks.org.uk


This e-mail and any attachments are confidential, may be

legally privileged and are the property of News Corp UK & Ireland

Limited on whose systems they were generated. News Corp UK

& Ireland Limited is the holding company for the News UK group,

is registered in England & Wales under number 81701, has its

registered office at 1 London Bridge Street, London, SE1 9GF and

is registered with VAT number GB 243 8054 69. If you have received

this e-mail in error, please notify the sender immediately and do not

use, distribute, store or copy it in any way. Statements or opinions in

this e-mail or any attachment are those of the author and are not
necessarily agreed or authorised by News Corp UK & Ireland Limited

or any member of its group. News Corp UK & Ireland Limited may

monitor outgoing or incoming emails as permitted by law.  It accepts

no liability for viruses introduced by this e-mail or attachments. 

News Corp UK & Ireland Limited and its titles are committed to abiding by 
IPSO's regulations and the Editors' Code of Practice that IPSO enforces.

Rininsland, Ændrew

unread,
Jan 19, 2015, 5:52:20 AM1/19/15
to pgu...@gmail.com, c3...@googlegroups.com, theodo...@gmail.com
Wait, figured it out. You're putting xFormat inside data.keys, it's just data.format. See: http://jsfiddle.net/aendrew/vjr4g13k/6/

Cheers,

Ændrew Rininsland <aendrew.r...@the-times.co.uk>
News Developer, The Times and The Sunday Times
w: +44(0)207 7826353
m: +44(0)7402 388762
Twitter: @aendrew

Patrick Gugel

unread,
Jan 19, 2015, 6:06:28 AM1/19/15
to Rininsland, Ændrew, c3...@googlegroups.com, theodo...@gmail.com
Jep, that's it. Thanks a lot. Drove me crazy yesterday. 
You received this message because you are subscribed to a topic in the Google Groups "c3js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/c3js/8TWwBa8JHy4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to c3js+uns...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/c3js/CAEg79Fwxn0Y3idoyUU6NszPb1VJcmgnRqn-XdQ%2BPgNEa_-zmVA%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages