Hi, I have these strange behavoirs of bar charts:
How it is possibile show always all data in a readable format and size?
Does is possible use scrolling and zooming features in chart?
Thanks
The chart that Radzen uses is often sensitive about the input data. Can you show us what you are data-binding the chart to? You can use the Execute Code action to console.log the page properties that you use for the chart's Data.
Hi, excuse me for delay in my reply.
Here my test page:
For all three charts I used the same dataset:
JSON.parse('[{"endDate":"2019-03-07 16:13:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:13:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:14:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:14:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:15:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:15:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:16:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:16:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:17:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:17:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:18:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:18:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:19:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:19:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:20:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:20:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:21:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:21:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:22:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:22:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:23:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:23:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:24:59.0","name":"PMLProdProcessed","value":4.0},{"endDate":"2019-03-07 16:24:59.0","name":"SWMOutputDefectProd","value":0.0}]');
loaded directly by a page property.
Only the line chart show the data, the column and bar no.
I think only the Line and Area charts support dates.
Hi, thank Atanas for the support.
That I can say you is that I see that:
- for column chart, if the data in the dataset are less of 5 data, the columns are showed.
- for bar chart, seems that this number limit is more high
If execute radzen application compiled under node.js, the charts 1) and 2) seems work correctly
At this point, I don't understand if this strange behavoir is a bug that will be solved in next release or I must consider it normal, so column and bar chart are not usable for our applicatiion. And this isn't a good thing.
In order to troubleshoot further we would need a sample application that replicates the issues that you are seeing. If you have an active Radzen Professional subscription you can send us your application's meta directory to info@radzen.com.
By the way the charts use dummy data in design time so they don't appear empty. Is this what you are seeing? At runtime they should show the actual data / number of bars and columns.
Yes, in Radzen develop page the chart show correctly some dummy data, here the screenshot:
In screen shot you can see also the set of page property with datachart.
I think that you can try to reproduce easely the case. You can create a test page like screenshot and insert the same data that I send you in previous post.
I made another test. I reduce the dataset to only 5 datapoint (less data than previous test):
JSON.parse('[{"endDate":"2019-03-07 16:13:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:13:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:14:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:14:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:15:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:15:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:16:59.0","name":"SWMOutputDefectProd","value":0.0},{"endDate":"2019-03-07 16:16:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:17:59.0","name":"PMLProdProcessed","value":54.0},{"endDate":"2019-03-07 16:17:59.0","name":"SWMOutputDefectProd","value":0.0}]');
and duplicate the test page (now in few data version):
Now If browse the page the charts is correctly showed:
Do the problem related to the number of datapoints?
Another important question related the drawing of the chart: the chart reduce the column (and bar) thickness according to the number of datapoints, but this behavoir reduce its readability when the datapoints is high. Do possible is set a minimum tickness and manage an horizontal scrolling of the chart? So the chart is usable for high number of datapoints also.
Otherwise and regrettably the chart solution avaialable is very limited for real use application.
We are using an open source chart component that indeed isn't as powerful and feature complete as commercial charts. You may consider using HighCharts or Syncfusion as a replacement.