• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
        <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
        <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            .container {
                width: 400px;
                height: 200px;
                min-width: 400px;
                border: 1px dashed #777;
            }
    
            #myChart {
                width: 100%;
                height: 100%;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div class='container'>
            <div id='myChart'></div>
        </div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"]; // initiate jquery resizable container for demo purposes
            $('.container').resizable();
    
            var myConfig = {
                graphset: [{
                    type: 'area',
                    legend: {
                        align: 'right',
                        verticalAlign: 'middle',
                        layout: '4x2',
                        borderWidth: 1,
                        header: {
                            text: 'Legend',
                            textAlign: 'center',
                            fontSize: 12
                        },
                        marker: {
                            type: 'circle',
                            borderWidth: 0,
                            showLine: true,
                            size: 3
                        },
                        mediaRules: [{
                                maxWidth: 600,
                                layout: '8x1',
                                header: {
                                    visible: false
                                },
                                item: {
                                    fontSize: 10
                                },
                                marker: {
                                    size: 2,
                                    lineWidth: 1
                                }
                            },
                            {
                                maxWidth: 400,
                                align: 'center',
                                verticalAlign: 'bottom',
                                layout: '2x4',
                                item: {
                                    maxChars: 3,
                                    margin: 0
                                },
                                tooltip: {
                                    text: '%t',
                                    borderRadius: '3px'
                                }
                            }
                        ]
                    },
                    plotarea: {
                        adjustLayout: true
                    },
                    scaleX: {
                        labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
                        mediaRules: [{
                                maxWidth: 600,
                                item: {
                                    fontSize: 10
                                }
                            },
                            {
                                maxWidth: 400,
                                labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
                                item: {
                                    fontSize: 10
                                }
                            }
                        ]
                    },
                    scaleY: {
                        guide: {
                            lineStyle: 'dotted'
                        },
                        mediaRules: [{
                                maxWidth: 600,
                                item: {
                                    fontSize: 10
                                }
                            },
                            {
                                maxWidth: 400,
                                item: {
                                    fontSize: 10
                                }
                            }
                        ]
                    },
                    plot: {
                        animation: {
                            effect: 10,
                            method: 0,
                            sequence: 1,
                            speed: 1
                        },
                        tooltip: {
                            text: '%t: %v',
                            borderRadius: '3px'
                        },
                        aspect: 'spline',
                        marker: {
                            size: 3,
                            borderWidth: 0
                        },
                        mediaRules: [{
                                maxWidth: 600,
                                lineWidth: 1,
                                marker: {
                                    size: 2
                                },
                                tooltip: {
                                    text: '%t:<br>%v'
                                }
                            },
                            {
                                maxWidth: 400,
                                marker: {
                                    visible: false
                                },
                                tooltip: {
                                    text: '%v'
                                }
                            }
                        ]
                    },
                    series: [{
                            values: [31, 66, 35, 33, 59, 61, 55],
                            text: 'Alpha',
                            lineColor: '#1B4F72',
                            backgroundColor: '#1B4F72',
                            marker: {
                                backgroundColor: '#1B4F72'
                            }
                        },
                        {
                            values: [40, 49, 15, 21, 70, 51, 69],
                            text: 'Beta',
                            lineColor: '#21618C',
                            backgroundColor: '#21618C',
                            marker: {
                                backgroundColor: '#21618C'
                            }
                        },
                        {
                            values: [33, 35, 17, 61, 66, 32, 35],
                            text: 'Gamma',
                            lineColor: '#2874A6',
                            backgroundColor: '#2874A6',
                            marker: {
                                backgroundColor: '#2874A6'
                            }
                        },
                        {
                            values: [21, 25, 59, 70, 81, 23, 61],
                            text: 'Delta',
                            lineColor: '#2E86C1',
                            backgroundColor: '#2E86C1',
                            marker: {
                                backgroundColor: '#2E86C1'
                            }
                        },
                        {
                            values: [61, 81, 91, 30, 14, 26, 19],
                            text: 'Epsilon',
                            lineColor: '#3498DB',
                            backgroundColor: '#3498DB',
                            marker: {
                                backgroundColor: '#3498DB'
                            }
                        },
                        {
                            values: [50, 95, 88, 77, 66, 55, 79],
                            text: 'Zeta',
                            lineColor: '#5DADE2',
                            backgroundColor: '#5DADE2',
                            marker: {
                                backgroundColor: '#5DADE2'
                            }
                        },
                        {
                            values: [11, 19, 81, 40, 40, 81, 51],
                            text: 'Eta',
                            lineColor: '#85C1E9',
                            backgroundColor: '#85C1E9',
                            marker: {
                                backgroundColor: '#85C1E9'
                            }
                        },
                        {
                            values: [81, 30, 91, 85, 51, 88, 71],
                            text: 'Theta',
                            lineColor: '#AED6F1',
                            backgroundColor: '#AED6F1',
                            marker: {
                                backgroundColor: '#AED6F1'
                            }
                        }
                    ]
                }]
            };
    
            // adjust the refresh rate of the chart
            zingchart.DEV.RESIZESPEED = 50;
            zingchart.DEV.DEBOUNCESPEED = 50;
    
            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='//code.jquery.com/jquery-2.1.4.min.js'></script>
    		<script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    		<link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    	  <div class='container'>
    	    <div id='myChart'></div>
    	  </div>
    	</body>
    </html>
    .container {
      width:400px;
      height:200px;
      min-width: 400px;
      border:1px dashed #777;
    }
    #myChart {
      width:100%;
      height:100%;
    }
    // initiate jquery resizable container for demo purposes
    $('.container').resizable();
    
    var myConfig = {
      graphset: [
        {
          type: 'area',
          legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: '4x2',
            borderWidth: 1,
            header: {
              text: 'Legend',
              textAlign: 'center',
              fontSize: 12
            },
            marker: {
              type: 'circle',
              borderWidth: 0,
              showLine: true,
              size: 3
            },
            mediaRules: [
              {
                maxWidth: 600,
                layout: '8x1',
                header: {
                  visible: false
                },
                item: {
                  fontSize: 10
                },
                marker: {
                  size: 2,
                  lineWidth: 1
                }
              },
              {
                maxWidth: 400,
                align: 'center',
                verticalAlign: 'bottom',
                layout: '2x4',
                item: {
                  maxChars: 3,
                  margin: 0
                },
                tooltip:{
                 text: '%t',
                 borderRadius: '3px'
                }
              }
            ]
          },
          plotarea: {
            adjustLayout: true
          },
          scaleX: {
            labels: ['Sun','Mon','Tues','Wed','Thurs','Fri','Sat'],
            mediaRules: [
              {
                maxWidth: 600,
                item: {
                  fontSize: 10
                }
              },
              {
                maxWidth: 400,
                labels: ['S','M','T','W','H','F','S'],
                item: {
                  fontSize: 10
                }
              }
            ]
          },
          scaleY: {
            guide: {
              lineStyle: 'dotted'
            },
            mediaRules: [
              {
                maxWidth: 600,
                item: {
                  fontSize: 10
                }
              },
              {
                maxWidth: 400,
                item: {
                  fontSize: 10
                }
              }
            ]
          },
          plot: {
            animation: {
              effect: 10,
              method: 0,
              sequence: 1,
              speed: 1
            },
            tooltip: {
              text: '%t: %v',
              borderRadius: '3px'
            },
            aspect: 'spline',
            marker: {
              size: 3,
              borderWidth: 0
            },
            mediaRules: [
              {
                maxWidth: 600,
                lineWidth: 1,
                marker: {
                  size: 2
                },
                tooltip: {
                  text: '%t:<br>%v'
                }
              },
              {
                maxWidth: 400,
                marker: {
                  visible: false
                },
                tooltip: {
                  text: '%v'
                }
              }
            ]
          },
          series: [
            {
              values: [31,66,35,33,59,61,55],
              text: 'Alpha',
              lineColor: '#1B4F72',
              backgroundColor: '#1B4F72',
              marker: {
                backgroundColor: '#1B4F72'
              }
            },
            {
              values: [40,49,15,21,70,51,69],
              text: 'Beta',
              lineColor: '#21618C',
              backgroundColor: '#21618C',
              marker: {
                backgroundColor: '#21618C'
              }
            },
            {
              values: [33,35,17,61,66,32,35],
              text: 'Gamma',
              lineColor: '#2874A6',
              backgroundColor: '#2874A6',
              marker: {
                backgroundColor: '#2874A6'
              }
            },
            {
              values: [21,25,59,70,81,23,61],
              text: 'Delta',
              lineColor: '#2E86C1',
              backgroundColor: '#2E86C1',
              marker: {
                backgroundColor: '#2E86C1'
              }
            },
            {
              values: [61,81,91,30,14,26,19],
              text: 'Epsilon',
              lineColor: '#3498DB',
              backgroundColor: '#3498DB',
              marker: {
                backgroundColor: '#3498DB'
              }
            },
            {
              values: [50,95,88,77,66,55,79],
              text: 'Zeta',
              lineColor: '#5DADE2',
              backgroundColor: '#5DADE2',
              marker: {
                backgroundColor: '#5DADE2'
              }
            },
            {
              values: [11,19,81,40,40,81,51],
              text: 'Eta',
              lineColor: '#85C1E9',
              backgroundColor: '#85C1E9',
              marker: {
                backgroundColor: '#85C1E9'
              }
            },
            {
              values: [81,30,91,85,51,88,71],
              text: 'Theta',
              lineColor: '#AED6F1',
              backgroundColor: '#AED6F1',
              marker: {
                backgroundColor: '#AED6F1'
              }
            }
          ]
        }
      ]
    };
    
    // adjust the refresh rate of the chart
    zingchart.DEV.RESIZESPEED = 50;
    zingchart.DEV.DEBOUNCESPEED = 50;
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: '100%', 
    	width: '100%'
    });