• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'line',
          title: {
            text: 'Multiple Crosshair Plot Labels',
            fontFamily: 'Georgia'
          },
          crosshairX: {
            plotLabel: {
              text: '<strong>%t:</strong> %v m/s',
              thousandsSeparator: ',',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: 'gray',
              borderRadius: '5px',
              multiple: true //include this attribute.
            },
            scaleLabel: {
              text: '%v seconds',
              fontColor: 'black',
              backgroundColor: 'white',
              borderWidth: 1,
              borderColor: 'gray',
              borderRadius: '5px',
            },
            lineColor: 'black',
            lineWidth: 1
          },
          scaleX: {
            values: '0:16:2',
            //decimals: 1,
            label: {
              text: 'Time (s)'
            },
            item: {
              fontSize: 10
            },
            guide: {
              visible: true,
              lineColor: 'black',
              lineStyle: 'dotted',
              alpha: 1
            }
          },
          scaleY: {
            progression: 'log',
            logBase: 10,
            thousandsSeparator: ',',
            label: {
              text: 'Velocity (m/s)'
            },
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid',
              lineWidth: 2,
              lineColor: 'gray',
              alpha: 0.9
            },
            minorTicks: 4,
            minorGuide: {
              lineStyle: 'solid',
              lineWidth: 1,
              lineColor: 'gray',
              alpha: 0.9
            }
          },
          plot: {
            aspect: 'spline',
            tooltip: {
              visible: false
            }
          },
          plotarea: {
            marginLeft: 'dynamic',
            marginBottom: 'dynamic'
          },
          series: [{
              values: [
                [0, 0],
                [2, 5],
                [4, 66],
                [6, 230],
                [8, 590],
                [10, 1500],
                [12, 9000],
                [14, 40000],
                [16, 660000]
              ],
              text: 'Rocket A',
              lineColor: '#0066cc',
              marker: {
                type: 'square',
                backgroundColor: '#0066cc'
              },
              guideLabel: {
                fontColor: '#0066cc'
              }
            },
            {
              values: [
                [0, 0],
                [2, 3],
                [4, 30],
                [6, 200],
                [8, 1100],
                [10, 5000],
                [12, 31000],
                [14, 99000],
                [16, 350000]
              ],
              text: 'Rocket B',
              lineColor: '#cc0000',
              marker: {
                type: 'diamond',
                backgroundColor: '#cc0000'
              },
              guideLabel: {
                fontColor: '#cc0000'
              }
            },
            {
              values: [
                [0, 0],
                [2, 4],
                [4, 14],
                [6, 102],
                [8, 3200],
                [10, 32200],
                [12, 111000],
                [14, 311000],
                [16, 500000]
              ],
              text: 'Rocket B',
              lineColor: '#009933',
              marker: {
                type: 'triangle',
                backgroundColor: '#009933'
              },
              guideLabel: {
                fontColor: '#009933'
              }
            },
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          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 id='myChart'></div>
    </body>
    
    </html>
    
          
    var myConfig = {
      type: 'line',
      title: {
        text: 'Multiple Crosshair Plot Labels',
        fontFamily: 'Georgia'
      },
      crosshairX: {
        plotLabel: {
          text: '<strong>%t:</strong> %v m/s',
          thousandsSeparator: ',',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '5px',
          multiple: true //include this attribute.
        },
        scaleLabel: {
          text: '%v seconds',
          fontColor: 'black',
          backgroundColor: 'white',
          borderWidth: 1,
          borderColor: 'gray',
          borderRadius: '5px',
        },
        lineColor: 'black',
        lineWidth: 1
      },
      scaleX: {
        values: '0:16:2',
        //decimals: 1,
        label: {
          text: 'Time (s)'
        },
        item: {
          fontSize: 10
        },
        guide: {
          visible: true,
          lineColor: 'black',
          lineStyle: 'dotted',
          alpha: 1
        }
      },
      scaleY: {
        progression: 'log',
        logBase: 10,
        thousandsSeparator: ',',
        label: {
          text: 'Velocity (m/s)'
        },
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid',
          lineWidth: 2,
          lineColor: 'gray',
          alpha: 0.9
        },
        minorTicks: 4,
        minorGuide: {
          lineStyle: 'solid',
          lineWidth: 1,
          lineColor: 'gray',
          alpha: 0.9
        }
      },
      plot: {
        aspect: 'spline',
        tooltip: {
          visible: false
        }
      },
      plotarea: {
        marginLeft: 'dynamic',
        marginBottom: 'dynamic'
      },
      series: [{
          values: [
            [0, 0],
            [2, 5],
            [4, 66],
            [6, 230],
            [8, 590],
            [10, 1500],
            [12, 9000],
            [14, 40000],
            [16, 660000]
          ],
          text: 'Rocket A',
          lineColor: '#0066cc',
          marker: {
            type: 'square',
            backgroundColor: '#0066cc'
          },
          guideLabel: {
            fontColor: '#0066cc'
          }
        },
        {
          values: [
            [0, 0],
            [2, 3],
            [4, 30],
            [6, 200],
            [8, 1100],
            [10, 5000],
            [12, 31000],
            [14, 99000],
            [16, 350000]
          ],
          text: 'Rocket B',
          lineColor: '#cc0000',
          marker: {
            type: 'diamond',
            backgroundColor: '#cc0000'
          },
          guideLabel: {
            fontColor: '#cc0000'
          }
        },
        {
          values: [
            [0, 0],
            [2, 4],
            [4, 14],
            [6, 102],
            [8, 3200],
            [10, 32200],
            [12, 111000],
            [14, 311000],
            [16, 500000]
          ],
          text: 'Rocket B',
          lineColor: '#009933',
          marker: {
            type: 'triangle',
            backgroundColor: '#009933'
          },
          guideLabel: {
            fontColor: '#009933'
          }
        },
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });