There is data in .csv format (about 10k records or more), you need to display them in graphs. In addition, the graphics must be interactive, have all sorts of controllers and filters. Now I use google charts, but, to my surprise, he has performance problems with such data. Lags begin when you try to interact with the schedule, etc.

I need to:

  1. JS library for drawing graphs
  2. With good performance.
  3. With such things or something like that. Or rather analogs of CategoryFilter and ChartRangeFilter .
  4. Free

What can you advise? There are a lot of libraries themselves, but are there among them what I need?

Closed due to the fact that it is necessary to reformulate the question so that it was possible to give an objectively correct answer to the participants user207618, HamSter , Grundy , aleksandr barakin , Denis Oct 29 '16 at 16:19 .

The question gives rise to endless debates and discussions based not on knowledge, but on opinions. To get an answer, rephrase your question so that it can be given an unambiguously correct answer, or delete the question altogether. If the question can be reformulated according to the rules set out in the certificate , edit it .

    2 answers 2

    I would recommend you to use Google Charts and beyond, which contains a large number of different variations of graphs.

    Try to translate csv into an array, when I did similar graphs for 30K records, no “sagging” occurred.

    To translate csv into an array, you can use the jquery-csv library . Then everything is passed through google.visualization.arrayToDataTable() ( Example ).

    An example of initializing a schedule using csv :

     // load the visualization library from Google and set a listener google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); // this has to be a global function function drawChart() { // grab the CSV $.get("example.csv", function(csvString) { // transform the CSV string into a 2-dimensional array var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); // this new DataTable object holds all the data var data = new google.visualization.arrayToDataTable(arrayData); // this view can select a subset of the data at a time var view = new google.visualization.DataView(data); view.setColumns([0,1]); // set chart options var options = { title: "A Chart from a CSV!", hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max}, vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max}, legend: 'none' }; // create the chart object and draw it var chart = new google.visualization.ScatterChart(document.getElementById('chart')); chart.draw(view, options); }); }

      Try using d3

       <!DOCTYPE html> <meta charset="utf-8"> <head> <title>DOM Manipulation</title> </head> <style> body { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; } #wrapper { height: 220px; } .person { height: 20px; position: relative; } .person .label { width: 90px; text-align: right; } .person .bar { height: 19px; background-color: steelblue; position: absolute; left: 100px; } .person div { display: inline-block; } .data-view { padding: 10px; color: #777; font-size: 12px; width: 700px; } </style> <body> <div id="wrapper"> </div> <div class="menu"> <button onClick="updateScores();">Update scores</button> <button onClick="addPerson();">Add person</button> <button onClick="removePerson();">Remove person</button> </div> <!-- <div class="data-view"></div> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script> var names = ['Andy', 'Beth', 'Craig', 'Diane', 'Evelyn', 'Fred', 'Georgia', 'Harry', 'Isabel', 'John']; var myData = []; var barWidth = 400; var barScale = d3.scaleLinear().domain([0, 100]).range([0, barWidth]); function randomInteger(n) { return Math.floor(10 * Math.random()); } function initialiseData() { myData = [{ "name": "Andy", "score": 37 }, { "name": "Beth", "score": 39 }, { "name": "Craig", "score": 31 }, { "name": "Diane", "score": 35 }, { "name": "Evelyn", "score": 38 }]; } function updateBars(data) { var u = d3.select('#wrapper') .selectAll('.person') .data(data, function(d) { return d.name; }); var entering = u.enter() .append('div') .classed('person', true); entering.append('div') .classed('label', true) .text(function(d) { return d.name; }); entering.append('div') .classed('bar', true); entering .merge(u) .select('.bar') .transition() .style('width', function(d) { return barScale(d.score) + 'px'; }); u.exit().remove(); } function addPerson() { if (myData.length === 10) return; myData.push({ name: names[myData.length], score: 30 + randomInteger(70) }); update(myData); } function removePerson() { if (myData.length === 0) return; myData.pop(); update(myData); } function updateScores() { for (var i = 0; i < myData.length; i++) { myData[i].score = 30 + randomInteger(70); } update(myData); } function updateDataView() { d3.select('.data-view').text('Array: ' + JSON.stringify(myData)); } function update() { updateBars(myData); updateDataView(myData); } initialiseData(); update(myData); </script> </body> </html>

      More charting examples