Bar chart but in gantt (24h) style?
Hey Guys,
We try to move our time reports from an older framework to syncfusion.
But i cant find anything that matches our needs, maybe i just dont found the chart...
You guys have something like that:
Is it possible to crate this diagram throug a normal bar chart like the one below?
Ty for your help :)
Kindly regards
Dominic
SIGN IN To post a reply.
13 Replies
Hi Dominic,
Greetings from Syncfusion.
We have analyzed your query. We have prepared a sample based on your requirement. Please find the below screenshot and sample,
Screenshot:
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/barSeries-1179252909
Kindly revert us, if you have any concerns.
Regards,
Baby.
Hi Dominic,
Thanks for your update.
We have analyzed your query. You can bind those data which you provided in the last update to one series as like the below and for binding the color for each point from data source, you can use pointColorMapping,
Code snippet:
|
List<ChartData> chartData = new List<ChartData>
{
new ChartData { Date = "19.08.2019", StartTime = 0, EndTime = 1, Type = "Green" },
.. .
new ChartData { Date = "20.08.2019", StartTime = 0, EndTime = 0.1, Type = "Blue" },
...
};
ViewBag.dataSource = chartData;
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="Date" yName="EndTime" pointColorMapping="Type" type="@ChartSeriesType.StackingBar100">
<e-series-animation enable="false"></e-series-animation>
</e-series>
</e-series-collection> |
Screenshot:
Since, you are providing start and end time duration in your data and if you want to bind those in a single series, there is rangecolumn series. In that, you can bind low and high value and bind start and end time those property.
Code snippet:
|
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="Date" low="StartTime" high="EndTime" pointColorMapping="Type" fill="lime" type="@ChartSeriesType.RangeColumn">
<e-series-animation enable="false"></e-series-animation
</e-series>
</e-series-collection> |
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/stackingbar-1081988733
Kindly revert us, if you have any concerns.
Regards,
Baby.Hi Dominic,
We have analyzed your query. From that, we would like to let you know that in the bar chart x-axis doesn't support date-time Values. Hence we suggest using "load" and "axisLabelRender" event in the chart to achieve your requirement. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot.
Code Snippet:
|
Index.cshtml:
<div>
<ejs-chart id="myContainer" axisLabelRender="labelRender" load="load" height="400"> // add additional code here
</ejs-chart> </div> <script> var count = 0;
function labelRender(args) { if (args.axis.orientation === 'Horizontal') { var chart = document.getElementById('myContainer').ej2_instances[0]; if (count < 4) { var date = new Date(chart.series[0].dataSource[count].StartTime).toUTCString(); var dateObj = new Date(date); var month = dateObj.getUTCMonth() + 1; //months from 1-12 var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); var hours = dateObj.getUTCHours(); var minutes = dateObj.getUTCMinutes(); var seconds = dateObj.getUTCSeconds(); count++; args.text = hours + ":" + minutes + ":" + seconds; } else { count = 0; args.text = '' } } } function load(args) { for (var i = 0; i < args.chart.series[0].dataSource.length; i++) { args.chart.series[0].dataSource[i].StartTime = Date.parse(args.chart.series[0].dataSource[i].StartTime); } } </script>
HomeController.Cs: // add additional code here
public IActionResult Index()
{ List<ChartData> chartData = new List<ChartData> { new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,03,00,00),EndTime = new DateTime(2019,06,20,05,04,00,00), Type = "Green" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,04,00,00),EndTime = new DateTime(2019,06,20,05,21,00,00), Type = "Red" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,21,00,00),EndTime = new DateTime(2019,06,20,05,36,00,00), Type = "Blue" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,36,00,00),EndTime = new DateTime(2019,06,20,05,42,00,00), Type = "Red" } }; ViewBag.dataSource = chartData; return View(); } public class ChartData { public string Date { get; set; } public DateTime StartTime { get; set; } public DateTime EndTime { get; set; } public string Type { get; set; } }
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Thanks for your answer,
Attachment: stackingBarExample_5d2de1b2.zip
i've tried a lot by myself now, but i cant get it to work.
the last example you sent, will show all bars with the same width, in the sample image u posted it will just double the width from bar to bar.
i wasn't abe to stretch them in relation to the duration...
Then I tried a previous Version you guys sent me.
There the problem is solved with the double values in the DataChart, this looks better, but the same problem appears there.
There the problem is solved with the double values in the DataChart, this looks better, but the same problem appears there.
The width of the bars isn't scaling with the duration between start and end time.
The example is available as an attached file.
I would be verry grateful if you guys can help me to solve these problems in the solution i attached:
- Correct scaling of width of the bars
- DateTime values instead of double values
i need a view like this:
Thank you very much for your help.
Dominic
Attachment: stackingBarExample_5d2de1b2.zip
Hi Dominic,
We have analyzed your query. From that, we would like to let you know that we can achieve your requirements by providing the difference between the StartTime and EndTime to y values of the series. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot.
Code Snippet:
|
Index.cshtml:
<div>
<ejs-chart id="myContainer" axisLabelRender="labelRender" load="load" height="400"> // add additional code here
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="Date" yName="y" type="@ChartSeriesType.StackingBar100">
</e-series> </e-series-collection> </ejs-chart> </div> <script> var count = 0;
function labelRender(args) { if (args.axis.orientation === 'Horizontal') { var chart = document.getElementById('myContainer').ej2_instances[0]; if (count < 4) { var date = new Date(chart.series[0].dataSource[count].StartTime).toUTCString(); var dateObj = new Date(date); var month = dateObj.getUTCMonth() + 1; //months from 1-12 var day = dateObj.getUTCDate(); var year = dateObj.getUTCFullYear(); var hours = dateObj.getUTCHours(); var minutes = dateObj.getUTCMinutes(); var seconds = dateObj.getUTCSeconds(); count++; args.text = hours + ":" + minutes + ":" + seconds; } else { count = 0; args.text = '' } } } function load(args) { args.chart.series[0].dataSource[i].y = Date.parse(args.chart.series[0].dataSource[i].EndTime) - Date.parse(args.chart.series[0].dataSource[i].StartTime); }
} </script>
HomeController.Cs: // add additional code here
public IActionResult Index()
{ List<ChartData> chartData = new List<ChartData> { new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,03,00,00),EndTime = new DateTime(2019,06,20,05,04,00,00), Type = "Green" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,04,00,00),EndTime = new DateTime(2019,06,20,05,21,00,00), Type = "Red" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,21,00,00),EndTime = new DateTime(2019,06,20,05,36,00,00), Type = "Blue" }, new ChartData { Date ="20.06.2019", StartTime = new DateTime(2019,06,20,05,36,00,00),EndTime = new DateTime(2019,06,20,05,42,00,00), Type = "Red" } }; ViewBag.dataSource = chartData; return View(); } public class ChartData { public string Date { get; set; } public DateTime StartTime { get; set; } public DateTime EndTime { get; set; }
public DateTime y { get; set; } public string Type { get; set; } }
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
SIGN IN To post a reply.
