• Edit
  • Download
  • <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .zc-body {
          background: #fff;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
    
      <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('myChart', '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('myChart', 'heatmap.setdata', {
            data: aData
          });
        });
    
        zingchart.bind('myChart', '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: 'myChart',
            width: '100%',
            height: '100%',
            data: cdata,
            modules: 'heatmap,color-scale'
          });
        });
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
      <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/temperatures2000.js'></script>
    
    </body>
    
    </html>
    .zc-body {
      background: #fff;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    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('myChart', '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('myChart', 'heatmap.setdata', {
        data: aData
      });
    });
    
    zingchart.bind('myChart', '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: 'myChart',
        width: '100%',
        height: '100%',
        data: cdata,
        modules: 'heatmap,color-scale'
      });
    });