Pandas in jupyter

Read data from mysql and draw a chart.

%matplotlib inline
import pymysql
import pandas as pd
import as sql

conn = pymysql.connect(host='', user='root', passwd='qwer-1235', db='pdss')

s = 'select number_value from quality_data_item_record where item_id = 11'
df = sql.read_sql_query(s, conn)


Javascript library notes

Some notes on a few popular javascript libraries.


How to get startDate and endDate?

var range = $("#range").daterangepicker();
var start ="daterangepicker").startDate;
var end ="daterangepicker").endDate;



var data = [{label: '4/1', value: 10}, {label: '4/2', value: 14}];
var labels =, function(item) { return item.label; });
var values =, function(item) { return item.value; });

It is especially useful when preparing data for some chart libraries.

convert array to object

var data = [{value: 0, name: 'Working'}, {value: 1, name: 'Idle'}];
var result = _.chain(data).keyBy('value').mapValues('name').value();
//The result will be {0: 'Working', 1: 'Idle'}


How to pass array when using $.get

$.get("/api", {"name[]": ["George", "Jacky"]}, function(data) {});

If you are using Spring MVC for the server side, here is the relative code to receive multiple parameters.

public YourResponseEntity api(@RequestParam("name") String[] names) {
  //deal with names

book reading record 2017


  1. 夜色人生
  2. Software Prefactoring
  3. How to win friends and influence people
  4. Eat, pray, love
  5. 猎豹
  6. Great gatsby
  7. 四步创业法
  8. To kill a mocking bird
  9. Then there were none
  10. 你应该像喜欢苦一样喜欢甜
  11. 清醒思考的艺术
  12. 垂暮之战
  13. 幽灵旅
  14. 消失的殖民地
  15. 东方快车谋杀案


  1. Getting to YES
  2. Inspired, how to create products customers love
  3. On managing yourself
  4. Software architecture for developers

To be read

  1. Redis In Action
  2. Alice in wonder world
  3. 身份的焦虑
  4. 简单的哲学
  5. 深入浅出数据分析
  6. 演讲之禅


Try to use hugo to setup the blog again.

dynamic form with springmvc and thymeleaf


SubjectGroup and SubjectGroupOption has one-to-many relationship. When adding a subject group, subject group options can be added inline.

Things I’ve learned.

  • When adding an option, don’t need to use javascript to handle the added html snippet. Just submit the add request to controller and handle the adding in the controller (Add a new options into the option list of subject group), then return to the add page. Spring mvc’s data binding and thyme leaf’s for loop will handle the html. (In EDC, I use javascript to append option html. It works. But there are some duplicate codes in JSP and javascript)
  • Can use the same way to handle subject option removing.
  • If there are multiple submit button in one form. We can use button’s name to separate them. In controller, use RequestMapping’s params to make the submit request to the right controller method.


package edc.web;

import edc.model.SubjectGroup;
import edc.model.SubjectGroupOption;
import edc.service.SubjectGroupService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

public class SubjectGroupController {
    private SubjectGroupService subjectGroupService;

    public void setSubjectGroupService(SubjectGroupService subjectGroupService) {
        this.subjectGroupService = subjectGroupService;

    @RequestMapping(value = "add")
    public String add(SubjectGroup subjectGroup) {
        return "subjectGroup/add";

    @RequestMapping(value = "add", params = {"addOption"})
    public String addOption(SubjectGroup subjectGroup, BindingResult result) {
        subjectGroup.getOptions().add(new SubjectGroupOption());
        return "subjectGroup/add";

    @RequestMapping(value = "add", method = RequestMethod.POST)
    public String save(SubjectGroup subjectGroup, BindingResult result) {;
        return "redirect:/sg/add";


<!DOCTYPE html>
<html xmlns:th="">
    <meta charset="utf-8"/>
    <h2>Add Subject Group</h2>
    <form action="#" th:action="@{/sg/add}" th:object="${subjectGroup}" method="POST">
      <p><input type="text" th:field="*{name}" placeholder="Name..."/></p>
        <button type="submit" name="addOption">Add Option</button>
            <tr th:each="option, rowStat : *{options}">
              <td><input type="text" th:field="*{options[__${rowStat.index}__].label}" placeholder="Option..."/></td>
        <button type="submit">Add</button>