How to show a Highcharts (www.highcharts.com) chart?

Design help General
1

Dear friends,

I am trying to embed a chart from Highcharts in my Webflow website with no success. Would you guide me please?

The Highchart (www.highchart.com) comes with two codes. Where do I put those codes to see them in my site?

One code is a HTML and other code is a Javascript. You can see both in this link bellow:

I am also coping both codes bellow, so you can see.

HTML CODE:

JAVASCRIPT CODE

$(function () {
$(‘#container’).highcharts({
chart: {
type: ‘spline’
},
title: {
text: ‘Wind speed during two days’
},
subtitle: {
text: ‘October 6th and 7th 2009 at two locations in Vik i Sogn, Norway’
},
xAxis: {
type: ‘datetime’,
labels: {
overflow: ‘justify’
}
},
yAxis: {
title: {
text: ‘Wind speed (m/s)’
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: ‘rgba(68, 170, 213, 0.1)’,
label: {
text: ‘Light air’,
style: {
color: ‘#606060’
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: ‘rgba(0, 0, 0, 0)’,
label: {
text: ‘Light breeze’,
style: {
color: ‘#606060’
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: ‘rgba(68, 170, 213, 0.1)’,
label: {
text: ‘Gentle breeze’,
style: {
color: ‘#606060’
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: ‘rgba(0, 0, 0, 0)’,
label: {
text: ‘Moderate breeze’,
style: {
color: ‘#606060’
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: ‘rgba(68, 170, 213, 0.1)’,
label: {
text: ‘Fresh breeze’,
style: {
color: ‘#606060’
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: ‘rgba(0, 0, 0, 0)’,
label: {
text: ‘Strong breeze’,
style: {
color: ‘#606060’
}
}
}, { // High wind
from: 14,
to: 15,
color: ‘rgba(68, 170, 213, 0.1)’,
label: {
text: ‘High wind’,
style: {
color: ‘#606060’
}
}
}]
},
tooltip: {
valueSuffix: ’ m/s’
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
}
},
series: [{
name: ‘Hestavollane’,
data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
3.0, 3.0]

}, {
name: ‘Voll’,
data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
}],
navigation: {
menuItemStyle: {
fontSize: ‘10px’
}
}
});
});

Thanks a lot!

Ricardo Maluf
ricodmaluf@gmail.com

2

Hey,

there are a lot articles about these fundamental topics under the “tutorials” or “docs” links.

Maybe this will help you:

Regards
Daniel

3

Thanks Daniel,

I saw this link but could not embed it. I am not very familiar with code, so I should need something more detailed. Where do I put each code? And how do I call the chart inside the Webflow editor?

Thanks

4

INTO BODY CODE:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Wind speed during two days'
        },
        subtitle: {
            text: 'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            }
        },
        yAxis: {
            title: {
                text: 'Wind speed (m/s)'
            },
            min: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [{ // Light air
                from: 0.3,
                to: 1.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Light air',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Light breeze
                from: 1.5,
                to: 3.3,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Light breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Gentle breeze
                from: 3.3,
                to: 5.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Gentle breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Moderate breeze
                from: 5.5,
                to: 8,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Moderate breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Fresh breeze
                from: 8,
                to: 11,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Fresh breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Strong breeze
                from: 11,
                to: 14,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Strong breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // High wind
                from: 14,
                to: 15,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'High wind',
                    style: {
                        color: '#606060'
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: ' m/s'
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 3600000, // one hour
                pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
            }
        },
        series: [{
            name: 'Hestavollane',
            data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
                7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
                8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
                7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
                3.0, 3.0]

        }, {
            name: 'Voll',
            data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
                0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
                0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
                3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});
</script>

HOW TO RUN THIS:

Create a DIV Element inside webflow.

Give it the styles attached here:

253×671 24.4 KB

Dont forget to give it an “id”:

Maybe this will work. I havent tested this yet…

1 Like
6

Thanks Daniel.

I did as you mentioned in the Body and them pasted this code bellow inside of the Embed Widget. It is working.

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

I will test also you method also. Looks good.

Thanks a lot.

2 Likes
7

Rico, I´m starting a project and just like you I´m not really familiar with coding.

I´m still trying webflow and I´m currently using the free version. What I understood from Daniel´s last message is that we have to past the code into the body code, located in the settings panel of the website and under the custom code tab.

It seems that this facility is just for payed users. I just want to make sure that is what you did or if you have inserted your code directly into the embed element.

Thank you in advance.

Regards,

Hugo

8

Hi @hugolemosbr, this code was put in the body element, and that requires a paid plan. I am not sure what will happen, but you can try to put the code that @Daniel_Schultheiss has so kindly provided as an example, but you will need to test if it works using the embed widget by itself. I would put the embed widget as the last item in the navigator, the last element in the DOM.

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave