Highcharts Demo

author(s): Torstein Hønsi

HTML

<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/highcharts.js"></script>
<script language="javascript" type="text/javascript" src="js/exporting.js"></script>
<script src="js/RGraph.common.core.js" ></script>
<script src="js/RGraph.common.effects.js" ></script>
<script src="js/RGraph.common.dynamic.js" ></script>
<script src="js/RGraph.gauge.js" ></script>
<script src="js/excanvas.js"></script>

<p id="mobileModule"><font size="4px" color="white">App Name: </font><font size="4px" color="green" id="appName"></font></p>
<p id="projectModule"><font size="4px" color="white">Project Name: </font><font size="4px" color="green" id="projectName"></font></p>
<p id="descriptionModule"><font size="4px" color="white">Description: </font><font size="4px" color="green" id="description"></font></p>
<p id="authorModule"><font size="4px" color="white">Author: </font><font size="4px" color="green" id="author"></font></p>
<!-- 下面分别是Chart、Text和Button元素，不可删除，可以根据对应id及类型可在css中设置其样式 -->
<div id="dataChartModule"></div>  
<div id="dataTextModule"></div>
<div id="buttonModule"></div>

CSS

<style type="text/css">
	#information{
		display:none;
	}
	
	#mobileModule{
		display:none;
	}
	#projectModule{
		display:none;
	}
    #descriptionModule{
        display:none;
    }
    #authorModule{
        display:none;
    }
	#dataChartModule{
        display:none;
    }
    #dataTextModule{
        display:none;
    }

    /*主要用来修改button、text及其他元素样式*/    
</style>

JavaScript

var widthBase=1840, scale, widthCurrent,gDataDate=0, gDataDateLast=0, res = 0;
    var projectName = ""

    /*************No modified area***********************/
	var drawDataChart = new Array();
    var chartArray = new Array();
    var dataValue = new Array();

	// chart class
	function chartClass(itemNum, chartName,title){
	    this.itemNum = itemNum;
	    this.chartName = chartName;
        this.title = title;
	    this.updateDataHighChart = 0;   // 0: dont update; 1: update
	    this.itemName = new Array();
	    this.dataValue = new Array();
	    this.interfaceID = new Array();
        this.interfaceName = new Array();
        this.instanceName = new Array();
	}

	// chart list class
	function chartList(chartNum){
	    this.chartNum = chartNum;
	    this.chartArray = new Array();

	    for (var i=0; i<this.chartNum; i++)
	    {
	        drawDataChart[i] = 0;
	    }
	}

	// Text class
	function textClass(textID){
	    this.textID = textID;
	    this.textName = "text" + String(this.textID);
	    this.interfaceID = 0;
        this.interfaceName = "";
        this.instanceName = "";
	    this.textValue = "";
	}

	// text list class
	function textList(textNum){
	    this.textNum = textNum;
	    this.textArray = new Array();
	}

    // Button class
    function buttonClass(buttonID){
        this.buttID = buttonID;
        this.buttName = "button" + String(this.buttID);
        this.showText = ""
        this.onClickEvent = "onClick" + String(this.burrID);
        this.services = ""
    }
        // Button list class
    function buttonList(buttonNum){
        this.buttonNum = buttonNum;
        this.buttonArray = new Array();
    }

	// Chart and CahrtList define
	var myChartList;
	// Text and TextList define
	var myTextList;
    // Button and ButtonList define
    var myButtonList;
    // interfaces
    var interfaces;

	// Fetch get parameter
	function getQueryString(name) { 
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
		var r =...