как правильно построить диаграмму JQPlot
 

Здравствуйте. Я столкнулся с такой проблемой. Почему-то не
не появляется всплывающее окно значения.

Если зайти на страницу
https://steamcommunity.com/market/li...htmares%20Case
и вставить в консоль код выведет диаграмму, но зум и всплывающие значения диаграммы не выводятся. Возможно это из-за функции pricehistory_zoomMonthOrLifetime. Как её правильно написать?

let itemInfoDiv = document.getElementById("largeiteminfo");
let itemDiagramHistory = `<div id="diagram_history"></div>`;
itemInfoDiv.insertAdjacentHTML('afterend', itemDiagramHistory);
var lineHistory=[["Jan 21 2022 01: +0",10.675,"76680"],["Jan 22 2022 01: +0",6.173,"70330"],["Jan 23 2022 01: +0",4.914,"62767"],["Jan 24 2022 01: +0",4.328,"52950"],["Jan 25 2022 01: +0",3.996,"51942"],["Jan 26 2022 01: +0",3.329,"52060"],["Jan 27 2022 01: +0",3.007,"53145"],["Jan 28 2022 01: +0",2.833,"58964"],["Jan 29 2022 01: +0",2.639,"62989"],["Jan 30 2022 01: +0",2.32,"62221"],["Jan 31 2022 01: +0",2.149,"57524"],["Feb 01 2022 01: +0",2.253,"52495"],["Feb 02 2022 01: +0",2.249,"53070"],["Feb 03 2022 01: +0",2.177,"52633"],["Feb 04 2022 01: +0",2.091,"56569"],["Feb 05 2022 01: +0",2.028,"59364"],["Feb 06 2022 01: +0",1.827,"59430"],["Feb 07 2022 01: +0",1.677,"57285"],["Feb 08 2022 01: +0",1.595,"53459"],["Feb 09 2022 01: +0",1.458,"54600"],["Feb 10 2022 01: +0",1.478,"53461"],["Feb 11 2022 01: +0",1.53,"57660"],["Feb 12 2022 01: +0",1.537,"61756"],["Feb 13 2022 01: +0",1.478,"58925"],["Feb 14 2022 01: +0",1.371,"49140"],["Feb 15 2022 01: +0",1.348,"51438"],["Feb 16 2022 01: +0",1.382,"52438"],["Feb 17 2022 01: +0",1.376,"50224"],["Feb 18 2022 01: +0",1.37,"57686"],["Feb 19 2022 01: +0",1.347,"61149"],["Feb 20 2022 01: +0",1.248,"59893"],["Feb 21 2022 01: +0",1.2,"56376"],["Feb 22 2022 01: +0",1.207,"58730"],["Feb 23 2022 01: +0",1.187,"58204"]]

m_timePriceHistoryEarliest = new Date();
if (lineHistory != false) {
	m_timePriceHistoryEarliest = new Date(lineHistory[0][0]);
	m_timePriceHistoryLatest = new Date(lineHistory[lineHistory.length - 1][0]);
}



m_plotPriceHistory = CreateMyPriceHistoryGraph(lineHistory, 5, "$", "");

pricehistory_zoomMonthOrLifetime(m_plotPriceHistory, m_timePriceHistoryEarliest, m_timePriceHistoryLatest);

function CreateMyPriceHistoryGraph(lineHistory, numYAxisTicks, strFormatPrefix, strFormatSuffix) {
	var plot = $J.jqplot('diagram_history', [lineHistory], {
		title: { text: 'Медиана цен', textAlign: 'left' },
		gridPadding: { left: 45, right: 45, top: 25 },
		axesDefaults: { showTickMarks: false },
		axes: {
			xaxis: {
				renderer: $J.jqplot.DateAxisRenderer,
				tickOptions: { formatString: '%b %#d<span class="priceHistoryTime"> %#I%p<span>' },
				pad: 1
			},
			yaxis: {
				pad: 1.1,
				tickOptions: { formatString: strFormatPrefix + '%0.2f' + strFormatSuffix, labelPosition: 'start', showMark: false },
				numberTicks: numYAxisTicks
			}
		},
		grid: {
			gridLineColor: '#1b2939',
			borderColor: '#1b2939',
			background: '#101822'
		},
		cursor: {
			show: true,
			zoom: true,
			showTooltip: false
		},
		highlighter: {
			show: true,
			lineWidthAdjust: 2.5,
			sizeAdjust: 5,
			showTooltip: true,
			tooltipLocation: 'n',
			tooltipOffset: 20,
			fadeTooltip: true,
			yvalues: 2,
			formatString: '<strong>%s</strong><br>%s<br>Продано: %d'
		},
		series: [{ lineWidth: 3, markerOptions: { show: false, style: 'circle' } }],
		seriesColors: ["#688F3E"]
	});

	plot.defaultNumberTicks = numYAxisTicks;
	return plot;
}

function GetYAXisForPriceHistoryGraph(plotPriceHistory, timeMin, timeMax) {
	var min = -1;
	var max = 0.06;
	for (var index in plotPriceHistory.series[0].data) {
		var rgData = plotPriceHistory.series[0].data[index];
		if (rgData[0] >= timeMin.getTime() && rgData[0] <= timeMax.getTime()) {
			if (rgData[1] > max) {
				max = rgData[1];
			}

			if (rgData[1] < min || min == -1) {
				min = rgData[1];
			}
		}
	}

	return $J.jqplot.LinearTickGenerator(min, max, null, plotPriceHistory.defaultNumberTicks, false, false);
}



function pricehistory_zoomMonthOrLifetime(plotPriceHistory, timePriceHistoryEarliest, timePriceHistoryLatest) {
	var timeMonthAgo = new Date(timePriceHistoryLatest.getTime() - (30 * 24 * 60 * 60 * 1000));
	plotPriceHistory.resetZoom();

	var days = (timePriceHistoryLatest.getTime() - timePriceHistoryEarliest.getTime()) / (24 * 60 * 60 * 1000);
	if (days / 7 < 1) {
		var difference = timePriceHistoryLatest.getTime() - timePriceHistoryEarliest.getTime();
		plotPriceHistory.axes.xaxis.ticks = [timePriceHistoryEarliest, new Date(timePriceHistoryEarliest.getTime() + difference * 0.25), new Date(timePriceHistoryEarliest.getTime() + difference * 0.5), new Date(timePriceHistoryEarliest.getTime() + difference * 0.75), timePriceHistoryLatest];
	}
	else {
		plotPriceHistory.axes.xaxis.tickInterval = (days / 7) + " days";
	}
	if (timePriceHistoryEarliest > timeMonthAgo)
		plotPriceHistory.axes.xaxis.min = timePriceHistoryEarliest;
	else
		plotPriceHistory.axes.xaxis.min = timeMonthAgo;
	plotPriceHistory.axes.xaxis.max = timePriceHistoryLatest;

	var rgYAxis = GetYAXisForPriceHistoryGraph(plotPriceHistory, plotPriceHistory.axes.xaxis.min, timePriceHistoryLatest);
	plotPriceHistory.axes.yaxis.min = rgYAxis[0];
	plotPriceHistory.axes.yaxis.max = rgYAxis[1];
	plotPriceHistory.axes.yaxis.numberTicks = rgYAxis[2];
	plotPriceHistory.axes.yaxis.tickInterval = rgYAxis[4];

	plotPriceHistory.replot();

	$J('#diagram_history').children().first().remove();
	$J('#diagram_history').children().last().remove();

	return false;
}