Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/web/globalization/cultures/kendo.culture.en-US.js"></script>
<script src="http://demos.kendoui.com/content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
<script src="http://demos.kendoui.com/content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
<script src="http://demos.kendoui.com/content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
<script src="http://demos.kendoui.com/content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <div id="example" class="k-content">
    <div id="floating"><img src="https://cdn3.iconfinder.com/data/icons/weather-and-forecast/51/Weather_icons_grey-03-48.png"></div>
    <div class="chart-wrapper">
        <div id="chart" ></div>
    </div>
    <script>
        var chart = null;
        function createChart() {
            chart = $("#chart").kendoChart({
                chartArea: {
                  height: 800,
                  margin: {
                    top: 100,
                    bottom: 100
                  }
                },
                title: {
                    text: "Gross domestic product growth /GDP annual %/"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "line"
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }, {
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                }, {
                    name: "Germany",
                    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                }],
​
              
                valueAxis: { 
                    majorUnit: 5,
                    min: -10,
                    max: 50,
                    labels: { 
                      template: "#if(value< 20){# #:value# #}#"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 145}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            }).data("kendoChart");
          
            positionDivs();
          
        }
              function positionDivs(){ 
                debugger
                var icon = $("#floating"); 
                var left = chart._plotArea.axisX.children[0].box.x1;
                icon.css({position:"absolute", top: 200, left: left, "z-index":5}); 
              }
      
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart); 
    </script>
</div>
​
​
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
apoffpro
0viewers