Adding a Google Chart to Knack View

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([''], function () {

$(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']});

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

function load_page_data(){
url: '',
type: 'GET',
dataType: 'json',
headers: {
"Authorization": user,
'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];
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>');

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.

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!

Hey Tony, what errors do you get?

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.