• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <script>
            zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        </script>
    
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
        </script>
    
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
    
        <style>
            body {
                margin: 10px;
                padding: 10px;
            }
    
            *,
            input,
            button,
            select,
            textarea,
            label {
                font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
            }
    
            zing-grid[loading] {
                height: 600px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var cdata = {
                type: 'line',
                flat: true,
                title: {
                    text: 'Average Temperatures (by hour) in 2001',
                    fontSize: 11,
                    align: 'left',
                    paddingLeft: 50
                },
                heatmap: {
                    brushType: 'rectangle',
                    blur: 0,
                    alpha: 1,
                    graph: {},
                    tooltip: {
                        text: '<strong>%scale-key-text %scale-value-text</strong><br>Avg. Temperature: %value\u2103'
                    },
                    async: false,
                    gradientStops: '0 0.5 0.9 1',
                    gradientColors: '#3060cf #fffbbc #c4463a #c4463a',
                    minValue: -15,
                    maxValue: 25
                },
                colorScale: {
                    width: 15,
                    height: 145,
                    margin: '40 10 auto auto',
                    aspect: 'gradient',
                    layout: 'v',
                    gradientStops: '0 0.5 0.9 1',
                    gradientColors: '#3060cf #fffbbc #c4463a #c4463a',
                    minValue: -15,
                    maxValue: 25,
                    item: {
                        color: '#666'
                    }
                },
                plotarea: {
                    margin: '30 60 40 50'
                },
                tooltip: {
                    padding: '5 10',
                    fontSize: 11,
                    align: 'left',
                    callout: true,
                    calloutWidth: 10,
                    calloutHeight: 6,
                    calloutPosition: 'bottom'
                },
                scaleX: {
                    offset: 1,
                    used: true,
                    minValue: (new Date(T[0][0])).getTime(),
                    maxValue: (new Date(T[T.length - 1][0])).getTime(),
                    step: 24 * 60 * 60 * 1000,
                    transform: {
                        type: 'date',
                        text: '%F %d, %Y'
                    },
                    item: {
                        fontSize: 10
                    },
                    guide: {
                        visible: false
                    },
                    zooming: true
                },
                scaleY: {
                    maxItems: 4,
                    offset: 4,
                    format: '%v:00',
                    zooming: true,
                    minValue: 0,
                    maxValue: 23,
                    decimals: 0,
                    step: 1,
                    fixedStep: true,
                    item: {
                        fontSize: 10
                    },
                    guide: {
                        visible: false
                    }
                },
                series: [{}],
                scrollX: {},
                scrollY: {}
            };
    
            zingchart.bind('zc', 'load', function() {
                var aData = [];
                for (t = 0; t < T.length; t++) {
                    aData.push([
                        (new Date(T[t][0])).getTime(),
                        T[t][1],
                        T[t][2]
                    ]);
                }
                zingchart.exec('zc', 'heatmap.setdata', {
                    data: aData
                });
            });
    
            zingchart.bind('zc', 'heatmap.mousemove', function(oInfo) {
                if (oInfo.value !== null) {
                    zingchart.exec(oInfo.id, 'colorscale.setvalue', {
                        graphid: oInfo.graphid,
                        value: oInfo.value
                    });
                } else {
                    zingchart.exec(oInfo.id, 'colorscale.clear', {
                        graphid: oInfo.graphid
                    });
                }
            });
    
            zingchart.loadModules('heatmap,color-scale', function() {
                zingchart.render({
                    id: 'zc',
                    width: '800px',
                    height: '600px',
                    output: 'svg',
                    data: cdata,
                    modules: 'heatmap,color-scale'
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    		<script>
          zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        </script>
            
        <script
          src="https://code.jquery.com/jquery-2.2.4.min.js"
          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
          crossorigin="anonymous">
        </script>
        
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
        
      </head>
    	<body>
    		<div id="zc"></div>
      </body>
    </html>
    
    
    body { 
      margin:10px;
      padding:10px; 
    }
    
    *, input, button, select, textarea, label {
      font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
    }
    var cdata = {
        type : 'line',
        flat : true,
        title : {
          text : 'Average Temperatures (by hour) in 2001',
          fontSize : 11,
          align : 'left',
          paddingLeft : 50
        },
        heatmap : {
            brushType : 'rectangle',
            blur : 0,
            alpha : 1,
            graph : {},
            tooltip : {
                text : '<strong>%scale-key-text %scale-value-text</strong><br>Avg. Temperature: %value\u2103'
            },
            async : false,
            gradientStops : '0 0.5 0.9 1',
            gradientColors : '#3060cf #fffbbc #c4463a #c4463a',
            minValue : -15,
            maxValue : 25
        },
        colorScale : {
            width : 15,
            height : 145,
            margin : '40 10 auto auto',
            aspect : 'gradient',
            layout : 'v',
            gradientStops : '0 0.5 0.9 1',
            gradientColors : '#3060cf #fffbbc #c4463a #c4463a',
            minValue : -15,
            maxValue : 25,
            item : {
              color : '#666'
            }
        },
        plotarea : {
            margin : '30 60 40 50'
        },
        tooltip : {
            padding : '5 10',
            fontSize : 11,
            align : 'left',
            callout : true,
            calloutWidth : 10,
            calloutHeight : 6,
            calloutPosition : 'bottom'
        },
        scaleX : {
            offset : 1,
            used : true,
            minValue : (new Date(T[0][0])).getTime(),
            maxValue : (new Date(T[T.length-1][0])).getTime(),
            step : 24*60*60*1000,
            transform : {
                type : 'date',
                text : '%F %d, %Y'
            },
            item : {
                fontSize : 10
            },
            guide : {
                visible : false    
            },
            zooming : true
        },
        scaleY : {
            maxItems :4,
            offset : 4,
            format : '%v:00',
            zooming : true,
            minValue : 0,
            maxValue : 23,
            decimals : 0,
            step : 1,
            fixedStep : true,
            item : {
                fontSize : 10    
            },
            guide : {
                visible : false    
            }
        },
        series : [{
        }],
        scrollX:{},
        scrollY:{}
    };
    
    zingchart.bind('zc', 'load', function() {
        var aData = [];
        for (t=0;t<T.length;t++) {
            aData.push([
                (new Date(T[t][0])).getTime(),
                T[t][1],
                T[t][2]
            ]);
        }
        zingchart.exec('zc', 'heatmap.setdata', {
            data : aData
        });
    });
    
    zingchart.bind('zc', 'heatmap.mousemove', function(oInfo) {
        if (oInfo.value !== null) {
            zingchart.exec(oInfo.id, 'colorscale.setvalue', {
              graphid : oInfo.graphid,
            	value : oInfo.value
        	  });
        } else {
            zingchart.exec(oInfo.id, 'colorscale.clear', {
              graphid : oInfo.graphid    
            });
        }
    });
    
    zingchart.loadModules('heatmap,color-scale', function() {
      zingchart.render({
        id : 'zc',
        width : '800px',
        height : '600px',
        output : 'svg',
        data : cdata,
        modules : 'heatmap,color-scale'
      });
    });