• 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>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["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%'
    });