Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <title>KendoUI StockChart Test Page</title>
    
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="stock-chart"></div>
    <script>
      
var chartData = [
    {"Period":"2011/06/01","lineData":0.21,"columnData":0.21},
    {"Period":"2011/07/01","lineData":1.96,"columnData":1.41},
    {"Period":"2011/08/01","lineData":2.01,"columnData":0.05},
    {"Period":"2011/09/01","lineData":0.01,"columnData":1},
    {"Period":"2011/10/01","lineData":0.87,"columnData":3.86},
    {"Period":"2011/11/01","lineData":4.77,"columnData":0.9},
     {"Period":"2011/12/01","lineData":6.77,"columnData":0.9}
  
];
$("#stock-chart").kendoStockChart({
        dataSource: {
            data: chartData
        },
        series: [{
            name: "Line Data",
            type: "column",
            field: "lineData"
            },
            {
            name: "Column Data",
            type: "column",
            field: "columnData"
        }],
        categoryAxis: {
            baseUnit: "auto"
        },
        dateField: "Period",
        navigator: {
            series: {
                type: "area",
                field: "lineData"
            }
        }
    });
      
    </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers