Javascript Graphics

JavaScript libraries to use for both Artificial Intelligence graphs and other charts:

Plotly.js

Plotly.js is a charting library that comes with over 40 chart types, 3D charts, statistical graphs, and SVG maps.

Chart.js

Chart.js comes with many built-in chart types:

Scatter
Line
Bar
Radar
Pie and Doughnut
Polar Area
Bubble

Chart.js is easy to use.

First, add a link to the providing CDN (Content Delivery Network):

<script

src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">

</script>

Then, add a <canvas> to where you want to draw the chart:

The canvas element must have a unique id.

That's all!

Google Chart

From simple line charts to complex hierarchical tree maps, the Google Chart gallery provides a large number of ready-to-use chart types:

Scatter Chart
Line Chart
Bar / Column Chart
Area Chart
Pie Chart
Donut Chart
Org Chart
Map / Geo Chart

How to Use Google Chart?

To use Google Chart in your web page, add a link to the charts loader:

<script

src="https://www.gstatic.com/charts/loader.js">

</script>

Google Chart is easy to use.

Just add a <div> element to display the chart:

The <div> element must have a unique id.

Then load the Google Graph API:

Load the Visualization API and the corechart package

Set a callback function to call when the API is loaded

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

That's all!

Bootstrap

https://replit.com/

index.html

<!doctype html>

<head>

<title>Hello, world!</title>

</head>

<body>

var xArray = [50,60,70,80,90,100,110,120,130,140,150];

var yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data

var data = [{

x:xArray,

y:yArray,

mode:"markers"

}];

// Define Layout

var layout = {

xaxis: {range: [40, 160], title: "Square Meters"},

yaxis: {range: [5, 16], title: "Price in Millions"},

title: "House Prices vs. Size"

};

// Display using Plotly

Plotly.newPlot("myPlot", data, layout);

</script>

<!--

-->

</body>

</html>

https://www.w3schools.com/ai/ai_plotly.asp

Page updated

Google Sites

Report abuse