test

iguana/iguana_rpc.c

@@ -842,6 +842,10 @@ char *SuperNET_rpcparse(struct supernet_info *myinfo,char *retbuf,int32_t bufsiz
         *jsonflagp = 1;
         i += strlen("/api");
     } else *jsonflagp = 0;
+    if ( strncmp(&url[i],"/data",strlen("/data")) == 0 )
+    {
+        return(clonestr("[{\"date\":\"2016-08-19T21:30:43.878Z\",\"value\":30},{\"date\":\"2016-08-19T21:30:43.878Z\",\"value\":44},{\"date\":\"2016-08-19T21:30:43.878Z\",\"value\":49},{\"date\":\"2016-08-19T21:30:43.878Z\",\"value\":28},{\"date\":\"2016-08-19T21:30:43.878Z\",\"value\":52}]"));
+    }
     if ( strncmp(&url[i],"/bitmap",strlen("/bitmap")) == 0 )
     {
         i += strlen("/bitmap");

iguana/index.html

@@ -21,123 +21,75 @@
     <script src="js/amcharts/amcharts.js" type="text/javascript"></script>
     <script src="js/amcharts/serial.js" type="text/javascript"></script>
     <script src="js/amcharts/amstock.js" type="text/javascript"></script>
+    <script src="js/amcharts/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
 
 <script>
-AmCharts.ready(function () { generateChartData(); createStockChart(); });
+AmCharts.ready(function () { createStockChart(); });
                    
+function createStockChart() {
 var chartData = [];
+var chart = AmCharts.makeChart("chartdiv", {
+                               "type": "serial",
+                               "theme": "light",
+                               "dataDateFormat": "YYYY-MM-DD",
+                               "valueAxes": [{ "id": "v1", "position": "left"}],
+                               "graphs": [{
+                                          "id": "g1",
+                                          "bullet": "round",
+                                          "valueField": "value",
+                                          "balloonText": "[[category]]: [[value]]"
+                                          }],
+                               "categoryField": "date",
+                               "categoryAxis": {
+                               "parseDates": true,
+                               "equalSpacing": true,
+                               "dashLength": 1,
+                               "minorGridEnabled": true
+                               },
+                               "dataProvider": chartData
+                               });
+var startButton = document.getElementById('start');
+var endButton = document.getElementById('stop');
+startButton.addEventListener('click', startDemo);
+endButton.addEventListener('click', endDemo);
+var interval;
+
+function startDemo() {
+   startButton.disabled = "disabled";
+   endButton.disabled = "";
+   interval = setInterval(getDataFromServer, 2000);
+   alert("start");
+}
 
-function generateChartData() {
+function endDemo() {
-   var firstDate = new Date(2012, 0, 1);
+   startButton.disabled = "";
-   firstDate.setDate(firstDate.getDate() - 1000);
+   endButton.disabled = "disabled";
-   firstDate.setHours(0, 0, 0, 0);
+   clearInterval(interval);
-   
+   alert("stop");
-   for (var i = 0; i < 1000; i++) {
+}
-       var newDate = new Date(firstDate);
-       newDate.setHours(0, i, 0, 0);
-       
-       var a = Math.round(Math.random() * (40 + i)) + 100 + i;
-       var b = Math.round(Math.random() * 100000000);
 
-       chartData.push({ date: newDate, value: a, volume: b });
+function getDataFromServer()
+{
+    var i,newDate,newValue,newData = [];
+    var newDataSize = Math.round(Math.random() + 3) + 1;
+    if (chartData.length)
+        newDate = new Date(chartData[chartData.length - 1].date);
+    else newDate = new Date();
+    for (i = 0; i < newDataSize; ++i)
+    {
+        newValue = Math.round(Math.random() * (40 + i)) + 10 + i;
+        newDate.setDate(newDate.getDate() + 1);
+        newData.push({ date: newDate, value: newValue });
     }
+    chartData.push.apply(chartData, newData);
+    if (chartData.length > 500)
+        chartData.splice(0, chartData.length - 500);
+    chart.validateData(); //call to redraw the chart with new data
 }
 
-var chart;
-            
-function createStockChart() {
-chart = new AmCharts.AmStockChart();
-
-// As we have minutely data, we should set minPeriod to "mm"
-var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
-categoryAxesSettings.minPeriod = "mm";
-chart.categoryAxesSettings = categoryAxesSettings;
-
-// DATASETS //////////////////////////////////////////
-var dataSet = new AmCharts.DataSet();
-dataSet.color = "#b0de09";
-dataSet.fieldMappings = [{ fromField: "value", toField: "value" }, { fromField: "volume", toField: "volume" }];
-    dataSet.dataProvider = chartData;
-    dataSet.categoryField = "date";
-
-    // set data sets to the chart
-    chart.dataSets = [dataSet];
-
-    // PANELS ///////////////////////////////////////////
-    // first stock panel
-    var stockPanel1 = new AmCharts.StockPanel();
-    stockPanel1.showCategoryAxis = false;
-    stockPanel1.title = "Value";
-    stockPanel1.percentHeight = 70;
-
-    // graph of first stock panel
-    var graph1 = new AmCharts.StockGraph();
-    graph1.valueField = "value";
-    graph1.type = "smoothedLine";
-    graph1.lineThickness = 2;
-    graph1.bullet = "round";
-    graph1.bulletBorderColor = "#FFFFFF";
-    graph1.bulletBorderAlpha = 1;
-    graph1.bulletBorderThickness = 3;
-    stockPanel1.addStockGraph(graph1);
-
-    // create stock legend
-    var stockLegend1 = new AmCharts.StockLegend();
-    stockLegend1.valueTextRegular = " ";
-    stockLegend1.markerType = "none";
-    stockPanel1.stockLegend = stockLegend1;
-
-    // second stock panel
-    var stockPanel2 = new AmCharts.StockPanel();
-    stockPanel2.title = "Volume";
-    stockPanel2.percentHeight = 30;
-    var graph2 = new AmCharts.StockGraph();
-    graph2.valueField = "volume";
-    graph2.type = "column";
-    graph2.cornerRadiusTop = 2;
-    graph2.fillAlphas = 1;
-    stockPanel2.addStockGraph(graph2);
-
-    // create stock legend
-    var stockLegend2 = new AmCharts.StockLegend();
-    stockLegend2.valueTextRegular = " ";
-    stockLegend2.markerType = "none";
-    stockPanel2.stockLegend = stockLegend2;
-
-    // set panels to the chart
-    chart.panels = [stockPanel1, stockPanel2];
-
-    // OTHER SETTINGS ////////////////////////////////////
-    var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
-    scrollbarSettings.graph = graph1;
-    scrollbarSettings.usePeriod = "10mm"; // this will improve performance
-    scrollbarSettings.updateOnReleaseOnly = false;
-    scrollbarSettings.position = "top";
-    chart.chartScrollbarSettings = scrollbarSettings;
-
-    var cursorSettings = new AmCharts.ChartCursorSettings();
-    cursorSettings.valueBalloonsEnabled = true;
-    chart.chartCursorSettings = cursorSettings;
-
-    // PERIOD SELECTOR ///////////////////////////////////
-    var periodSelector = new AmCharts.PeriodSelector();
-    periodSelector.position = "top";
-    periodSelector.dateFormat = "YYYY-MM-DD JJ:NN";
-    periodSelector.inputFieldWidth = 150;
-    periodSelector.periods = [{ period: "hh", count: 1, label: "1 hour" },
-                   { period: "hh", count: 2, label: "2 hours" },
-                   { period: "hh", count: 5, label: "5 hour" },
-                   { period: "hh", count: 12, label: "12 hours" },
-                   { period: "MAX", label: "MAX" }];
-    chart.periodSelector = periodSelector;
-
-    var panelsSettings = new AmCharts.PanelsSettings();
-    panelsSettings.mouseWheelZoomEnabled = true;
-    panelsSettings.usePrefixes = true;
-    chart.panelsSettings = panelsSettings;
-    
-    chart.write('chartdiv');
 }
+
+
 </script>
 
 </head>
@@ -706,8 +658,11 @@ data-path="{tc}/{config}">
                         </table>
                     </div></div>
                     
-                    <div id="chartdiv" style="width:95%; height:600px;"></div>
+                    <div class="chart">
-
+                        <button id="start">Start</button>
+                        <button id="stop" disabled="disabled">Stop</button>
+                    <div id="chartdiv"></div>
+                    </div>
                 </div>
                 <style type="text/css">
                     #Blockexplorer_page .center {

iguana/js/amcharts/style.css

@@ -64,3 +64,21 @@
 {
 
 }
+
+#chartdiv, .chart {
+  width: 95%;
+  height: 500px;
+  position: relative;
+}
+
+.chart .zoom {
+  position: absolute;
+  top: 25px;
+  right: 25px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 5px 12px;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  z-index: 20;
+}