dynamic update multi-line chart from json

[novikov alexander]

Hi everybody! Im a new in javascript and i need your help! Im trying to make a responsive multiline chart with dynamic update data.Last week I encountered a notion called responsive chat visualization or something like this. I find a solution to render multi-line, but now I need dymanic update for multi-line. Its no problem to deal with 1line chart,but i cant handle it with multiline chart. I hope that someone can help me find a solution, if not i will find solution myself. Thats a time question.
Heres my code

var Chart = (function(window,d3) {
    var svg,div, datat, xScale, yScale, xAxis, yAxis, dim, chartWrapper,parse, line,lineGen, colors,path,fh,fw, dots, margin = {}, width, height, locator,formatTime;
    var wbreakPoint = 768;
    var hbreakPoint = 200;
    var jsont= {"Model": "Model A",
                "Datase": [{
                    "city": "Datchik2",
                    "Data": [{
                                "Date":"2017-08-11 15:10:34.363",
                                "Value":"0"    
                            },{
                                "Date":"2017-08-12 21:12:34.363",
                                "Value":"32"
                            },{
                                "Date":"2017-08-15 21:55:34.363",
                                "Value":"200"
                            }]
                    },{
                    "city": "Rele1",
                    "Data": [{
                                "Date":"2017-08-11 17:11:34.363",
                                "Value":"100"
                            },{
                                "Date":"2017-08-15 18:11:34.363",
                                "Value":"100"
                            },{
                                "Date":"2017-08-16 19:12:34.363",
                                "Value":"200"
                            }]
                    },{
                    "city": "Datchik22",
                    "Data": [{
                                "Date":"2017-08-12 21:10:34.363",
                                "Value":"10"
                            },{
                                "Date":"2017-08-13 22:10:34.363",
                                "Value":"20"
                            },{
                                "Date":"2017-08-14 23:10:34.363",
                                "Value":"440"
                            }]
                    }
                    ]};
    var jsont1= {"Model": "Model A",
                "Datase": [{
                    "city": "Datchik2",
                    "Data": [{
                                "Date":"2017-08-15 21:55:34.363",
                                "Value":"200"
                            },{
                                "Date":"2017-08-15 22:10:34.363",
                                "Value":"15"    
                            },{
                                "Date":"2017-08-15 23:12:34.363",
                                "Value":"77"
                            },{
                                "Date":"2017-08-15 23:55:34.363",
                                "Value":"38"
                            }]
                    },{
                    "city": "Rele1",
                    "Data": [{
                                "Date":"2017-08-16 19:12:34.363",
                                "Value":"200"
                            },{
                                "Date":"2017-08-16 20:11:34.363",
                                "Value":"10"
                            },{
                                "Date":"2017-08-17 21:11:34.363",
                                "Value":"100"
                            },{
                                "Date":"2017-08-17 23:12:34.363",
                                "Value":"37"
                            }]
                    },{
                    "city": "Datchik22",
                    "Data": [{
                                "Date":"2017-08-14 23:10:34.363",
                                "Value":"440"
                            },{
                                "Date":"2017-08-14 23:12:34.363",
                                "Value":"380"
                            },{
                                "Date":"2017-08-14 23:30:34.363",
                                "Value":"15"
                            },{
                                "Date":"2017-08-15 23:40:34.363",
                                "Value":"32"
                            }]
                    }
                    ]};
           
    init(jsont);
    var inter = setInterval(function() {
                updateData(jsont1);
    }, 7000);
    function init(json) {
        datat = json;
        colors = d3.scaleOrdinal(d3.schemeCategory10);
        parse = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
        var jdates =[];
        var jvalues =[];
        datat.Datase.forEach(function (kv) {
            kv.Data.forEach(function (d) {
                jdates.push(d.Date = parse(d.Date));
                jvalues.push(d.Value = parseInt(d.Value));
            });
        });
        console.log("jdates=");
        console.log(jdates);
        console.log("jvalues=");
        console.log(jvalues);            
        var minX = d3.min(jdates);
        var maxX = d3.max(jdates);
        var minY = d3.min(jvalues);
        var maxY = d3.max(jvalues);
        x = d3.scaleTime().domain([minX, maxX]);
        y = d3.scaleLinear().domain([minY, maxY]).range([height,0]);
        xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%H:%M:%S.%L"));;
        yAxis = d3.axisLeft(yScale);
        svg = d3.select('#chart')
          .append('svg')
          .style('pointer-events', 'none');
            console.log("a");
        groups = svg.selectAll("foo")
        .data(datat.Datase)
        .enter()
        .append("g");
        chartWrapper = groups
            .append('g')
            .style('pointer-events', 'all');
        lineGen = d3.line()
        .x(d => x(d.Date))
        .y(d => y(d.Value));
        path = chartWrapper.append('path').classed('line', true).attr("d", d => lineGen(d));    
        chartWrapper.append('g').classed('x axis', true);
        chartWrapper.append('g').classed('y axis', true);        
        touchScale = d3.scaleLinear();    
        render();}
    function render() {
        updateDimensions(window.innerWidth);  
        x.range([0, width]);
        y.range([height, 0]);
        svg
          .attr('width', '100%')
          .attr('height', height + margin.top + margin.bottom);
        fh = svg.style("height").replace("px", "");
        fw = svg.style("width").replace("px", "");
        chartWrapper
          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');          
        xAxis.scale(x);
        yAxis.scale(y);
        if(window.innerWidth < wbreakPoint) {
          xAxis.ticks(d3.timeHour.every(12))
        }
        else {
          xAxis.ticks(d3.timeHour.every(5))
        };
        if(window.innerinnerHeight < hbreakPoint) {      
          yAxis.ticks(Math.max(height/50, 2))
        }
        else {
          yAxis.ticks(Math.max(height/50, 2));
        };
        svg.select('.x.axis')
            .attr('transform', 'translate(0,' + height + ')')
            .transition()
            .duration(200)
            .call(xAxis)
            .selectAll("text")  
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("transform", "rotate(-50)" );    
        svg.select('.y.axis')
            .transition()
            .duration(200)
            .call(yAxis);
        chartWrapper.select("text")
            .attr("x", (fw / 2))            
            .attr("y", 0 - (margin.top / 2))
            .attr("text-anchor", "middle");    
        path
            .transition()
            .duration(1000)
            .attr('d',  d => lineGen(d.Data))
            .attr("stroke-width", 3)
            .attr("fill", "none")
            .attr("stroke", (d, i) => colors(i));
        groups.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
        groups
            .transition()
            .duration(1000);}
    function updateData(json) {
        datat = json;
        colors = d3.scaleOrdinal(d3.schemeCategory10);
        parse = d3.timeParse("%Y-%m-%d %H:%M:%S.%L");
        var jdates =[];
        var jvalues =[];
        datat.Datase.forEach(function (kv) {
            kv.Data.forEach(function (d) {
                jdates.push(d.Date = parse(d.Date));
                jvalues.push(d.Value = parseInt(d.Value));
            });
        });    
        var minX = d3.min(jdates);
        var maxX = d3.max(jdates);
        var minY = d3.min(jvalues);
        var maxY = d3.max(jvalues);
        x = d3.scaleTime().domain([minX, maxX]);
        y = d3.scaleLinear().domain([minY, maxY]).range([height,0]);
        xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%H:%M:%S.%L"));;
        yAxis = d3.axisLeft(yScale);
        groups = svg.selectAll("foo")
        .data(datat.Datase)
        .enter()
        .append("g");
        lineGen = d3.line()
        .x(d => x(d.Date))
        .y(d => y(d.Value));
        path = chartWrapper.attr("d", d => lineGen(d));
        chartWrapper.append('g').classed('x axis', true);
        chartWrapper.append('g').classed('y axis', true);        
        touchScale = d3.scaleLinear();    
        render();}    
    function updateDimensions(winWidth) {
        margin.top = 40;
        margin.right = winWidth < wbreakPoint ? 50 : 80;
        margin.left = winWidth < wbreakPoint ? 30 : 50;
        margin.bottom = 100;
        width = winWidth - margin.left - margin.right;
        height = .1 * width;}
    return {render : render}
})(window,d3);
window.addEventListener('resize', Chart.render);

Heres link to jsbin with code https://jsbin.com/yuhanub/edit?html,js,output
P.S.: Sorry for the huge amount of code strings and my English;)

[Curran]

Greetings,

You'll need to apply the General Update Pattern to your path elements.

The linked JSBin has no JavaScript in it. Please post a minimal running example (without extraneous code), and folks will gladly help. I'd recommend Blockbuilder.org for posting code on bl.ocks.org. If there is a running example referenced, there's no need to put code into the message here.

Best regards,

Curran

[novikov alexander]

Hi!
I think that there was no javascript, because it was a link on a last revision... and I was modified it. Try another link https://jsbin.com/yuhanub/6/edit?html,js,output
Thank you for the link. Good example. I'll try it for the lines.


понедельник, 2 октября 2017 г., 17:54:06 UTC+3 пользователь Curran написал: