С горем пополам подключил. Пришлось прописывать полный путь, включая https.
Теперь проблема другая не работают два графика одновременно. Подключал по отдельности два js файла, объединял скрипты в один файл, ни так ни так не работают два сразу, либо один, либо другой. Если объединяю скрипты в один файл, то почему то работает только нижний скрипт. Может кто поможет? Может нужно прописать какие-то условия, типа, если открывают одну страницу, то работает тот-то скрипт, если другую, то другой.
Вот два скрипта из файла (они идентичные, разница лишь в цвете графиков и значениях.):
window. onload = function () {
var chart= new CanvasJS.Chart("chartContainer-2", {
animationEnabled: true,
zoomEnabled:true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
axisY:{
includeZero: false,
prefix: "$",
gridColor: "#DDD",
gridThickness: 1,
gridDashType: "dot",
tickThickness: 1,
interval: 250,
maximum: 1900
},
axisX:{
valueFormatString: "DD-MM-YY",
gridColor: "#DDD",
gridDashType: "dot",
tickThickness: 1,
gridThickness: 1
},
toolTip: {
borderColor: "#61B057",
backgroundColor: "#fbfbfb",
borderThickness: 2,
cornerRadius: 3,
fontStyle: "normal",
fontFamily: "tahoma"
},
data: [
{
type: "spline",
markerSize: 8,
markerColor: "#61B057",
markerBorderColor: "#FFF",
markerBorderThickness: 1,
lineColor: "#61B057",
toolTipContent: "{x} <strong>${y} <strong>",
dataPoints: [
{ x: new Date(2017,06,01), y: 215.00 },
{ x: new Date(2017,06,02), y: 109.00 },
{ x: new Date(2017,06,03), y: 326.00 },
{ x: new Date(2017,06,04), y: 724.00 },
{ x: new Date(2017,06,05), y: 624.00 },
{ x: new Date(2017,06,06), y: 571.00 },
{ x: new Date(2017,06,07), y: 601.00 },
{ x: new Date(2017,06,08), y: 364.00 },
{ x: new Date(2017,06,09), y: 514.00 },
{ x: new Date(2017,06,10), y: 765.00 },
{ x: new Date(2017,06,11), y: 909.00 },
{ x: new Date(2017,06,12), y: 944.00 },
{ x: new Date(2017,06,13), y: 1186.00 },
{ x: new Date(2017,06,14), y: 1179.00 },
{ x: new Date(2017,06,18), y: 1182.00 },
{ x: new Date(2017,06,19), y: 989.00 },
{ x: new Date(2017,06,20), y: 1009.00 }
]
}
]
});
chart.render();
}
window. onload = function () {
var chart= new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled:true,
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
axisY:{
includeZero: false,
prefix: "$",
gridColor: "#DDD",
gridThickness: 1,
gridDashType: "dot",
tickThickness: 1,
interval: 250,
maximum: 1900
},
axisX:{
valueFormatString: "DD-MM-YY",
gridColor: "#DDD",
gridDashType: "dot",
tickThickness: 1,
gridThickness: 1
},
toolTip: {
borderColor: "#337ba7",
backgroundColor: "#fbfbfb",
borderThickness: 2,
cornerRadius: 3,
fontStyle: "normal",
fontFamily: "tahoma"
},
data: [
{
type: "spline",
markerSize: 8,
markerColor: "#337ba7",
markerBorderColor: "#FFF",
markerBorderThickness: 1,
lineColor: "#337ba7",
toolTipContent: "{x} <strong>${y} <strong>",
dataPoints: [
{ x: new Date(2017,06,01), y: 215.00 },
{ x: new Date(2017,06,02), y: 409.00 },
{ x: new Date(2017,06,03), y: 526.00 },
{ x: new Date(2017,06,04), y: 624.00 },
{ x: new Date(2017,06,05), y: 624.00 },
{ x: new Date(2017,06,06), y: 871.00 },
{ x: new Date(2017,06,07), y: 901.00 },
{ x: new Date(2017,06,08), y: 964.00 },
{ x: new Date(2017,06,09), y: 914.00 },
{ x: new Date(2017,06,10), y: 1065.00 },
{ x: new Date(2017,06,11), y: 1109.00 },
{ x: new Date(2017,06,12), y: 944.00 },
{ x: new Date(2017,06,13), y: 1186.00 },
{ x: new Date(2017,06,14), y: 1239.00 },
{ x: new Date(2017,06,18), y: 1382.00 },
{ x: new Date(2017,06,19), y: 1419.00 },
{ x: new Date(2017,06,20), y: 1419.00 }
]
}
]
});
chart.render();
}