Chart -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
let config = {
            width: 600,
            height: 600,
        };
        
element.dual_canvas_helper(config);

let axistip = $("<div>tooltip here</div>").appendTo(element);
axistip.css({
    position: "absolute",
    width: "140px",
    height: "auto",
    background: "#ddd",
    font: "12px sans-serif",
    //opacity: 0
})

frame.bottom_axis({
        ticks: date_ticks,
        add_end_points: true,
        min_value: 0,
        max_value: data.length,
        axis_origin: {x: 0, y: mintemp-2},
    })

// add a reference line, intially hidden.
    frame.line({
        name: "tracker_line",
        hide: true,
        y2: mintemp,
        y1: maxtemp,
        x2: 10,
        x1: 10,
        color: "rgba(0, 0, 0, 0.5)",
    });
    
    element.fit(null, 20)
   
    let axis_pixel_origin = element.pixel_offset(0, 0);
    
    let hide_trackers = function(event) {
        axistip.css({opacity: 0});
        element.transition("tracker_line", {y2: mintemp, y1:mintemp});
    };
    //element.on_canvas_event("mouseout", hide_trackers);
    
    let revert_circle = null
    
    let track_mouse = function (event) {
        let element_offset = element.offset();
        let frame_location = frame.event_model_location(event);
        let pixel_offset = frame.pixel_offset(frame_location.x, frame_location.y);
        //axistip.html("x:" + pixel_offset.x + "<br> y:" + pixel_offset.y);
        let x = frame_location.x;
        let ix = Math.round(x);
        let y = frame_location.y;
        // revert previously focused circle if any
        if (revert_circle) {
            revert_circle();
            revert_circle = null;
        }
        if ((y >= mintemp) && (maxtemp >= y) && (ix >= 0) && (data.length > ix)) {
            let datum = data[ix];
            let date = datum[1];
            let focus_city = null;
            let name = event.canvas_name;
            if (name && (name.startsWith("c:"))) {
                let info = $.extend({}, event.object_info);  // keep a fresh copy
                focus_city = info.city;
                let color = cities[focus_city][2];
                element.change("tracker_line", {hide: true});
                element.transition(name, {color: color, r: 10});
                revert_circle = function () {
                    element.transition(name, {color: info.original_color, r: info.original_r, fill: true});
                };
                // debugging...
                if (Math.abs(info.x - x) > 20) {
                    console.log("wrong circle " + name);
                    // debugger;
                }
            }
            element.change("tracker_line", {hide: false, x1: x+dx, x2: x+dx})
            element.transition("tracker_line", {y1: maxtemp, y2:mintemp});
            axislines = [];
            for (let city in cities) {
                let info = cities[city];
                let j = info[0];
                let color = info[2];
                let temperature = datum[j];
                let line = city + ":" + temperature;
                if (city == focus_city) {
                    line = "<b>" + line + "</b>"
                } else {
                    line = "<font color='"+color+"'>"+line+"</font>";
                    // console.log(line)
                }
                axislines.push(line);
            }
            axistip.html("<div>Date: " + date + "<br>" + axislines.join("<br>"))
            // console.log(axistip.html())
            axistip.offset({
                left: pixel_offset.x + element_offset.left + 10,
                //left: axis_pixel_origin.x + element_offset.left,
                top: pixel_offset.y + element_offset.top + 10,
            })
            axistip.css({opacity: 0.8});
        } else {
            //console.log("hiding", x, y)
            hide_trackers();
        }
    };
    element.on_canvas_event("mousemove", track_mouse);
};

var data = [
 [0, '20111001', 63.4, 62.7, 72.2],
 [1, '20111002', 58.0, 59.9, 67.7],
 [2, '20111003', 53.3, 59.1, 69.4],
 [3, '20111004', 55.7, 58.8, 68.0],
 [4, '20111005', 64.2, 58.7, 72.4],
 [5, '20111006', 58.8, 57.0, 77.0],
 [6, '20111007', 57.9, 56.7, 82.3],
 [7, '20111008', 61.8, 56.8, 78.9],
 [8, '20111009', 69.3, 56.7, 68.8],
 [9, '20111010', 71.2, 60.1, 68.7],
 [10, '20111011', 68.7, 61.1, 70.3],
 [11, '20111012', 61.8, 61.5, 75.3],
 [12, '20111013', 63.0, 64.3, 76.6],
 [13, '20111014', 66.9, 67.1, 66.6],
 [14, '20111015', 61.7, 64.6, 68.0],
 [15, '20111016', 61.8, 61.6, 70.6],
 [16, '20111017', 62.8, 61.1, 71.1],
 [17, '20111018', 60.8, 59.2, 70.0],
 [18, '20111019', 62.1, 58.9, 61.6],
 [19, '20111020', 65.1, 57.2, 57.4],
 [20, '20111021', 55.6, 56.4, 64.3],
 [21, '20111022', 54.4, 60.7, 72.4],
 [22, '20111023', 54.4, 65.1, 72.4],
 [23, '20111024', 54.8, 60.9, 72.5],
 [24, '20111025', 57.9, 56.1, 72.7],
 [25, '20111026', 54.6, 54.6, 73.4],
 [26, '20111027', 54.4, 56.1, 70.7],
 [27, '20111028', 42.5, 58.1, 56.8],
 [28, '20111029', 40.9, 57.5, 51.0],
 [29, '20111030', 38.6, 57.7, 54.9],
 [30, '20111031', 44.2, 55.1, 58.8],
 [31, '20111101', 49.6, 57.9, 62.6],
 [32, '20111102', 47.2, 64.6, 71.0],
 [33, '20111103', 50.1, 56.2, 58.4],
 [34, '20111104', 50.1, 50.5, 45.1],
 [35, '20111105', 43.5, 51.3, 52.2],
 [36, '20111106', 43.8, 52.6, 73.0],
 [37, '20111107', 48.9, 51.4, 75.4],
 [38, '20111108', 55.5, 50.6, 72.1],
 [39, '20111109', 53.7, 54.6, 56.6],
 [40, '20111110', 57.7, 55.6, 55.4],
 [41, '20111111', 48.5, 53.9, 46.7],
 [42, '20111112', 46.8, 54.0, 62.0],
 [43, '20111113', 51.1, 53.8, 71.6],
 [44, '20111114', 56.8, 53.5, 75.5],
 [45, '20111115', 59.7, 53.4, 72.1],
 [46, '20111116', 56.5, 52.2, 65.7],
 [47, '20111117', 49.6, 52.7, 56.8],
 [48, '20111118', 41.5, 53.1, 49.9],
 [49, '20111119', 44.3, 49.0, 71.7],
 [50, '20111120', 54.0, 50.4, 77.7],
 [51, '20111121', 54.1, 51.1, 76.4],
 [52, '20111122', 49.4, 52.3, 68.8],
 [53, '20111123', 50.0, 54.6, 57.0],
 [54, '20111124', 44.0, 55.1, 55.5],
 [55, '20111125', 50.3, 51.5, 61.6],
 [56, '20111126', 52.1, 53.6, 64.1],
 [57, '20111127', 49.6, 52.3, 51.1],
 [58, '20111128', 57.2, 51.0, 43.0],
 [59, '20111129', 59.1, 49.5, 46.4],
 [60, '20111130', 50.6, 49.8, 48.0],
 [61, '20111201', 44.3, 60.4, 48.1],
 [62, '20111202', 43.9, 62.2, 60.6],
 [63, '20111203', 42.1, 58.3, 62.6],
 [64, '20111204', 43.9, 52.7, 57.1],
 [65, '20111205', 50.2, 51.5, 44.2],
 [66, '20111206', 54.2, 49.9, 37.4],
 [67, '20111207', 54.6, 48.6, 35.0],
 [68, '20111208', 43.4, 46.4, 37.0],
 [69, '20111209', 42.2, 49.8, 45.4],
 [70, '20111210', 45.0, 52.1, 50.7],
 [71, '20111211', 33.8, 48.8, 48.6],
 [72, '20111212', 36.8, 47.4, 52.2],
 [73, '20111213', 38.6, 47.2, 60.8],
 [74, '20111214', 41.9, 46.1, 70.0],
 [75, '20111215', 49.6, 48.8, 64.2],
 [76, '20111216', 50.2, 47.9, 50.9],
 [77, '20111217', 40.6, 49.8, 51.6],
 [78, '20111218', 29.1, 49.1, 55.2],
 [79, '20111219', 33.7, 48.3, 62.1],
 [80, '20111220', 45.8, 49.3, 56.3],
 [81, '20111221', 47.4, 48.4, 47.2],
 [82, '20111222', 54.4, 53.3, 52.3],
 [83, '20111223', 47.8, 47.5, 45.2],
 [84, '20111224', 34.9, 47.9, 43.6],
 [85, '20111225', 35.9, 48.9, 42.9],
 [86, '20111226', 43.6, 45.9, 48.2],
 [87, '20111227', 42.9, 47.2, 45.4],
 [88, '20111228', 46.2, 48.9, 44.2],
 [89, '20111229', 30.8, 50.9, 50.4],
 [90, '20111230', 40.8, 52.9, 52.4],
 [91, '20111231', 49.8, 50.1, 53.5],
 [92, '20120101', 46.3, 53.9, 55.9],
 [93, '20120102', 43.2, 53.1, 48.2],
 [94, '20120103', 30.3, 49.7, 41.0],
 [95, '20120104', 19.2, 52.7, 48.9],
 [96, '20120105', 32.1, 52.6, 54.8],
 [97, '20120106', 41.2, 49.0, 61.2],
 [98, '20120107', 47.0, 51.0, 59.7],
 [99, '20120108', 46.0, 56.8, 52.5],
 [100, '20120109', 34.7, 52.3, 54.0],
 [101, '20120110', 39.4, 51.6, 47.7],
 [102, '20120111', 40.4, 49.8, 49.2],
 [103, '20120112', 45.4, 51.9, 48.4],
 [104, '20120113', 40.7, 53.7, 40.2],
 [105, '20120114', 30.4, 52.9, 43.9],
 [106, '20120115', 23.9, 49.7, 45.2],
 [107, '20120116', 22.6, 45.3, 65.0],
 [108, '20120117', 39.8, 43.6, 68.2],
 [109, '20120118', 43.2, 45.0, 47.5],
 [110, '20120119', 26.3, 47.3, 57.1],
 [111, '20120120', 32.8, 51.4, 61.9],
 [112, '20120121', 27.4, 53.7, 54.6],
 [113, '20120122', 25.0, 48.3, 56.7],
 [114, '20120123', 39.4, 52.9, 54.4],
 [115, '20120124', 48.7, 49.1, 52.7],
 [116, '20120125', 43.0, 52.1, 61.8],
 [117, '20120126', 37.1, 53.6, 55.0],
 [118, '20120127', 48.2, 50.4, 50.7],
 [119, '20120128', 43.7, 50.3, 52.9],
 [120, '20120129', 40.1, 53.8, 44.4],
 [121, '20120130', 38.0, 51.9, 49.1],
 [122, '20120131', 43.5, 50.0, 62.8],
 [123, '20120201', 50.4, 50.0, 64.6],
 [124, '20120202', 45.8, 51.3, 61.1],
 [125, '20120203', 37.5, 51.5, 70.0],
 [126, '20120204', 40.8, 52.0, 61.3],
 [127, '20120205', 36.5, 53.8, 48.2],
 [128, '20120206', 39.1, 54.6, 44.2],
 [129, '20120207', 43.2, 54.3, 51.3],
 [130, '20120208', 36.5, 51.9, 49.2],
 [131, '20120209', 36.5, 53.8, 45.7],
 [132, '20120210', 38.3, 53.9, 54.1],
 [133, '20120211', 36.9, 52.3, 44.9],
 [134, '20120212', 29.7, 50.1, 36.5],
 [135, '20120213', 33.1, 49.5, 44.8],
 [136, '20120214', 39.6, 48.6, 52.3],
 [137, '20120215', 42.3, 49.9, 68.0],
 [138, '20120216', 39.7, 52.4, 54.6],
 [139, '20120217', 46.0, 49.9, 53.8],
 [140, '20120218', 41.2, 51.6, 56.2],
 [141, '20120219', 39.8, 47.8, 50.8],
 [142, '20120220', 38.1, 48.7, 53.0],
 [143, '20120221', 37.1, 49.7, 61.0],
 [144, '20120222', 45.5, 53.4, 68.8],
 [145, '20120223', 50.6, 54.1, 69.4],
 [146, '20120224', 42.7, 55.9, 59.3],
 [147, '20120225', 42.6, 51.7, 47.2],
 [148, '20120226', 36.9, 47.7, 47.7],
 [149, '20120227', 40.9, 45.4, 61.9],
 [150, '20120228', 45.9, 47.0, 67.2],
 [151, '20120229', 40.7, 49.8, 70.1],
 [152, '20120301', 41.3, 48.9, 62.1],
 [153, '20120302', 36.8, 48.1, 72.7],
 [154, '20120303', 47.6, 50.7, 59.0],
 [155, '20120304', 44.2, 55.0, 51.8],
 [156, '20120305', 38.5, 48.8, 55.0],
 [157, '20120306', 32.9, 48.4, 61.8],
 [158, '20120307', 43.3, 49.9, 67.1],
 [159, '20120308', 51.2, 49.2, 72.0],
 [160, '20120309', 47.8, 51.7, 46.4],
 [161, '20120310', 37.2, 49.3, 46.7],
 [162, '20120311', 42.9, 50.0, 56.9],
 [163, '20120312', 48.8, 48.6, 61.9],
 [164, '20120313', 52.6, 53.9, 68.8],
 [165, '20120314', 60.5, 55.2, 71.9],
 [166, '20120315', 47.2, 55.9, 72.0],
 [167, '20120316', 44.7, 54.6, 72.5],
 [168, '20120317', 48.2, 48.2, 71.7],
 [169, '20120318', 48.2, 47.1, 71.1],
 [170, '20120319', 53.1, 45.8, 73.0],
 [171, '20120320', 57.8, 49.7, 63.8],
 [172, '20120321', 57.5, 51.4, 60.0],
 [173, '20120322', 57.3, 51.4, 62.3],
 [174, '20120323', 61.7, 48.4, 61.1],
 [175, '20120324', 55.8, 49.0, 62.0],
 [176, '20120325', 48.4, 46.4, 64.6],
 [177, '20120326', 49.8, 49.7, 66.0],
 [178, '20120327', 39.6, 54.1, 65.8],
 [179, '20120328', 49.7, 54.6, 69.2],
 [180, '20120329', 56.8, 52.3, 69.5],
 [181, '20120330', 46.5, 54.5, 73.5],
 [182, '20120331', 42.2, 56.2, 73.9],
 [183, '20120401', 45.3, 51.1, 75.3],
 [184, '20120402', 48.1, 50.5, 75.4],
 [185, '20120403', 51.2, 52.2, 77.3],
 [186, '20120404', 61.0, 50.6, 67.0],
 [187, '20120405', 50.7, 47.9, 71.1],
 [188, '20120406', 48.0, 47.4, 70.4],
 [189, '20120407', 51.1, 49.4, 73.6],
 [190, '20120408', 55.7, 50.0, 71.1],
 [191, '20120409', 58.3, 51.3, 70.0],
 [192, '20120410', 55.0, 53.8, 69.0],
 [193, '20120411', 49.0, 52.9, 69.2],
 [194, '20120412', 51.7, 53.9, 74.5],
 [195, '20120413', 53.1, 50.2, 73.4],
 [196, '20120414', 55.2, 50.9, 76.0],
 [197, '20120415', 62.3, 51.5, 74.5],
 [198, '20120416', 62.9, 51.9, 63.6],
 [199, '20120417', 69.3, 53.2, 67.3],
 [200, '20120418', 59.0, 53.0, 65.1],
 [201, '20120419', 54.1, 55.1, 67.9],
 [202, '20120420', 56.5, 55.8, 68.9],
 [203, '20120421', 58.2, 58.0, 65.1],
 [204, '20120422', 52.4, 52.8, 65.4],
 [205, '20120423', 51.6, 55.1, 70.1],
 [206, '20120424', 49.3, 57.9, 67.0],
 [207, '20120425', 52.5, 57.5, 75.4],
 [208, '20120426', 50.5, 55.3, 77.5],
 [209, '20120427', 51.9, 53.5, 77.0],
 [210, '20120428', 47.4, 54.7, 77.7],
 [211, '20120429', 54.1, 54.0, 77.7],
 [212, '20120430', 51.9, 53.4, 77.7],
 [213, '20120501', 57.4, 52.7, 77.0],
 [214, '20120502', 53.7, 50.7, 77.9],
 [215, '20120503', 53.1, 52.6, 79.1],
 [216, '20120504', 57.2, 53.4, 80.1],
 [217, '20120505', 57.0, 53.1, 82.1],
 [218, '20120506', 56.6, 56.5, 79.0],
 [219, '20120507', 54.6, 55.3, 79.8],
 [220, '20120508', 57.9, 52.0, 70.0],
 [221, '20120509', 59.2, 52.4, 69.8],
 [222, '20120510', 61.1, 53.4, 71.3],
 [223, '20120511', 59.7, 53.1, 69.4],
 [224, '20120512', 64.1, 49.9, 72.0],
 [225, '20120513', 65.3, 52.0, 72.4],
 [226, '20120514', 64.2, 56.0, 72.5],
 [227, '20120515', 62.0, 53.0, 67.6],
 [228, '20120516', 63.8, 51.0, 69.0],
 [229, '20120517', 64.5, 51.4, 72.7],
 [230, '20120518', 61.0, 52.2, 73.7],
 [231, '20120519', 62.6, 52.4, 77.5],
 [232, '20120520', 66.2, 54.5, 75.8],
 [233, '20120521', 62.7, 52.8, 76.9],
 [234, '20120522', 63.7, 53.9, 78.8],
 [235, '20120523', 66.4, 56.5, 77.7],
 [236, '20120524', 64.5, 54.7, 80.6],
 [237, '20120525', 65.4, 52.5, 81.4],
 [238, '20120526', 69.4, 52.1, 82.3],
 [239, '20120527', 71.9, 52.2, 80.3],
 [240, '20120528', 74.4, 52.9, 80.3],
 [241, '20120529', 75.9, 52.1, 82.2],
 [242, '20120530', 72.9, 52.1, 81.9],
 [243, '20120531', 72.5, 53.3, 82.4],
 [244, '20120601', 67.2, 54.8, 77.9],
 [245, '20120602', 68.3, 54.0, 81.1],
 [246, '20120603', 67.7, 52.3, 82.2],
 [247, '20120604', 61.9, 55.3, 81.2],
 [248, '20120605', 58.3, 53.5, 83.0],
 [249, '20120606', 61.7, 54.1, 83.2],
 [250, '20120607', 66.7, 53.9, 82.1],
 [251, '20120608', 68.7, 54.4, 77.5],
 [252, '20120609', 72.2, 55.0, 77.9],
 [253, '20120610', 72.6, 60.0, 82.9],
 [254, '20120611', 69.2, 57.2, 86.8],
 [255, '20120612', 66.9, 55.1, 85.3],
 [256, '20120613', 66.7, 53.3, 76.9],
 [257, '20120614', 67.7, 53.4, 84.5],
 [258, '20120615', 68.5, 54.6, 84.4],
 [259, '20120616', 67.5, 57.0, 83.8],
 [260, '20120617', 64.2, 55.6, 82.5],
 [261, '20120618', 61.7, 52.5, 82.9],
 [262, '20120619', 66.4, 53.9, 82.5],
 [263, '20120620', 77.9, 55.3, 81.3],
 [264, '20120621', 88.3, 53.3, 80.8],
 [265, '20120622', 82.2, 54.1, 81.7],
 [266, '20120623', 77.0, 55.2, 83.9],
 [267, '20120624', 75.4, 55.8, 85.5],
 [268, '20120625', 70.9, 56.8, 87.2],
 [269, '20120626', 65.9, 57.5, 88.0],
 [270, '20120627', 73.5, 57.7, 89.6],
 [271, '20120628', 77.4, 56.6, 86.7],
 [272, '20120629', 79.6, 56.4, 85.3],
 [273, '20120630', 84.2, 58.4, 81.7],
 [274, '20120701', 81.8, 58.8, 78.5],
 [275, '20120702', 82.5, 56.4, 83.1],
 [276, '20120703', 80.2, 56.5, 83.1],
 [277, '20120704', 77.8, 55.8, 84.5],
 [278, '20120705', 86.1, 54.8, 84.6],
 [279, '20120706', 79.9, 54.9, 84.2],
 [280, '20120707', 83.5, 54.7, 86.7],
 [281, '20120708', 81.5, 52.8, 84.3],
 [282, '20120709', 77.8, 53.7, 83.7],
 [283, '20120710', 76.1, 53.1, 77.1],
 [284, '20120711', 76.3, 52.7, 77.4],
 [285, '20120712', 75.8, 52.0, 80.6],
 [286, '20120713', 77.2, 53.4, 81.4],
 [287, '20120714', 79.3, 54.0, 80.2],
 [288, '20120715', 78.9, 54.0, 81.8],
 [289, '20120716', 79.6, 54.5, 77.3],
 [290, '20120717', 83.3, 56.7, 80.8],
 [291, '20120718', 84.3, 57.5, 81.6],
 [292, '20120719', 75.1, 57.1, 80.9],
 [293, '20120720', 68.4, 58.1, 83.9],
 [294, '20120721', 68.4, 57.6, 85.6],
 [295, '20120722', 72.2, 56.0, 83.6],
 [296, '20120723', 75.6, 56.6, 84.0],
 [297, '20120724', 82.6, 57.8, 83.0],
 [298, '20120725', 78.4, 57.5, 84.8],
 [299, '20120726', 77.0, 56.4, 84.4],
 [300, '20120727', 79.4, 55.3, 84.3],
 [301, '20120728', 77.4, 55.0, 83.9],
 [302, '20120729', 72.5, 55.6, 85.0],
 [303, '20120730', 72.9, 55.6, 84.9],
 [304, '20120731', 73.6, 55.9, 86.3],
 [305, '20120801', 75.0, 55.4, 86.5],
 [306, '20120802', 77.7, 54.4, 85.8],
 [307, '20120803', 79.7, 53.7, 85.3],
 [308, '20120804', 79.6, 54.1, 86.0],
 [309, '20120805', 81.5, 57.8, 84.2],
 [310, '20120806', 80.0, 58.2, 81.9],
 [311, '20120807', 75.7, 58.0, 86.5],
 [312, '20120808', 77.8, 57.0, 86.1],
 [313, '20120809', 78.6, 55.0, 86.8],
 [314, '20120810', 77.8, 54.8, 88.0],
 [315, '20120811', 78.5, 53.0, 85.1],
 [316, '20120812', 78.8, 52.5, 87.4],
 [317, '20120813', 78.6, 53.3, 88.0],
 [318, '20120814', 76.8, 53.9, 88.0],
 [319, '20120815', 76.7, 56.2, 87.2],
 [320, '20120816', 75.9, 57.1, 86.1],
 [321, '20120817', 77.6, 55.3, 86.8],
 [322, '20120818', 72.6, 56.2, 84.9],
 [323, '20120819', 70.4, 54.3, 76.8],
 [324, '20120820', 71.8, 53.1, 80.6],
 [325, '20120821', 73.6, 53.4, 80.0],
 [326, '20120822', 74.7, 54.5, 78.2],
 [327, '20120823', 74.6, 55.7, 79.1],
 [328, '20120824', 76.0, 54.8, 81.9],
 [329, '20120825', 76.2, 53.8, 84.7],
 [330, '20120826', 73.4, 56.5, 83.5],
 [331, '20120827', 74.6, 58.3, 82.1],
 [332, '20120828', 79.4, 58.7, 84.0],
 [333, '20120829', 74.7, 57.5, 85.7],
 [334, '20120830', 73.5, 55.9, 87.2],
 [335, '20120831', 77.9, 55.4, 82.9],
 [336, '20120901', 80.7, 55.7, 84.8],
 [337, '20120902', 75.1, 53.1, 83.9],
 [338, '20120903', 73.5, 53.5, 85.5],
 [339, '20120904', 73.5, 52.5, 86.4],
 [340, '20120905', 77.7, 54.5, 85.8],
 [341, '20120906', 74.2, 56.3, 85.4],
 [342, '20120907', 76.0, 56.4, 85.3],
 [343, '20120908', 77.1, 56.5, 81.9],
 [344, '20120909', 69.7, 56.4, 74.8],
 [345, '20120910', 67.8, 55.4, 71.6],
 [346, '20120911', 64.0, 56.2, 75.9],
 [347, '20120912', 68.1, 55.7, 82.1],
 [348, '20120913', 69.3, 54.3, 80.5],
 [349, '20120914', 70.0, 55.2, 70.0],
 [350, '20120915', 69.3, 54.3, 71.2],
 [351, '20120916', 66.3, 52.9, 70.3],
 [352, '20120917', 67.0, 54.8, 72.1],
 [353, '20120918', 72.8, 54.8, 73.7],
 [354, '20120919', 67.2, 56.8, 72.7],
 [355, '20120920', 62.1, 55.4, 71.7],
 [356, '20120921', 64.0, 55.8, 72.9],
 [357, '20120922', 65.5, 55.9, 73.1],
 [358, '20120923', 65.7, 52.8, 75.6],
 [359, '20120924', 60.4, 54.5, 78.3],
 [360, '20120925', 63.2, 53.3, 78.3],
 [361, '20120926', 68.5, 53.6, 79.6],
 [362, '20120927', 69.2, 52.1, 76.4],
 [363, '20120928', 68.7, 52.6, 77.2],
 [364, '20120929', 62.5, 53.9, 75.2],
 [365, '20120930', 62.3, 55.1, 71.9]];

var cities = {
    "New York": [2, "rgba(200,100,100,0.5)", "red"], 
    "San Francisco": [3, "rgba(100,200,100,0.5)", "green"], 
    "Austin": [4, "rgba(100,100,200,0.5)", "blue"]};

var maxtemp = 90;

var mintemp = 19;

draw_chart(data, mintemp, maxtemp, cities);

Discussion

This proof of concept illustrates how to build features commonly seen in chart components using dual canvas features. It includes mouse over detail displayed in a floating dialog.