unable to display jquery of sparkline

StackOverflow https://stackoverflow.com/questions/17312444

Question

I want to display a jquery from a sparkline which is actually a bar graph.I am not able to view it.Also I am new to jquery,

$("#sparkline").sparkline([5,6,7,2,0,4,2,4], {
    type: 'bar',
    height: '300',
    barWidth: 20,
    barSpacing: 10,
    barColor: '#615c5a',
    nullColor: '#3366cc '});

This is the code of the page it also is compatible with jquery 1.10

<!DOCTYPE html>
            <html>
            <head>
            <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
            <script>
            $("#sparkline").sparkline([5,6,7,2,0,4,2,4], {
                type: 'bar',
                height: '300',
                barWidth: 20,
                barSpacing: 10,
                barColor: '#615c5a',
                nullColor: '#3366cc '});
            </script>
            </head>

            <body>
            <div id ="sparkline" />
            </body>
            </html>

To addon I have generated the code of sparkline from 

http://omnipotent.net/jquery.sparkline/#s-news
Was it helpful?

Solution

Your #sparkline element is not loaded yet. Try this: 

      $(document).ready(function(){
         $("#sparkline").sparkline([5,6,7,2,0,4,2,4], {
            type: 'bar',
            height: '300',
            barWidth: 20,
            barSpacing: 10,
            barColor: '#615c5a',
            nullColor: '#3366cc '});
        });

Read this: http://api.jquery.com/ready/
Note that not all browsers likes this syntax: <div id ="sparkline" />. Use this instead: <div id ="sparkline" ></div>.

Update I see you also forgot to include sparkline js file. You need to download it from here and after that to upload it to your server and to include it like you have included jQuery js file:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
<script src="jquery.sparkline.js"></script>

OTHER TIPS

It looks like sparkline.js is not compatible with jquery-1.9.1.min.js and above. Try out jquery-1.8.3.min.js it works perfect

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top