D3 Examples - // source http://jsbin.com/gist

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
​
<body>
  <div id='networkTree'></div>
  <button onclick='refreshChart()'>Refresh Chart</button>
​
  
<script id="jsbin-javascript">
function refreshChart() {
        $('#networkTree').data('kendoStockChart').dataSource.data(getEventsData());
    }
​
    var dt = new Date();
    var defaultSeriesColors = [ "#70b5dd", "#1083c7", "#1c638d" ];
    function getFormattedTime(dt) {
        return dt.getUTCHours() + ':' + dt.getUTCMinutes() + ':' + dt.getUTCSeconds();
    }
    function getRandomNum(min,max) {
        return min + Math.floor(((max-min)*Math.random()));
    }
    //Adjust the date object by adding/subtracting the given interval(min/day/month/year)
    function adjustDate(dt,obj) {
        if(obj['min'] != null) {
            dt.setUTCMinutes(dt.getUTCMinutes()+obj['min'])
        }
        if(obj['day'] != null) {
            dt.setUTCDate(dt.getUTCDate()+obj['day'])
        }
        return dt;
    }
    function getEventsData() {
        var events = [];
        var MAX_EVENTS = 30;
        for(var i=0;i<MAX_EVENTS;i++) {
            dt = adjustDate(dt,{day:-1});
            events.push({'time':getFormattedTime(dt),'Date':new Date(dt), 'high':getRandomNum(1,20),'low':-1 * (getRandomNum(10,20))});
        }
        events.reverse();
        return events;
    }
    function initEventChart(elemId) {
        
        if(elemId == null) elemId = 'br-portlet';
​
        var colors = ['#B79F80','#535353','#F5946A','#B79F80','#957244','#F26223'];
        colors = ['red','yellow','orange','blue','green'];
        $("#" + elemId).kendoStockChart({
            theme: $(document).data("kendoSkin") || 'bootstrap',
            dataSource: {
                data:getEventsData(),
                change: function() {
                    console.info('datasource updated');
                }
            },
            valueAxis: {
                labels: {
                    template: "# if(value < 0) return -1*value; else return value; #"
                }
            },
            tooltip: {
                visible: true,
                format: "{0} Mb/s"
            },
            title: {
                //text: "Events"
            },
            categoryAxis: {
                title:{ 
                    //text:'Hello',
                    position:'right'
                },
                majorGridLines: {
                    visible:true
                },
                labels: {
                    //rotation:50,
                    skip:1,
                    mirror:true
                }
            },
            dateField: "Date",
            seriesDefaults: {
                //type:"line"
                type:"line",
                //stack:1
            },
            legend: {
                visible:true,
            },
            series: [{
                name: "Total In",
                field:"high",
                aggregate:'sum',
                color: defaultSeriesColors[1],
                tooltip: {
                    //template: "#= category # - #= value #"
                }
            },{
                name:"Total Out",
                field:"low",
                color: defaultSeriesColors[2],
                aggregate:'sum'
            }
            
            ],
            yAxis: {
            },
            navigator: {
                series: [
                {
                    type: "line",
                    field: "high",
                    color:defaultSeriesColors[1],
                    aggregate:'sum',
                    markers:{
                        //visible:true
                    },
                    labels: {
                        visible:false
                    },
                    tooltip: {
                        //template: "#= category # - #= value #",
                        visible:true,
                        format: "{0} Mb/s",
                    }
                },
                {
                    type: "line",
                    field: "low",
                    aggregate:'sum',
                    markers:{
                        //visible:true
                    },
                    //color:'blue',
                    color:defaultSeriesColors[2],
                    labels: {
                        visible:false
                    }
                }
                ],
                /*select: {       //Default selection is the entire range
                    from: "2012/11/14",
                    to: "2012/11/27"
                }*/
            }
        });
    }
​
        $(document).ready(function() {
            $('#networkTree').height(600);
            $('#networkTree').width(600);
            initEventChart('networkTree');
          setTimeOut(function() {
            $('#networkTree').data('kendoStockChart').refresh()
          },5000);
        });
</script>
​
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.0.min.js"><\/script>
<script src="https://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"><\/script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
​
<body>
  <div id='networkTree'></div>
  <button onclick='refreshChart()'>Refresh Chart</button>
​
  
</body>
</html>
</script>
​
​
<script id="jsbin-source-javascript" type="text/javascript">    function refreshChart() {
        $('#networkTree').data('kendoStockChart').dataSource.data(getEventsData());
    }
​
    var dt = new Date();
    var defaultSeriesColors = [ "#70b5dd", "#1083c7", "#1c638d" ];
    function getFormattedTime(dt) {
        return dt.getUTCHours() + ':' + dt.getUTCMinutes() + ':' + dt.getUTCSeconds();
    }
    function getRandomNum(min,max) {
        return min + Math.floor(((max-min)*Math.random()));
    }
    //Adjust the date object by adding/subtracting the given interval(min/day/month/year)
    function adjustDate(dt,obj) {
        if(obj['min'] != null) {
            dt.setUTCMinutes(dt.getUTCMinutes()+obj['min'])
        }
        if(obj['day'] != null) {
            dt.setUTCDate(dt.getUTCDate()+obj['day'])
        }
        return dt;
    }
    function getEventsData() {
        var events = [];
        var MAX_EVENTS = 30;
        for(var i=0;i<MAX_EVENTS;i++) {
            dt = adjustDate(dt,{day:-1});
            events.push({'time':getFormattedTime(dt),'Date':new Date(dt), 'high':getRandomNum(1,20),'low':-1 * (getRandomNum(10,20))});
        }
        events.reverse();
        return events;
    }
    function initEventChart(elemId) {
        
        if(elemId == null) elemId = 'br-portlet';
​
        var colors = ['#B79F80','#535353','#F5946A','#B79F80','#957244','#F26223'];
        colors = ['red','yellow','orange','blue','green'];
        $("#" + elemId).kendoStockChart({
            theme: $(document).data("kendoSkin") || 'bootstrap',
            dataSource: {
                data:getEventsData(),
                change: function() {
                    console.info('datasource updated');
                }
            },
            valueAxis: {
                labels: {
                    template: "# if(value < 0) return -1*value; else return value; #"
                }
            },
            tooltip: {
                visible: true,
                format: "{0} Mb/s"
            },
            title: {
                //text: "Events"
            },
            categoryAxis: {
                title:{ 
                    //text:'Hello',
                    position:'right'
                },
                majorGridLines: {
                    visible:true
                },
                labels: {
                    //rotation:50,
                    skip:1,
                    mirror:true
                }
            },
            dateField: "Date",
            seriesDefaults: {
                //type:"line"
                type:"line",
                //stack:1
            },
            legend: {
                visible:true,
            },
            series: [{
                name: "Total In",
                field:"high",
                aggregate:'sum',
                color: defaultSeriesColors[1],
                tooltip: {
                    //template: "#= category # - #= value #"
                }
            },{
                name:"Total Out",
                field:"low",
                color: defaultSeriesColors[2],
                aggregate:'sum'
            }
            
            ],
            yAxis: {
            },
            navigator: {
                series: [
                {
                    type: "line",
                    field: "high",
                    color:defaultSeriesColors[1],
                    aggregate:'sum',
                    markers:{
                        //visible:true
                    },
                    labels: {
                        visible:false
                    },
                    tooltip: {
                        //template: "#= category # - #= value #",
                        visible:true,
                        format: "{0} Mb/s",
                    }
                },
                {
                    type: "line",
                    field: "low",
                    aggregate:'sum',
                    markers:{
                        //visible:true
                    },
                    //color:'blue',
                    color:defaultSeriesColors[2],
                    labels: {
                        visible:false
                    }
                }
                ],
                /*select: {       //Default selection is the entire range
                    from: "2012/11/14",
                    to: "2012/11/27"
                }*/
            }
        });
    }
​
        $(document).ready(function() {
            $('#networkTree').height(600);
            $('#networkTree').width(600);
            initEventChart('networkTree');
          setTimeOut(function() {
            $('#networkTree').data('kendoStockChart').refresh()
          },5000);
        });
  console.info("Hello")
</script>
​
</body>
</html>
    