How to add onclick function to show extra information on a event Timeline Chart

How can i add onclick function to a event in Timeline chart.

I am using a service from Almende charts (http://almende.github.io/chap-links-library/js/timeline/examples/example01_basis.html), now i want a function when i click on a event to show some extra information for that event.

I have found this function in this example (http://timeglider.com/widget/large.html), as i am not good at javascript i can not implement this in Almende charts scripts.

    <html>
    <head>
    <title>Graphical Display - SKAI</title>

    <!-- for mobile devices like android and iphone -->
    <meta content="True" name="HandheldFriendly" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://trego.al/skai/schedule/graph/timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="http://trego.al/skai/schedule/graph/timeline.css">

    <style type="text/css">
            /* Styles for the page */
        html, body {
            font: 10pt arial;
        }

        #mytimeline {
        }

        #new {
            position: absolute;
            left: 25px;
            top: 8px;

            text-transform: uppercase;
            color: white;
            font-weight: bold;
            font-size: 10px;
            text-decoration: none;
        }

            /* Custom styles for the Timeline */
        div.timeline-frame {
            border-color: #5D99C3;

            border-radius: 5px;
            -moz-border-radius: 5px; /* For Firefox 3.6 and older */
        }
        div.timeline-axis {
            border-color: #5D99C3;
            background-color: #5D99C3;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0'); /* for IE */
            background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0)); /* for webkit browsers */
            background: -moz-linear-gradient(top,  #5D99C3,  #3A6DA0); /* for firefox 3.6+ */
        }
        div.timeline-axis-grid {
        }
        div.timeline-groups-axis {
            border-color: #5D99C3;
        }
        div.timeline-axis-text {
            color: white;
        }
        div.timeline-groups-text {
            color: #4D4D4D;
        }
        div.timeline-event {
            color: #000;
            max-height:50px;
        }
        div.timeline-event-content {
        font-size:12px;
        }

    </style>

    <script type="text/javascript">
        var timeline = undefined;
        var data = undefined;

        google.load("visualization", "1");

            google.setOnLoadCallback(drawVisualization);
            function drawVisualization() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'group');
                data.addColumn('string', 'content');
                data.addColumn('datetime', 'start');
                data.addColumn('datetime', 'end');
                data.addRows([

['FORAE','<span onclick="myFunction()">LZ122</span>', new Date( 2013,5,01,14,00,00 ), new Date( 2013,5,01,15,30,00 )], 
['FORAE','<span onclick="myFunction()">LZ101</span>', new Date( 2013,5,01,16,10,00 ), new Date( 2013,5,01,17,50,00 )], 
['FORAE','<span onclick="myFunction()">LZ102</span>', new Date( 2013,5,01,18,40,00 ), new Date( 2013,5,01,20,20,00 )], 
['FORAE','<span onclick="myFunction()">LZ555</span>', new Date( 2013,5,02,04,00,00 ), new Date( 2013,5,02,07,00,00 )]

                ]);

           // specify options
            var options = {
                width:  "100%",
                height: "99%",
                layout: "box",
                axisOnTop: true,
                eventMargin: 15,                    // minimal margin between events
                eventMarginAxis: 0,                 // minimal margin beteen events and the axis
                "min": new Date('2013-06-01'),        // lower limit of visible range
                "max": new Date('2013-06-30'),        // upper limit of visible range
                editable: false,
                showNavigation: true,
                OverlappingGridLines: true
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'));

            // Draw our timeline with the created data and options
            timeline.draw(data, options);

            // Set a customized visible range
            var start = new Date(now.getTime() - 4 * 60 * 60 * 1000);
            var end = new Date(now.getTime() + 8 * 60 * 60 * 1000);
            timeline.setVisibleChartRange(start, end);
        }


    </script>

    <script>
    function myFunction()
    {
    document.getElementById("demo");
         alert("some information: here should the description appear");
    }
    </script>


    </head>

    <body onresize="timeline.redraw();" style="background:#F9F8F6">

    <div id="mytimeline"  style="background:#fff;min-width:900px;"></div>


    </body>
    </html>

Upvotes: -1

Answers (1)

mwilson

Reputation: 12900

Assuming you're wanting this event to fire when you click an element on your web page, the following code should solve your problem:

var el = document.getElementById("myButton");
el.onclick = function () {
     alert("some information");
};

You will obivously replace the alert message with whatever it is that you are wanting to display to the user.

Upvotes: 0

How to add onclick function to show extra information on a event Timeline Chart

Answers (1)

Related Questions