Stacked Column Chart - Samples needed

[sendricardo]

Hi everyone,

I want to develop a chart like the one provided in the link below and I would like to know if it is possible to create something similar using highcharts. If so, I would highly appreciate some samples that I could use as a starting point as I'm still new to the highcharts world.

https://www.screencast.com/t/eAbExP5EKV

Thanks in advance.

[wojtek]

Hi sendricardo,

Yes of course, you can create such a chart with Highcharts. I prepared you an online demo with the sample of it. Do not hesitate to customize it as you like. If you have more questions just ask.

Demo:
https://jsfiddle.net/wchmiel/a02zftyv/

Kind regards.

[sendricardo]

wojtek you a life saver! I'm going to try to apply it to my project and I'll be sure to get back to you if I have questions.

[sendricardo]

Hey wojtek,

(Not) surprisingly enough I have been messing around with your code and can't seem to figure out how I can adapt it to my data. For example, for the X-Axis, I can provide the date and time in text format, or provide this information separately also in text format - please refer to this link to visualize what I mean: https://www.screencast.com/t/7AqotwoEu

In your generateData() function I noticed you generate dates but I don't understand how that number (1362614400000 + i * 60 * 60 * 1000) can be converted into a date.

Could you please give me some pointers as to how I can somehow adapt my data to achieve the above mentioned outcome?

Thanks

[wojtek]

sendricardo,

For datetime axes, the X value is the timestamp in milliseconds since 1970. So you have to change the date format to timestamp:

Code: Select all

var timestamp = (new Date( your_date_value )).getTime();

Api reference: https://api.highcharts.com/highcharts/s ... ine.data.x
Online demo: https://jsfiddle.net/wchmiel/pyxnwcs6/
JS Date object explanation: https://developer.mozilla.org/en-US/doc ... jects/Date

Kind regards.

[sendricardo]

Thanks wojtek,

Because of your valuable input I'm slowly getting the end-result I expected.

Now I have yet another problem. I need to add those minute labels (0,15,30,45) - when I only have one x,y point for each minute like the one you provided in the first sample (using a column chart) it works more or less however when I have various points pointing to the same minute (using a stacked column chart) I can't reuse your sample code.

Due to the fact that we are using foreach cycles the 'chart.renderer.text' prints various labels on the same spot (e.g. if we have 3 values for minute 15 we will see that label various times under that stacked column.

Can you please give me an example of a performant way for me to draw those minutes for a stacked column chart?

[wojtek]

sendricardo,

Could you send your chart demo so that I can work on your example? It will be much easier for me then.

Kind regards.

[sendricardo]

hey wojtek,

I added sample data on top of the first sample you provided and it mimics that data I'm using: https://jsfiddle.net/w5s4e6q2/1/

As you can see the hour and minute labels don't work properly this way (obviously because your data is being generated differently), any suggestions as to how I can do it using my data?

[wojtek]

sendricardo,

In your example data has a different structure. To use data in this format we would have to change the core methods for column series to plot columns in groups with 4 points per series.

So as a workaround to create the chart you expected I split each hour to four series (0, 15, 30, 45 minutes). To follow this approach your data has to be prepared in this pattern so each series has to be split into four series and added separately. To mark split series I added id property with the same name and rendered labels only for the first one so that there is only one label per particular period.

I hope it is understandable for you. Check the demo I posted below (with your extended data example) and let me know if you will manage to implement it.

Demo:
https://jsfiddle.net/wchmiel/Lzb0g89a/5/

Kind regards

[sendricardo]

Hi wojtek,

Just to thank you again for your help. We ended up using a different approach, we are using 2 x-axis, one for the hours and the other for the minutes and then we align them. The reason we didn't use your suggestion is because we are using a Highcharts widget in a development environment that made a bit more complex to implement.

Regards,
Ricardo

[wojtek]

sendricardo,

I'm glad that you've found the proper solution for your needs.

Good luck!