I will try to answer my own question after some several tries and researches about these 2 visualization libraries, here are my own list of pros for each solution : Flot Pros jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot … Read more
Thank you for your answers! They definitely led me on the right track. But none of them completely got me everything I wanted, so here’s what I actually ended up doing. The key piece of information I was missing was that I needed to put the data together in one big block, but I could … Read more
In ECharts 4, 5 As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid. https://echarts.apache.org/en/option.html#grid grid: { left: 0, top: 0, right: 0, bottom: 0 } In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom. Thanks to … Read more
In their example, the dygraphs library handles six thousand data points in a very fast manner. Perhaps that would be suitable for your needs? It is based on Canvas with excanvas for IE support.
Finally, I have got a solution to my problem. I hope this will help many others like me. The problem is basically a limitation of arrayToDataTable method. The row of data must have the correct type in all columns. Since we have null values in rows, the API is either assuming that the data type … Read more
After some research I found the solution to my problem. 1) To change the chart size when the window is resized: To change the chart’s size I used a “onResize(event)” method. This method take in parameter the window resize event. In this method I simply get the width of the window, I divide it by … Read more
Yep. // FakeChart.cs // —————————————————————— // // A Winforms app that produces a contrived chart using // DataVisualization (MSChart). Requires .net 4.0. // // Author: Dino // // —————————————————————— // // compile: \net4.0\csc.exe /t:winexe /debug+ /R:\net4.0\System.Windows.Forms.DataVisualization.dll FakeChart.cs // using System; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; namespace Dino.Tools.WebMonitor { public class FakeChartForm1 : Form { private System.ComponentModel.IContainer … Read more
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time xAxis: { ordinal: false } Linear x-axis | Highstock @ jsFiddle
The web is a fast moving world, and so this answer was somewhat out of date. With that in mind, I’ve refreshed this answer to make it applicable in 2016. D3.js – This would still be my recommendation. It’s under active development and has a vibrant community. Vega – An expressive language (less powerful than … Read more
Use a computed property for the chart data. And instead of calling this.renderChart on watch wrap it in a method and reuse that method on mounted and in watch. Vue.component(“line-chart”, { extends: VueChartJs.Line, props: [“data”, “options”], mounted() { this.renderLineChart(); }, computed: { chartData: function() { return this.data; } }, methods: { renderLineChart: function() { this.renderChart( … Read more