Closed KacperMadej closed 7 years ago
It wouldn't work with an <iframe>
with any HC-plugin, but it works with script injection, like any Highcharts plugin should.
The problem is that the data points need the sequence
property, which is not available in the Cloud. This is also a problem with any Highcharts plugin which needs plugin-specific option configuration. It would have to be added in the Cloud's "custom code" box, together with the motion
options:
Highcharts.extend(options, Highcharts.merge(options, {
motion: {
enabled: true,
series: 0,
labels: [2014, 2015, 2016, 2017]
}
}));
var data = options.series[0].data;
data[0] = {name: 'Firefox', y: 45, sequence: [45, 38, 29, 25]};
data[1] = {name: 'IE', y: 26.8, sequence: [26.8, 22, 21, 15]};
data[2] = {name: 'Chrome', y: 12.8, sequence: [12.8, 15, 20, 30]};
data[3] = {name: 'Safari', y: 8.5, sequence: [8.5, 5, 4, 3]};
data[4] = {name: 'Opera', y: 6.2, sequence: [6.2, 4, 3, 2]};
data[5] = {name: 'Others', y: 0.7, sequence: [0.7, 0.6, 0.5, 0.4]};
The plugin script and styling also has to be added to the embed code:
<style>
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
#play-controls {
text-align: center;
width: 100%;
padding: 5px 0 1em 0;
}
#play-controls * {
display: inline-block;
vertical-align: middle;
}
#play-pause-button {
width: 30px;
height: 30px;
text-align: center;
font-size: 15px;
outline: none;
cursor: pointer;
}
#play-range {
margin: 2.5%;
width: 70%;
}
#play-output {
font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
</style>
<script src="//cloud.highcharts.com/resources/js/highstock-cloud.js"></script>
<!--Optional--><script src="//code.highcharts.com/modules/exporting.js"></script>
<!--Optional--><script src="//highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://rawgit.com/larsac07/Motion-Highcharts-Plugin/master/motion.js"></script>
<div id='highcharts-erohuna'><script src='//cloud.highcharts.com/inject/erohuna' defer='defer'></script></div>
Working example (site expires in 14 days from now): https://lars-cabrera.squarespace.com/test
It seems that the plugin is not supported for embedded Highcharts Cloud chart when using with Squarespace (following steps from here: http://www.highcharts.com/cloud/how-to-share-on-blogs-webpages/embed-in-squarespace).
This might be more like a feature request than a bug.