CODEWITHSUNDEEP
javascripthtmlhighchartssparklines
HaydenThrash
HaydenThrash

Reputation: 107

How to Get Highcharts Sparkline to Show Up On My Page.

Below is the entire document I am using to try to generate a highcharts sparkline: 

<script>
var sparkOptions = {
    title: {
        text: ''
    },
    credits: false,
    chart: {
        renderTo: 'container',
        width: 120,
        height: 20,
        type: 'area',
        margin: [2, 0, 2, 0],
        style: {
            overflow: 'visible'
        },
        skipClone: true
    },
    yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        tickPositions: [0]
    },
    xAxis: {
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
    },
    legend: {
        enabled: false
    },
    tooltip: {
        enabled: false
    }
};

$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();

t.addSeries({
    data: [1, 2, 3, 4, 5]
});
</script>

<div id="container" style="height: 40px; width: 200px;">
    <div id="the_chart"></div>
</div>

I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!

Upvotes: 1

Views: 4255

Answers (1)

Luca Regazzi
Luca Regazzi

Reputation: 1395

In Highcharts you have 2 ways of defining WHERE to put the chart:

  1. Using the renderTo property of chart
  2. calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})

In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);

To make it work you should change your last lines:

$('#the_chart').highcharts(sparkOptions); var t = $('#the_chart').highcharts();

to:

var t = new Highcharts.Chart(sparkOptions);

and the remove the extra container you have in the html, the one with id the_chart.

Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.

Fiddle

Upvotes: 2

Related Questions