Adding a Google Chart to Knack View

API & Customization Ask Developers
1

I saw a post about using Google charts with Knack data, but the post was from several years ago, so wanted to restart the conversation. I am trying to implement a simple line chart from Google charts with my Knack data, but I can't get the chart to work. Below is my code if anybody is willing/able to help. Really appreciate it.

 

LazyLoad.js(['https://www.gstatic.com/charts/loader.js'], function () {
console.log('Loaded: https://www.gstatic.com/charts/loader.js');
});

$(document).on('knack-view-render.view_67', function(event, view, data) {
$('<div id="chart_div" style="height: 500px;"></div>').insertBefore($("#view_67"));
});

$(document).on('knack-view-render.view_67', function(event, view, data) {

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(load_page_data);

var data_array = new Array();
data_array.push(['date', 'price', 'card', { role: "tooltip" }]);

function load_page_data(){
$.ajax({
url: 'https://api.knack.com/v1/pages/scene_33/views/view_78/records',
type: 'GET',
dataType: 'json',
headers: {
"Authorization": user,
'X-Knack-Application-Id':'xxxxxxxxx',
'X-Knack-REST-API-Key': "xxxxxxx",
'Content-Type': 'application/json'
},
success: function( data ) {
$.each( data.records , function (key,val) {
var date11 = val.field_63_raw;
var price = val.field_64;
var card = val.field_68;
var date=new Date(date1)
var add_arr = [ date, price, card];
data_array.push(add_arr);
});
drawSeries(data_array);
},
error: function() { console.log('error!'); },
});
};

function drawSeries() {
var data = google.visualization.arrayToDataTable(data_array);
var options = {
title: 'Line Chart',
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
$('#view_67 .view-header').after('<div id="chart_div" style="width:400; height:300"></div>');
});

2

Shouldn't matter if the view is a connection I think.

When you say 'isn't getting any data' from view_78 is the variable [data] not returning anything?  Add a console.log(data) after your success function call to see what's happening there perhaps.

Another approach is to add the table of data you want to chart on the same page, use a Knack.models[] call to grab the data easily (no ajax needed) and once it's working hide the table with CSS.

3

Hey Brad!

So the view I am calling (view 78) isn't getting any data. I think it might be because the table is a connection? Would that make sense? I'm able to pull the data when I do an object call & when I I do a call to a view that isn't a connection.

In an ideal world, I'd be able to turn a pivot table into an array that I can turn into a google chart. But are you able to call a pivot table view?

Appreciate you commenting back!

4

Hey Tony, what errors do you get?

5

Do any of you have any experience or knowledge on if you can do a similar task but using plotly.js instead of google charts?

Same desired result — full customizability of graphs/plots and wider array of options.