Multiple time series in stacked column chart - highcharts

Currently I'm playing around with the "stacked and grouped column" example. There you visualize one data series within a stacked and grouped column chart.
From a theoretical point of view here you have one information (Number of fruits) grouped by three aspects (fruit (x-axis), person (stack) and gender (group)).
I'm wondering if (and how) it's possible to visualize an additional data series as grouping aspect instead of the gender.
I tried this (jsfiddle dot net/u1asm65s/) and added another data series representing figures for the very same persons in the first data series. But unfortunately, HIghcharts doesn't match the names of both data series. Thus the persons are duplicated in the resulting column chart.
This is what I currently have:
And this is what I want to achieve:
I used GIMP, so it's not a real chart ;)
Do you have any idea?
Thanks in advance
Newlukai
PS: Sorry for not embedding images, but I'm not allowed to embed images.

So basically, you can think of the desired effect as: I have an additional series which is linked (somehow) to another. Then you need to list what should be linked and set the options properly.
First, you want to connect visibility of the linked series and their appearance in the legend. It can be achieved via series.linkedTo property.
{
name: 'John-eaten',
id: 'john',
data: [5, 3, 4, 7, 2],
stack: 'eaten'
},...,{
name: 'John-bought',
linkedTo: 'john',
data: [6, 4, 5, 8, 3],
stack: 'bought'
},
So now, there are two series which are coupled together.
http://jsfiddle.net/u1asm65s/2/
Second, the color - set the same color for the linked series. http://jsfiddle.net/u1asm65s/3/
Third, tooltip, legend, data labels - this can be adjusted easily with formatter callbacks. http://jsfiddle.net/u1asm65s/4/

Related

Google Sheets Chart / Multiline labels in Column Charts

I need your help on this one. I'm looking to create a chart (without code) to display data by month in column charts, either like this:
Or like this:
In the figure 1, I read that the volume of 10 is driven by A, B & C.
In the figure 2, I read that the volume of 10 is driven by 4xA, 2xB & 4xC.
I tried to create my chart but the labels are awful on a single line, and I did not find any way to add a newline characters (\n, ...) in my labels serie.
Any idea to do one or the other one without going though apps script?
Thanks for your help!
You can do this by adding a label column to your data. See this example,
https://docs.google.com/spreadsheets/d/1H5frKDH612ciLKnB0HY7FiB2FNQBobbhFGcvYqxC7f8/edit?usp=sharing
Add one label column for each data column
Create chart
Use stacked non 100%
Set range to include all labels
Set labels
In customize series check labels is on
In the downdown for label pick custom rather than value.
ScreenShots -
1. Add Label Columns 2. Set Labels on Series 3. Turn Labels On

How to make a stacked bars chart using a single dataset with TDBChart VCL Teechart component?

I would like to create a stacked bars chart with TDBChart using a single dataset.
As far as i can see if I use TDBChart as i choose a stacked chart 2 series are added.
This component seems good to create stacked charts from many datasets, in which each dataset contains data of a specific type.
I make an example to clarify:
let's say I have a dataset (dtsSalesAllCountries) with the following info:
country
year
total_sales
in this way in principle i could plot a stacked bars chart in which I see bar per year and the total_sales for each country are stacked.
But TDBChart does this through series, so to perform my result i am currently forced to create one series per country (sqlFranceSales, sqlItalysales, sqlIndiaSales, ...)
This is quite unconvenient, each time i sell to a new country i must add a dataset. This is how it looks like with this implementation:
Please note I need to use TDBChart since I use ReportBuilder/TeeChart integration, that is based on TDBChart.
In fact what i am looking for is a pivot chart, that is not available in the Report Builder/TeeChart integration.
Is there a way with TDBCHart to achieve the stacked bars sales chart i am trying to implement using a single dataset and not one dataset per series?
For TChart itself you would configure the Data Source for the Series as a CrossTab. The extra series will then be created for you. Not sure if it can be done with TCharts embedded in ReportBuilder reports.
With source data from SQL Server:
SELECT * FROM (VALUES ('CA',2012,2500),('US',2012,5600)
,('CA',2013,3000),('US',2013,7000)
,('CA',2014,2600),('US',2014,8000))
AS A(Country,Year,Sales)
Produces:

How do I do a stacked bar chart as a drilldown to a stacked bar chart?

I just can't see how to stack the series for the drilldown. Do I add the drilldown chunks as:
drilldown = [{name: 'bob',
data: [series1, series2,series3],
id: drilldown_id}]
Currently the docs seems to indicate to add all the series in the data series, but I'm not getting it working. Currently don't have a jsfiddle as everything I'm doing is in Python, but can provide one if need be.
Update:
I understand from the docs that the series plotoptions for the drilldown are inherited from the parent series -- please correct me if this is wrong. I currently have multiple series with the same id, but they are not stacking currently.
Using drill down to multiple series from multiple series demo it is possible to change stacking to normal and get drilldown to stacked columns.
JSFiddle 1: http://jsfiddle.net/rxjutt6v/
Using async drill down demo and addSingleSeriesAsDrilldown with applyDrilldown it is possible to get multiple series in drilldown when drilling into single series point.
JSFiddle 2: http://jsfiddle.net/49q18Lp3/1/

How to get the number of category labels displayed vs. hidden

I have a column range chart with a set of text category labels - I am trying to figure out how I can determine the maximum number of categories and values to display without Highcharts automatically hiding some category labels because there is not enough room to display them. In other words, I don't want to see a chart with 40 values but only 32 category labels visible. How can I get the actual number of displayed labels programmatically so I can reduce my data set to that number of values?
You can use tickPositions on the Axis you want:
xAxis: {
tickPositions: [0, 1, 2, 4, 8, ...]
}
This will tell the chart which points to show as labels: http://jsfiddle.net/cfad2vvL/
There is also tickPositioner which takes a function and you can do whatever you want with the labels.

Highcharts: stacked column with grouped categories

I'm trying to do a chart with stacked columns but for each column having different entries. I will explain myself better.
I would like to use the demo of Highcharts:
http://www.highcharts.com/demo/column-stacked
But:
In the demo, the series are always the same: John, Jane and Joe. What I need, is to have different series for each column (xAxis category). I tried the plugin "https://raw.github.com/blacklabel/grouped_categories. This is fine to have multiple series grouped, but the grouped series are split into multiple columns: I need just one stacked column for each multiple series.
For example:
I want to group the population living in the west coast: I need a stacked column with the data from CA, WA and so on, And the column should clearly show every state, one on the top of the other. Then, in another column I want to group the population of the east coast, grouping in one column FL, NY and so on.
Can someone please help me?
Many thanks
Vignus

Resources