Just wanna share using Laravel and Canvas JS

[herrygallery]

Just wanna share. I use Laravel 5.5. So in my Controller:

$data = Mymodel::select(‘id’,’tablecolumn1′, ‘tablecolumn2’)->orderBy(‘tablecolumn2’)->get();

Using $data->toArray(); the result need to be converted to requirement of Canvas JS, so I just use the syntax str_replace as necessary ():

$data = str_replace(‘”tablecolumn2″‘, ‘x’, $data);
$data = str_replace(‘”tablecolumn1″‘, ‘y’, $data);
$data = str_replace(‘”id”‘, ‘label’, $data);
$data = str_replace(‘label:’, ‘label:”‘, $data);
$data = str_replace(‘,y:’, ‘”,y:’, $data);

Then pass the variable to the view :

return view(‘pages.charts.canvasjs2’, [ ‘data’ => $data ]);

Dont forget to delete $data->toArray(), it gives me error if not deleted.

Then in view, in dataPoints, I just put the following :

dataPoints: <?php echo $data; ?>

And in the tooltip:

toolTipContent: “<b>Label :{label}, Value of X:{x}, Value of Y:{y}”,

Work like a charm :) …. Sweett….

[sibche2013]

hello
i want to use created_at column on my chart as X , but it needs to be in unixtimestamp format , how can i get or convert date from database from date like this 2019-03-17 17:48:05 to 1553720114 format?
thanks

[sibche2013]

when i use
dataPoints: <?php echo $data; ?>
that shows to me like this :
dataPoints:[{“x”:2019-03-17 17:48:05,”y”:100}]
but i want to show like this for showing on chart:
dataPoints:[{“x”:1483381800000,”y”:100}]}]
i can’t see chart by this format :
dataPoints:[{“x”:2019-03-17 17:48:05,”y”:100}]

[herryswastika]

I think thats not related to CanvasJS, but to your model in Laravel. How about accessor and mutator in Laravel? or convert using Carbon?

[sibche2013]

I don’t know how can i use in my code ,
this is my code in my controller :
public function viewArchives(){
$data = Archive::select(‘created_at’)->get();
return view(‘view.archives’, compact(‘data’));
}
and in view :
<?php echo $data;?>
the result is :
{“created_at”:”2019-03-17 19:10:30″}
but i want the result be like this :
{“created_at”:”1552849830″}

how can i do this?
thanks

• This reply was modified 5 years, 7 months ago by sibche2013.