• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .container {
          width: 300px;
          height: 230px;
          resize: both;
          overflow: scroll;
          min-width: 300px;
        }
    
        #myChart {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'line',
          crosshairX: {
            marker: {
              type: 'circle',
              size: 6, //Make sure to specify size.
              backgroundColor: '#3399ff #0066cc',
              borderWidth: 1,
              borderColor: 'gray'
            },
            plotLabel: {
              visible: false
            },
            scaleLabel: {
              thousandsSeparator: ',',
              fontColor: 'black',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: '#0066cc',
              borderRadius: '5px',
            },
            lineColor: 'black',
            lineWidth: 1,
            mediaRules: [{
                maxWidth: 500,
                marker: {
                  size: 5
                }
              },
              {
                maxWidth: 300,
                marker: {
                  size: 4
                }
              }
            ]
          },
          crosshairY: {
            type: 'multiple',
            scaleLabel: {
              fontColor: 'black',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: '#0066cc',
              borderRadius: '5px',
            },
            lineColor: 'black',
            lineWidth: 1
          },
          scaleX: {
            progression: 'log',
            logBase: 10,
            thousandsSeparator: ',',
            label: {
              text: 'scaleX'
            },
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid',
              lineWidth: 2,
              lineColor: '#999999',
              alpha: 0.9
            },
            minorTicks: 4,
            minorGuide: {
              lineStyle: 'solid',
              lineWidth: 1,
              lineColor: '#999999',
              alpha: 0.9
            },
            mediaRules: [{
                maxWidth: 500,
                short: true,
                //exponent: true,
                item: {
                  fontSize: 9
                },
                guide: {
                  lineColor: '#b3b3b3'
                },
                minorGuide: {
                  lineColor: '#b3b3b3'
                }
              },
              {
                maxWidth: 300,
    
              }
            ]
          },
          scaleY: {
            progression: 'log',
            logBase: 10,
            thousandsSeparator: ',',
            label: {
              text: 'scaleY'
            },
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid',
              lineWidth: 2,
              lineColor: '#b3b3b3',
              alpha: 0.9
            },
            minorTicks: 4,
            minorGuide: {
              lineStyle: 'solid',
              lineWidth: 1,
              lineColor: '#b3b3b3',
              alpha: 0.9
            },
            mediaRules: [{
                maxWidth: 500,
                short: true,
                //exponent: true,
                item: {
                  fontSize: 9
                },
                guide: {
                  lineColor: '#cccccc'
                },
                minorGuide: {
                  lineColor: '#cccccc'
                }
              },
              {
                maxWidth: 300,
    
              }
            ]
          },
          plot: {
            tooltip: {
              visible: false
            },
            lineColor: '#0066cc',
            marker: {
              backgroundColor: '#0066cc'
            },
            mediaRules: [{
                maxWidth: 500,
                lineWidth: 1,
                marker: {
                  size: 4
                }
              },
              {
                maxWidth: 300,
                marker: {
                  size: 3
                }
              }
            ]
          },
          plotarea: {
            adjustLayout: true
          },
          series: [{
            values: [
              [1, 1],
              [10, 10],
              [100, 100],
              [1000, 1000],
              [10000, 10000],
              [100000, 100000],
              [1000000, 1000000]
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: '100%',
          width: '100%'
        });
      </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>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
    </body>
    
    </html>
    .container {
      width: 300px;
      height: 230px;
      resize: both;
      overflow: scroll;
      min-width: 300px;
    }
    
    #myChart {
      width: 100%;
      height: 100%;
    }
    var myConfig = {
      type: 'line',
      crosshairX: {
        marker: {
          type: 'circle',
          size: 6, //Make sure to specify size.
          backgroundColor: '#3399ff #0066cc',
          borderWidth: 1,
          borderColor: 'gray'
        },
        plotLabel: {
          visible: false
        },
        scaleLabel: {
          thousandsSeparator: ',',
          fontColor: 'black',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: '#0066cc',
          borderRadius: '5px',
        },
        lineColor: 'black',
        lineWidth: 1,
        mediaRules: [{
            maxWidth: 500,
            marker: {
              size: 5
            }
          },
          {
            maxWidth: 300,
            marker: {
              size: 4
            }
          }
        ]
      },
      crosshairY: {
        type: 'multiple',
        scaleLabel: {
          fontColor: 'black',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: '#0066cc',
          borderRadius: '5px',
        },
        lineColor: 'black',
        lineWidth: 1
      },
      scaleX: {
        progression: 'log',
        logBase: 10,
        thousandsSeparator: ',',
        label: {
          text: 'scaleX'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid',
          lineWidth: 2,
          lineColor: '#999999',
          alpha: 0.9
        },
        minorTicks: 4,
        minorGuide: {
          lineStyle: 'solid',
          lineWidth: 1,
          lineColor: '#999999',
          alpha: 0.9
        },
        mediaRules: [{
            maxWidth: 500,
            short: true,
            //exponent: true,
            item: {
              fontSize: 9
            },
            guide: {
              lineColor: '#b3b3b3'
            },
            minorGuide: {
              lineColor: '#b3b3b3'
            }
          },
          {
            maxWidth: 300,
    
          }
        ]
      },
      scaleY: {
        progression: 'log',
        logBase: 10,
        thousandsSeparator: ',',
        label: {
          text: 'scaleY'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid',
          lineWidth: 2,
          lineColor: '#b3b3b3',
          alpha: 0.9
        },
        minorTicks: 4,
        minorGuide: {
          lineStyle: 'solid',
          lineWidth: 1,
          lineColor: '#b3b3b3',
          alpha: 0.9
        },
        mediaRules: [{
            maxWidth: 500,
            short: true,
            //exponent: true,
            item: {
              fontSize: 9
            },
            guide: {
              lineColor: '#cccccc'
            },
            minorGuide: {
              lineColor: '#cccccc'
            }
          },
          {
            maxWidth: 300,
    
          }
        ]
      },
      plot: {
        tooltip: {
          visible: false
        },
        lineColor: '#0066cc',
        marker: {
          backgroundColor: '#0066cc'
        },
        mediaRules: [{
            maxWidth: 500,
            lineWidth: 1,
            marker: {
              size: 4
            }
          },
          {
            maxWidth: 300,
            marker: {
              size: 3
            }
          }
        ]
      },
      plotarea: {
        adjustLayout: true
      },
      series: [{
        values: [
          [1, 1],
          [10, 10],
          [100, 100],
          [1000, 1000],
          [10000, 10000],
          [100000, 100000],
          [1000000, 1000000]
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });