From 04a9289a89300db94be0946639f9011a9c9d6e57 Mon Sep 17 00:00:00 2001
From: "charles.li" <charles.upboy@gmail.com>
Date: Mon, 26 Oct 2015 23:13:47 +0800
Subject: [PATCH] a not bad start of using nvd3, need to check source code of
 nvd3, even d3 these days make sure to handle the graph side as perfectly as i
 can

---
 dashboard/static/js/dash-0.1.0.js     | 4 ++--
 dashboard/static/js/dash.vis-0.1.0.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dashboard/static/js/dash-0.1.0.js b/dashboard/static/js/dash-0.1.0.js
index 0770b6a..0b6ad5e 100644
--- a/dashboard/static/js/dash-0.1.0.js
+++ b/dashboard/static/js/dash-0.1.0.js
@@ -133,7 +133,7 @@ function getValue(){
 
     $.getJSON(url, function(data){
         // console.log(data);
-        var jsonData = $.parseJSON(data.data)
+        var jsonData = $.parseJSON(data.data);
         localKeyValue[key] = jsonData;
         parseTable(jsonData, "#value");
     })
@@ -204,7 +204,7 @@ function parseTable(data, selector){
     indexes.push(index);
   })
 
-  for (var row = 0; row < 200; row++) {
+  for (var row = 0; row < 20; row++) {
     var tr = genElement("tr");
     var th = genElement("th");
     th.innerText = indexes[row];
diff --git a/dashboard/static/js/dash.vis-0.1.0.js b/dashboard/static/js/dash.vis-0.1.0.js
index e5b347a..e814202 100644
--- a/dashboard/static/js/dash.vis-0.1.0.js
+++ b/dashboard/static/js/dash.vis-0.1.0.js
@@ -1 +1 @@
-

function gen_data(){
    return [
    {
        values: [{x: 1, y:1}, {x: 2, y:2}],  
        key: "line 1",
    }
];
}

function add_graph(div_id, data){
    nv.addGraph(function() {
        chart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: true
            })
            .tooltips(true);

        chart.xAxis
            .axisLabel("label name")
            .tickFormat(d3.format(',.1f'))
            .staggerLabels(true);

        chart.yAxis
            .axisLabel('value name')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',.2f')(d);
            });

        d3.select(div_id).append('svg')
            .datum(data)
            .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
}

function build_graph(){
    data = gen_data();
    add_graph("[graph-id='0'] > div .chart-graph", data);
}


function genLineChart(){
  var chart = nv.models.lineChart();
  return chart;
}


function genMultiBarChart(){
  var chart = nv.models.multiBarChart()
    .barColor(d3.scale.category20().range())
    .duration(300)
    .rotateLabels(45)
    .groupSpacing(0.1)
    .stacked(true)
    ;
  return chart;
}


function renderChart(dom_id, chart, data){
  var svg = d3.select(dom_id).datum(data);
  svg.transition().duration(0).call(chart);
}


function checkDataType(type){
  // talbe
}

function drawChart(type){
  console.log(strFormat("###Ready to draw chart : {0}", type));
  // check data avilablity
  // use different js lib to do the drawing, nvd3, c3, d3, leafletjs
  // currently, I just use nvd3 to fullfill the basic graph.
  var chart = genMultiBarChart();

  // clear content if existed for creating new content
  $.each($("#value")[0].children, function(index, obj){$("#value")[0].removeChild(obj)})
  // format data supported by d3
  var data = [
      {
          values: [{x: 2, y: 1}, {x: 1.5, y: 1.5}, {x: 2, y: 2}],  
          key: "line 1",
      },
      {
          values: [{x: 1, y:1}, {x: 2, y:2}, {x: 3, y:3}],  
          key: "line 2",
      },
  ];

  data = new d3.range(0,3).map(function(d,i) {
        return {
            key: 'Stream' + i,
            values: new d3.range(0,11).map( function(f,j) {
                return {
                    y: 10 + Math.random()*100 * (Math.floor(Math.random()*100)%2 ? 1 : -1),
                    x: j
                }
            })
        };
    });
  d3.select("#value").append('svg')
    .datum(data)
    .call(chart);
  nv.utils.windowResize(chart.update);
}
\ No newline at end of file
+

function gen_data(){
    return [
    {
        values: [{x: 1, y:1}, {x: 2, y:2}],  
        key: "line 1",
    }
];
}

function add_graph(div_id, data){
    nv.addGraph(function() {
        chart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: true
            })
            .tooltips(true);

        chart.xAxis
            .axisLabel("label name")
            .tickFormat(d3.format(',.1f'))
            .staggerLabels(true);

        chart.yAxis
            .axisLabel('value name')
            .tickFormat(function(d) {
                if (d == null) {
                    return 'N/A';
                }
                return d3.format(',.2f')(d);
            });

        d3.select(div_id).append('svg')
            .datum(data)
            .call(chart);

        nv.utils.windowResize(chart.update);
        return chart;
    });
}

function build_graph(){
    data = gen_data();
    add_graph("[graph-id='0'] > div .chart-graph", data);
}


function genLineChart(){
  var chart = nv.models.lineChart();
  return chart;
}

function genPieChart(){
  var chart = nv.models.pieChart();
  return chart;
}

function genAreaChart(){
  var chart = nv.models.stackedArea();
  return chart;
}

function genMultiBarChart(){
  var chart = nv.models.multiBarChart()
    .barColor(d3.scale.category20().range())
    .duration(300)
    .rotateLabels(45)
    .groupSpacing(0.1)
    .stacked(true)
    ;
  return chart;
}


function renderChart(dom_id, chart, data){
  var svg = d3.select(dom_id).datum(data);
  svg.transition().duration(0).call(chart);
}


function checkDataType(type){
  // talbe
}

function getChart(type){
  switch (type){
    case "line": return genLineChart();
    case "bar": return genMultiBarChart();
    case "pie": return genPieChart();
    case "area": return genAreaChart();
  }
}

function drawChart(type){
  console.log(strFormat("###Ready to draw chart : {0}", type));
  // check data avilablity
  // use different js lib to do the drawing, nvd3, c3, d3, leafletjs
  // currently, I just use nvd3 to fullfill the basic graph.
  var chart = getChart(type);
  var selectDOM = $("#keys")[0];
  var key = selectDOM.options[selectDOM.selectedIndex].text;

  // clear content if existed for creating new content
  $.each($("#value")[0].children, function(index, obj){$("#value")[0].removeChild(obj)})
  // format data supported by d3
  var data = [
    {
        values: [{x: 2, y: 1}, {x: 1.5, y: 1.5}, {x: 2, y: 2}],  
        key: "line 1",
    },
    {
        values: [{x: 1, y:1}, {x: 2, y:2}, {x: 3, y:3}],  
        key: "line 2",
    },
  ];

  xyData = {"key": key, "values": []};

  var keyValue = localKeyValue[key];
  for (var index in keyValue[xyAxes.x[0]]){
    var tmp = {};
    tmp["x"] = keyValue[ xyAxes.x[0] ][index];
    tmp["y"] = keyValue[ xyAxes.y[0] ][index];
    xyData["values"].push(tmp);
  }

  data = new d3.range(0,3).map(function(d,i) {
      return {
          key: 'Stream' + i,
          values: new d3.range(0,11).map( function(f,j) {
              return {
                  y: 10 + Math.random()*100 * (Math.floor(Math.random()*100)%2 ? 1 : -1),
                  x: j
              }
          })
      };
  });
  xyData.values = xyData.values.slice(-50);
  xyData_2 = {"key": "test", "values": xyData.values};

  data = [xyData, xyData_2];
  d3.select("#value").append('svg')
    .datum(data)
    .call(chart);
  nv.utils.windowResize(chart.update);
}
\ No newline at end of file