Duel Y Axis d3.js Chart help required

I am really struggling to create a duel axis line chart using d3.js in appgyver. I have many charts working in my app so please don’t think of this as a basic question. Fundamentally cannot get this style of chart to work.

If you go to this page: Google Docs Charts
Then scroll down to the Dual-Y chart - this is what I am trying to create.

I have got the code working for my data set in JSfiddle (See attached) - you can copy and paste this into the console of JSfiddle and it generates fine.
Working js fiddle code.txt (1.2 KB)

I then transfer all the relevant parts over to the Java script box in appgyver but it always has a blank screen.

I have attached my chartData which I am trying to parse
Chart Data.txt (1.5 KB)

This data is perfectly readable when I run it using a normal line chart but I don’t get the dual axis:

I think the problem relates to this line of code in the google example:
var chartDiv = document.getElementById(‘chart_div’);

They are setting a variable called chartDiv within the drawChart function, then later on calling the drawMaterialChart function:
var materialChart = new google.charts.Line(chartDiv);

I don’t really know how to intergrate this into the appgyver Java script section as we have to use document.getElementById(‘chart_data_div’);

They are also calling new google.charts.Line(chartDiv); which does not seem to be recognised in the appgyver space, it seems to only recognise the classic charts new google.visualization.LineChart(chartDiv);

I can’t really use the classic charts as you have to mandate the horizontal axis ticks but mine will vary

if anyone can give me any guidance that would be great