<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
let aiData = [{
year: 1950,
label: "The Turing Test"
},
{
year: 1956,
label: "The term “artificial intelligence” is coined"
},
{
year: 1959,
label: "The term “machine learning” is coined"
},
{
year: 1984,
label: "The term “AI winter” is coined"
},
{
year: 1989,
label: "CNNs applicability</br>demonstrated"
},
{
year: 1997,
label: "Deep Blue defeats</br>Garry Kasparov"
},
{
year: 2000,
label: "A Neural Probabilistic</br>Language Model"
},
{
year: 2011,
label: "Apple releases Siri"
},
{
year: 2019,
label: "Turing Natural Language Generation"
},
{
year: 2022,
label: "ChatGPT"
}
];
let aiData2 = [{
year: 1951,
label: "SNARC"
},
{
year: 1952,
label: "Samuel Checkers-Playing Program"
},
{
year: 1956,
label: "The Logic Theorist"
},
{
year: 1957,
label: "The General Problem Solver"
},
{
year: 1966,
label: "ELIZA and Shakey"
},
{
year: 1973,
label: "Artificial Intelligence: A General Survey"
},
{
year: 1974,
label: "The first AI winter begins"
}
];
let aiData3 = [{
year: 1980,
label: "Symbolics</br>Lispmachines</br>commercialized"
},
{
year: 1982,
label: "Fifth Generation Computer Systems"
},
{
year: 1985,
label: "Bayesian networks causal analysis"
},
{
year: 1988,
label: "A Statistical Approach to Language Translation"
},
{
year: 2009,
label: "Large-Scale Deep Unsupervised Learning"
}
];
let aiData4 = [{
year: 2011,
label: 'Watson</br>wins</br>on</br>Jeopardy!'
},
{
year: 2012,
label: 'Google\'s deep neural network project'
},
{
year: 2013,
label: 'China\'s Tianhe-2 fastest system'
},
{
year: 2014,
label: 'Facebook introduces DeepFace'
},
];
let aiData5 = [{
year: 2016,
label: 'AlphaGo</br>wins</br>at</br>Go'
},
{
year: 2017,
label: 'Google introduces the Transformer'
},
{
year: 2017,
label: 'Sopha: the first robot with citizenship'
},
{
year: 2018,
label: 'Cimon, GPT, Lovot'
},
];
let aiData6 = [{
year: 2020,
label: 'Curial GPT-3 LLM'
},
{
year: 2021,
label: 'Dall-E'
},
{
year: 2023,
label: 'GPT-4'
},
];
function seriesData(arr, backgroundColor, main) {
return arr.map((obj, i) => {
const pattern = [-70, -20, main ? 20 : 0];
const offsetY = pattern[i % pattern.length];
let config = {
values: [
[obj.year, 0.25]
],
description: obj.label,
marker: {
backgroundColor,
borderColor: main ? '#28ced7' : '#fff',
},
tooltip: {
text: '%plot-description</br>%k',
htmlMode: true,
},
valueBox: {
text: '%plot-description</br>%k',
fontColor: '#fff',
fontSize: 10,
htmlMode: true,
},
};
if (main) {
config.marker.offsetY = 20;
config.valueBox.offsetY = offsetY - 15;
} else {
config.marker.offsetY = offsetY;
config.valueBox.offsetY = offsetY + 15;
config.valueBox.textAlign = 'left';
config.valueBox.offsetX = 70;
config.valueBox.width = 100;
};
return config;
});
};
let series1 = seriesData(aiData, '#335a74', true);
let series2 = seriesData(aiData2, '#1cade4');
let series3 = seriesData(aiData3, '#2683c6');
let series4 = seriesData(aiData4, '#42ba97');
let series5 = seriesData(aiData5, '#3e8853');
let series6 = seriesData(aiData6, '#5fa5a1');
function config(text, i, backgroundColor, series) {
let y = 300 + (250 * (i - 1));
return {
type: 'scatter',
backgroundColor: '#07566b',
height: '250px',
y,
plot: {
marker: {
size: 14,
},
},
plotarea: {
margin: '5 0 10 45',
backgroundColor: '#0f828e',
},
scaleX: {
values: '1940:2030:10',
lineColor: 'none',
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
scaleY: {
lineColor: 'none',
values: '0:1:1',
label: {
text,
backgroundColor,
fontAngle: 360,
fontColor: '#fff',
fontSize: 12,
height: 237,
width: 125,
offsetX: 130,
},
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
series,
};
};
let chartConfig = {
layout: 'vertical',
graphset: [{
type: 'scatter',
backgroundColor: '#07566b',
height: 300,
title: {
text: 'AI History Timeline',
fontColor: '#fff',
},
plot: {
marker: {
size: 14,
offsetY: 35,
}
},
scaleX: {
values: '1940:2030:10',
lineColor: 'none',
guide: {
visible: false,
},
item: {
backgroundColor: '#28ced7',
fontColor: '#fff',
fontSize: 14,
padding: '15 10',
offsetX: 40,
width: '97%',
},
tick: {
visible: false,
},
},
scaleY: {
lineColor: 'none',
values: '0:1:1',
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
labels: [{
text: "Remix of",
url: 'https://www.officetimeline.com/blog/artificial-intelligence-ai-and-chatgpt-history-and-timelines',
target: '_blank',
fontSize: 10,
color: '#fff',
textAlign: 'left',
offsetX: -140,
offsetY: 13,
x: '100%',
width: 400,
}],
images: [{
src: 'https://app.zingsoft.com/api/file/8U500SLT/FbwOoN2vT9qAXtjFejXY_Screenshot%202026-04-10%20at%2011.33.43%E2%80%AFAM.png',
offsetX: -245,
offsetY: -30,
x: '100%',
backgroundScale: 0.20
}],
series: series1,
},
config('1950-1979', 1, '#1cade4', series2),
config('1980-2009', 2, '#2683c6', series3),
config('2010-2014', 3, '#42ba97', series4),
config('2015-2019', 4, '#3e8853', series5),
config('2020-2025', 5, '#5fa5a1', series6),
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '1550px',
});
});
</script>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
let aiData = [
{ year: 1950, label: "The Turing Test" },
{ year: 1956, label: "The term “artificial intelligence” is coined" },
{ year: 1959, label: "The term “machine learning” is coined" },
{ year: 1984, label: "The term “AI winter” is coined" },
{ year: 1989, label: "CNNs applicability</br>demonstrated" },
{ year: 1997, label: "Deep Blue defeats</br>Garry Kasparov" },
{ year: 2000, label: "A Neural Probabilistic</br>Language Model" },
{ year: 2011, label: "Apple releases Siri" },
{ year: 2019, label: "Turing Natural Language Generation" },
{ year: 2022, label: "ChatGPT" }
];
let aiData2 = [
{ year: 1951, label: "SNARC" },
{ year: 1952, label: "Samuel Checkers-Playing Program" },
{ year: 1956, label: "The Logic Theorist" },
{ year: 1957, label: "The General Problem Solver" },
{ year: 1966, label: "ELIZA and Shakey" },
{ year: 1973, label: "Artificial Intelligence: A General Survey" },
{ year: 1974, label: "The first AI winter begins" }
];
let aiData3 = [
{ year: 1980, label: "Symbolics</br>Lispmachines</br>commercialized" },
{ year: 1982, label: "Fifth Generation Computer Systems" },
{ year: 1985, label: "Bayesian networks causal analysis" },
{ year: 1988, label: "A Statistical Approach to Language Translation" },
{ year: 2009, label: "Large-Scale Deep Unsupervised Learning" }
];
let aiData4 = [
{ year: 2011, label: 'Watson</br>wins</br>on</br>Jeopardy!' },
{ year: 2012, label: 'Google\'s deep neural network project' },
{ year: 2013, label: 'China\'s Tianhe-2 fastest system' },
{ year: 2014, label: 'Facebook introduces DeepFace' },
];
let aiData5 = [
{ year: 2016, label: 'AlphaGo</br>wins</br>at</br>Go' },
{ year: 2017, label: 'Google introduces the Transformer' },
{ year: 2017, label: 'Sopha: the first robot with citizenship' },
{ year: 2018, label: 'Cimon, GPT, Lovot' },
];
let aiData6 = [
{ year: 2020, label: 'Curial GPT-3 LLM' },
{ year: 2021, label: 'Dall-E' },
{ year: 2023, label: 'GPT-4' },
];
function seriesData(arr, backgroundColor, main) {
return arr.map((obj, i) => {
const pattern = [-70, -20, main ? 20 : 0];
const offsetY = pattern[i % pattern.length];
let config = {
values: [[obj.year, 0.25]],
description: obj.label,
marker: {
backgroundColor,
borderColor: main ? '#28ced7' : '#fff',
},
tooltip: {
text: '%plot-description</br>%k',
htmlMode: true,
},
valueBox: {
text: '%plot-description</br>%k',
fontColor: '#fff',
fontSize: 10,
htmlMode: true,
},
};
if (main) {
config.marker.offsetY = 20;
config.valueBox.offsetY = offsetY - 15;
} else {
config.marker.offsetY = offsetY;
config.valueBox.offsetY = offsetY + 15;
config.valueBox.textAlign = 'left';
config.valueBox.offsetX = 70;
config.valueBox.width = 100;
};
return config;
});
};
let series1 = seriesData(aiData, '#335a74', true);
let series2 = seriesData(aiData2, '#1cade4');
let series3 = seriesData(aiData3, '#2683c6');
let series4 = seriesData(aiData4, '#42ba97');
let series5 = seriesData(aiData5, '#3e8853');
let series6 = seriesData(aiData6, '#5fa5a1');
function config(text, i, backgroundColor, series) {
let y = 300 + (250*(i-1));
return {
type: 'scatter',
backgroundColor: '#07566b',
height: '250px',
y,
plot: {
marker: {
size: 14,
},
},
plotarea: {
margin: '5 0 10 45',
backgroundColor: '#0f828e',
},
scaleX: {
values: '1940:2030:10',
lineColor: 'none',
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
scaleY: {
lineColor: 'none',
values: '0:1:1',
label: {
text,
backgroundColor,
fontAngle: 360,
fontColor: '#fff',
fontSize: 12,
height: 237,
width: 125,
offsetX: 130,
},
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
series,
};
};
let chartConfig = {
layout: 'vertical',
graphset: [
{
type: 'scatter',
backgroundColor: '#07566b',
height: 300,
title: {
text: 'AI History Timeline',
fontColor: '#fff',
},
plot: {
marker: {
size: 14,
offsetY: 35,
}
},
scaleX: {
values: '1940:2030:10',
lineColor: 'none',
guide: {
visible: false,
},
item: {
backgroundColor: '#28ced7',
fontColor: '#fff',
fontSize: 14,
padding: '15 10',
offsetX: 40,
width: '97%',
},
tick: {
visible: false,
},
},
scaleY: {
lineColor: 'none',
values: '0:1:1',
guide: {
visible: false,
},
item: {
visible: false,
},
tick: {
visible: false,
},
},
labels: [{
text: "Remix of",
url: 'https://www.officetimeline.com/blog/artificial-intelligence-ai-and-chatgpt-history-and-timelines',
target: '_blank',
fontSize: 10,
color: '#fff',
textAlign: 'left',
offsetX: -140,
offsetY: 13,
x: '100%',
width: 400,
}],
images: [{
src: 'https://app.zingsoft.com/api/file/8U500SLT/FbwOoN2vT9qAXtjFejXY_Screenshot%202026-04-10%20at%2011.33.43%E2%80%AFAM.png',
offsetX: -245,
offsetY: -30,
x: '100%',
backgroundScale: 0.20
}],
series: series1,
},
config('1950-1979', 1, '#1cade4', series2),
config('1980-2009', 2, '#2683c6', series3),
config('2010-2014', 3, '#42ba97', series4),
config('2015-2019', 4, '#3e8853', series5),
config('2020-2025', 5, '#5fa5a1', series6),
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '1550px',
});
});
