with Puppeteer and Columns Ai?
Get the HTML of a webpage using Puppeteer. See the documentation for details.
Builds a graph object from scratch and publishes it. See the documentation
Get the title of a webpage using Puppeteer. See the documentation
Builds a graph object from a template and publishes it. See the documentation
Puppeteer is a Node.js library which provides a high-level API to control Chrome/Chromium over the DevTools Protocol. Puppeteer runs in headless mode on Chromium on Pipedream.
Using Puppeteer you can perform tasks including:
import { puppeteer } from '@pipedream/browsers';
export default defineComponent({
async run({steps, $}) {
const browser = await puppeteer.browser();
// Interact with the web page programmatically
// See Puppeeter's Page documentation for available methods:
// https://pptr.dev/api/puppeteer.page
const page = await browser.newPage();
await page.goto('https://pipedream.com/');
const title = await page.title();
const content = await page.content();
// The browser needs to be closed, otherwise the step will hang
await browser.close();
return { title, content }
},
})
import { ChartType } from 'columns-graph-model';
import { Columns } from 'columns-sdk';
export default defineComponent({
props: {
columns_ai: {
type: "app",
app: "columns_ai",
}
},
async run({steps, $}) {
const rows = [{
"value": 312,
"state": "WA",
"parent": "US"
}];// rows is an example data set where you should organize your data in a similar way.
//Instantiates a Columns SDK object with your API Key.
const columns = new Columns(this.columns_ai.$auth.api_key);
const data = columns.data(['state'], ['value'], rows);
const graph = columns.graph(data);
// switch to different chart types: BAR, PIE, DOUGHGUT, LINE, AREA, SCATTER, etc.
graph.type = ChartType.COLUMN;
// customise the graph (lots of options in its data model)
graph.settings.general.palette = ['#ff0000', '#00ff00', '#0000ff'];
graph.settings.general.background = '#00000002';
return graph;
},
})