Post: [HELP] How to populate chart.js with JSON data from API
06-27-2017, 06:17 AM #1
Fred
I am error
(adsbygoogle = window.adsbygoogle || []).push({});
Hello everyone, I have a question for the web developers. I'm using the YouTube API to generate JSON data. I'm using PHP to retrieve the data, but I was wondering how to populate a chart like chart.js with the API data to create a plot chart to give the user specific feed back on there data such as monthly views, subscribers, comments, likes, etc. I'm not that experienced with JS so i'd really appreciate the help. I would appreciate any help possible, thank you.

This is the json sample json file i'm looking to do

You must login or register to view this content.

This is the kind of chart i'd like with the data

You must login or register to view this content.
06-27-2017, 05:16 PM #2
Algebra
[move]mov eax, 69[/move]
Originally posted by Fred View Post
Hello everyone, I have a question for the web developers. I'm using the YouTube API to generate JSON data. I'm using PHP to retrieve the data, but I was wondering how to populate a chart like chart.js with the API data to create a plot chart to give the user specific feed back on there data such as monthly views, subscribers, comments, likes, etc. I'm not that experienced with JS so i'd really appreciate the help. I would appreciate any help possible, thank you.

This is the json sample json file i'm looking to do

You must login or register to view this content.

This is the kind of chart i'd like with the data

You must login or register to view this content.


Can you show any code examples of what you have tried so far ?
06-27-2017, 06:18 PM #3
Fred
I am error
Originally posted by Algebra View Post
Can you show any code examples of what you have tried so far ?


From what code? From the PHP i'm using to retrieve the data? So far i'm using it to retrieve the monthly views and the channel id so the user is able to sign in, but I didn't actually write the code, I got it from some YouTube network devs a few years ago and lost contact with them now. Now as for putting the data into the chart.js file and displaying it, I have nothing.

Heres the code i'm using to authenticate the user and retrieve monthly views, but i'm not good at parsing json data and able to loop through the json data and retrieve everything like in an array.

    <?php set_time_limit(0);
ob_start();

/******Change these ********/
$client_id="xxxxx";
$email_address="xxxxxx";
$client_secret="xxxxxx";
$redirect_uris="xxxxxx";
$javascript_origins="xxxxxxx";




function get_access_token($authentication_code,$client_id,$client_secret,$redirect_uris){
$url = "https://accounts.google.com/o/oauth2/token";
$post="code={$authentication_code}&client_id={$client_id}&client_secret={$client_secret}&redirect_uri={$redirect_uris}&grant_type=authorization_code";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $result=json_decode($st,TRUE);
}

function get_curl($url){
$ch = curl_init();
$headers = array("Content-type: application/json");
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $result=json_decode($st,TRUE);
}
function get_id($url){
$ch = curl_init();
$headers = array("Content-type: application/json");
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $st;
}



if(isset($_GET['code'])){
$authentication_code=$_GET['code'];
}

if ($access_token=='' && $authentication_code!=''Winky Winky{
/******Get The authorization Code/Access Token******/
$result=get_access_token($authentication_code,$client_id,$client_secret,$redirect_uris);
/***Take access token, also there is the expiration duration*****/
$access_token=$result['access_token'];

$refresh_token=$result['refresh_token'];
}

if(!$access_token){
$auth_url="https://accounts.google.com/o/oauth2/auth";
$message = "<form id=form-login action='{$auth_url}' method=get>
<input type=hidden name=client_id value=$client_id>
<input type=hidden name=redirect_uri value=$redirect_uris>
<input type=hidden name=scope value=\"https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube.readonly\">
<input type=hidden name=response_type value=code>
<input type=hidden name=access_type value=offline>
<button class=\"btn btn-effect-ripple btn-lg btn-primary\" type=submit>Apply Now</button></form>";
} else {

$end_date=date('Y-m-d'Winky Winky;
$start_date=date('Y-m-d',strtotime("-1 months"));

$gcid="https://www.googleapis.com/youtube/v3/channels?part=id&mine=true&access_token={$access_token}";
$channelfind=get_id($gcid);

$s="https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date={$start_date}&end-date={$end_date}&metrics=views,comments,likes&dimensions=day&sort=day&access_token={$access_token}";
$view_data=get_curl($s);



$total_view=0;
foreach($view_data['rows'] as $v){
$total_view+=$v[1];
} //MONTHLY VIEWS NUMBER

$channelid = explode('id": "', $channelfind);
$channelid = explode('"
}
]
}', $channelid[1]);
$channelid = $channelid[0]; //CHANNELID

echo "Monthly Views: ".$total_view." <br />Channel ISad Awesome ".$channelid."<br />";
echo "access toke:".$access_token."";

}

echo $message
06-27-2017, 08:28 PM #4
Algebra
[move]mov eax, 69[/move]
Originally posted by Fred View Post
From what code? From the PHP i'm using to retrieve the data? So far i'm using it to retrieve the monthly views and the channel id so the user is able to sign in, but I didn't actually write the code, I got it from some YouTube network devs a few years ago and lost contact with them now. Now as for putting the data into the chart.js file and displaying it, I have nothing.

Heres the code i'm using to authenticate the user and retrieve monthly views, but i'm not good at parsing json data and able to loop through the json data and retrieve everything like in an array.

    <?php set_time_limit(0);
ob_start();

/******Change these ********/
$client_id="xxxxx";
$email_address="xxxxxx";
$client_secret="xxxxxx";
$redirect_uris="xxxxxx";
$javascript_origins="xxxxxxx";




function get_access_token($authentication_code,$client_id,$client_secret,$redirect_uris){
$url = "https://accounts.google.com/o/oauth2/token";
$post="code={$authentication_code}&client_id={$client_id}&client_secret={$client_secret}&redirect_uri={$redirect_uris}&grant_type=authorization_code";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $result=json_decode($st,TRUE);
}

function get_curl($url){
$ch = curl_init();
$headers = array("Content-type: application/json");
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $result=json_decode($st,TRUE);
}
function get_id($url){
$ch = curl_init();
$headers = array("Content-type: application/json");
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_COOKIEJAR,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_COOKIEFILE,'cookie.txt'Winky Winky;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3");
$st=curl_exec($ch);
return $st;
}



if(isset($_GET['code'])){
$authentication_code=$_GET['code'];
}

if ($access_token=='' && $authentication_code!=''Winky Winky{
/******Get The authorization Code/Access Token******/
$result=get_access_token($authentication_code,$client_id,$client_secret,$redirect_uris);
/***Take access token, also there is the expiration duration*****/
$access_token=$result['access_token'];

$refresh_token=$result['refresh_token'];
}

if(!$access_token){
$auth_url="https://accounts.google.com/o/oauth2/auth";
$message = "<form id=form-login action='https://www.nextgenupdate.com/forums/{$auth_url}' method=get>
<input type=hidden name=client_id value=$client_id>
<input type=hidden name=redirect_uri value=$redirect_uris>
<input type=hidden name=scope value=\"https://www.googleapis.com/auth/yt-analytics.readonly https://www.googleapis.com/auth/youtube.readonly\">
<input type=hidden name=response_type value=code>
<input type=hidden name=access_type value=offline>
<button class=\"btn btn-effect-ripple btn-lg btn-primary\" type=submit>Apply Now</button></form>";
} else {

$end_date=date('Y-m-d'Winky Winky;
$start_date=date('Y-m-d',strtotime("-1 months"));

$gcid="https://www.googleapis.com/youtube/v3/channels?part=id&mine=true&access_token={$access_token}";
$channelfind=get_id($gcid);

$s="https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date={$start_date}&end-date={$end_date}&metrics=views,comments,likes&dimensions=day&sort=day&access_token={$access_token}";
$view_data=get_curl($s);



$total_view=0;
foreach($view_data['rows'] as $v){
$total_view+=$v[1];
} //MONTHLY VIEWS NUMBER

$channelid = explode('id": "', $channelfind);
$channelid = explode('"
}
]
}', $channelid[1]);
$channelid = $channelid[0]; //CHANNELID

echo "Monthly Views: ".$total_view." <br />Channel ISad Awesome ".$channelid."<br />";
echo "access toke:".$access_token."";

}

echo $message



Check this out let me know if it helps you
You must login or register to view this content.
06-27-2017, 09:07 PM #5
Fred
I am error
Originally posted by Algebra View Post



Check this out let me know if it helps you
You must login or register to view this content.



It kinda gave me an idea, but i'm still real confused. I know as soon as like its completely explained to me i'll feel stupid, but i've never actually done anything like this with an API or JSON/JS. I don't know I think i'm completely overthinking it and making this way more complicated than it is. I'm just baffled and I don't even know where to begin to actually explain how i'm confused.
06-27-2017, 09:09 PM #6
Algebra
[move]mov eax, 69[/move]
Originally posted by Fred View Post
It kinda gave me an idea, but i'm still real confused. I know as soon as like its completely explained to me i'll feel stupid, but i've never actually done anything like this with an API or JSON/JS. I don't know I think i'm completely overthinking it and making this way more complicated than it is. I'm just baffled and I don't even know where to begin to actually explain how i'm confused.


Can you give me the JS code where you designed the chart you're using.
06-27-2017, 09:20 PM #7
Fred
I am error
Originally posted by Algebra View Post
Can you give me the JS code where you designed the chart you're using.


This is just a demo I have from a design i'm using. Basically what i'd be using, but with different labels and such.

    jQuery(document).ready(function() {

"use strict";

// Init Theme Core
Core.init();

// Init Demo JS
Demo.init();

var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];

// Chart data
var seriesData = [{
name: 'Phones',
data: [5.0, 9, 17, 22, 19, 11.5, 5.2, 9.5, 11.3, 15.3, 19.9, 24.6]
}, {
name: 'Notebooks',
data: [2.9, 3.2, 4.7, 5.5, 8.9, 12.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}, {
name: 'Awesome faceesktops',
data: [15, 19, 22.7, 29.3, 22.0, 17.0, 23.8, 19.1, 22.1, 14.1, 11.6, 7.5]
}, {
name: 'Music Players',
data: [11, 6, 5, 15, 17.0, 22.0, 30.8, 24.1, 14.1, 11.1, 9.6, 6.5]
}];

var ecomChart = $('#ecommerce_chart1'Winky Winky;

if (ecomChart.length) {
ecomChart.highcharts({
credits: false,
colors: highColors,
chart: {
backgroundColor: 'transparent',
className: 'br-r',
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift',
marginTop: 45,
marginRight: 1,
},
title: {
text: null
},
xAxis: {
gridLineColor: '#EEE',
lineColor: '#EEE',
tickColor: '#EEE',
categories: ['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Awesome faceec'
]
},
yAxis: {
min: 0,
tickInterval: 5,
gridLineColor: '#EEE',
title: {
text: null,
}
},
plotOptions: {
spline: {
lineWidth: 3,
},
area: {
fillOpacity: 0.2
}
},
legend: {
enabled: true,
floating: false,
align: 'right',
verticalAlign: 'top',
},
series: seriesData
});
}


});

Copyright © 2024, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo