Skip to content

Instantly share code, notes, and snippets.

@oscar6echo

oscar6echo/highchart-cdn-load-problem-version-7.1.0.html

Created August 19, 2019 17:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oscar6echo/ba3cdfb1b29bf80232747bf76adb8b47 to your computer and use it in GitHub Desktop.
Save oscar6echo/ba3cdfb1b29bf80232747bf76adb8b47 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
highchart-cdn-load-problem-version-7.1.0.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js"></script
><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div style="text-align:center;">
<div
id="0e79be2b_5ffd_4684_b915_e907f439ac3bcontainer_chart"
style="display: inline-block"
></div>
</div>
<script>
var version = "7.1.3"; /// DOES WORK
var version = "7.0.3"; /// DOES NOT WORK
require.config({
packages: [
{
name: "highstock",
main: "highstock"
}
],
paths: {
highstock: "https://code.highcharts.com/stock/" + version
}
});
require([
"highstock/highstock",
"highstock/modules/stock",
"highstock/modules/exporting",
"highstock/modules/offline-exporting",
"highstock/modules/export-data",
"highstock/modules/drilldown",
"highstock/modules/heatmap",
"highstock/modules/treemap",
"highstock/modules/sunburst"
], function(Highcharts) {
console.log("Highcharts");
console.log(Highcharts);
// This function runs when the above files have been loaded.
// build chart
var options = {
credits: {
enabled: true,
text: "Source: XXX Flow Strategy & Solutions.",
href: "http:\/\/www.example.com"
},
exporting: { enabled: true },
chart: {
animation: false,
width: 650,
height: 550,
zoomType: "xy",
renderTo: "0e79be2b_5ffd_4684_b915_e907f439ac3bcontainer_chart"
},
plotOptions: {
series: { animation: false, compare: "percent" },
line: { animation: false },
column: { animation: false }
},
legend: {
enabled: true,
layout: "horizontal",
align: "center",
maxHeight: 100
},
tooltip: {
enabled: true,
valueDecimals: 2,
pointFormat:
'<span style="color:{series.color}">{series.name}<\/span>: <b>{point.y}<\/b> ({point.change}%)<br\/>',
positioner:
"function (labelWidth, labelHeight, point) {\n var roundUp100 = function(d) { return 100*Math.floor(d\/100); },\n labelWidth = roundUp100(labelWidth),\n chart = window.charts['0e79be2b_5ffd_4684_b915_e907f439ac3b'];\n\n var tooltipX, tooltipY;\n var testX = (point.plotX + labelWidth * 0.7 > chart.plotWidth \/ 2) && (point.plotX - labelWidth * 0.7 < chart.plotWidth \/ 2);\n var testY = point.plotY < labelHeight * 0.7;\n\n if (testX && testY) {\n tooltipX = chart.plotLeft + (chart.plotWidth - labelWidth) \/ 2;\n tooltipY = chart.plotTop + chart.plotHeight - labelHeight;\n } else {\n tooltipX = chart.plotLeft + (chart.plotWidth - labelWidth) \/ 2;\n tooltipY = chart.plotTop;\n }\n\n return {\n x: tooltipX,\n y: tooltipY\n };\n}\n\n"
},
title: { text: "Time series plotted with HighStock" },
subtitle: { text: "Transparent access to the underlying js lib" },
yAxis: {
labels: {
formatter:
"function() { return (this.value > 0 ? ' + ' : '') + this.value + '%'; }\n"
},
gridLineWidth: 1.0,
gridLineDashStyle: "Dot"
},
xAxis: { gridLineWidth: 1.0, gridLineDashStyle: "Dot" },
series: [
{
name: "Track1",
yAxis: 0,
data: [
[1420070400000, 1.0],
[1420156800000, 0.9955809138],
[1420416000000, 0.9725156537],
[1420502400000, 0.955500866],
[1420588800000, 0.9735852581],
[1420675200000, 0.9709321132],
[1420761600000, 0.9726862121],
[1421020800000, 0.9570236218],
[1421107200000, 0.9442796901],
[1421193600000, 0.9139256061],
[1421280000000, 0.906900147],
[1421366400000, 0.9220566792],
[1421625600000, 0.9323895174],
[1421712000000, 0.922188246],
[1421798400000, 0.9074043661]
]
},
{
name: "Track2",
yAxis: 0,
data: [
[1420070400000, 1.0],
[1420156800000, 0.9933897589],
[1420416000000, 1.0021180625],
[1420502400000, 1.0063755871],
[1420588800000, 0.989508076],
[1420675200000, 0.9791839709],
[1420761600000, 0.9808684145],
[1421020800000, 0.958599166],
[1421107200000, 0.9663917939],
[1421193600000, 0.9724325877],
[1421280000000, 0.9811292493],
[1421366400000, 0.9553434953],
[1421625600000, 0.9400325607],
[1421712000000, 0.9346055877],
[1421798400000, 0.9179372035]
]
}
]
};
options = JSON.stringify(options);
options = JSON.parse(options, function(key, value) {
if (value && typeof value === "string") {
var check1 =
value
.replace(/\s+/g, "")
.replace(/\r?\n|\r/g, "")
.substr(0, 8) == "function",
check2 =
value
.replace(/\s+/g, "")
.replace(/\r?\n|\r/g, "")
.substr(0, 9) == "(function";
if (check1) {
var startBody = value.indexOf("{") + 1;
var endBody = value.lastIndexOf("}");
var startArgs = value.indexOf("(") + 1;
var endArgs = value.indexOf(")");
return new Function(
value.substring(startArgs, endArgs),
value.substring(startBody, endBody)
);
}
if (check2) {
return eval(value);
}
}
return value;
});
var opt = $.extend(true, {}, options);
if (window.opts == undefined) {
window.opts = {};
}
window.opts["0e79be2b_5ffd_4684_b915_e907f439ac3b"] = opt;
console.log(
'Highcharts/Highstock options accessible as opts["0e79be2b_5ffd_4684_b915_e907f439ac3b"]'
);
function create_table_0(uuid, chart) {
if (typeof window.charts == "undefined") {
window.charts = {};
}
window.charts[uuid] = chart;
console.log("create_table_0 " + uuid);
}
window.chart = new Highcharts.StockChart(options, function(chart) {
create_table_0("0e79be2b_5ffd_4684_b915_e907f439ac3b", chart);
});
console.log(
'Highcharts/Highstock chart accessible as charts["0e79be2b_5ffd_4684_b915_e907f439ac3b"]'
);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment