Create a combined bar/line chart with dimplejs and use self-defined colors

Question

I'm trying to create a combined bar/line chart based on a simple data set (columns: countries, index1, index2, index3, ...) using dimplejs. Index1 will be the bar chart and index2 upwards should be dynamically (=adding and removing indices per user interaction) displayed as line charts on top.

I found out that I seemingly needed to create a hidden 2nd x-axis for the line graphics. Is there any other way?

I was also unable to add more than one index as line chart. Is there a way to add more lines where each one is based on a column (index2, index3, ...)?

Defining colors was another problem: The bars are all in one color which is good but if I want to assign a color myself I have to give the data a tag which is displayed in the tooltip (not good)?

Assigning colors to the line charts didn't work at all for me. I would need some advice here.

My code so far:

var svg = dimple.newSvg("#graphic", 550, 700);
// Get data for one year
var filteredData = dimple.filterData(data, 'year', '2010');

var myChart = new dimple.chart(svg, filteredData);
myChart.setBounds(50, 30, 480, 630);

var xAxis = myChart.addMeasureAxis('x', 'index1');
xAxis.title = 'Index Value';
xAxis.overrideMax = 1;

var yAxis = myChart.addCategoryAxis('y', 'countries');
yAxis.title = 'Country';

var xAxis2 = myChart.addMeasureAxis('x', 'index2');
xAxis2.title = null;
xAxis2.overrideMax = 1;
xAxis2.hidden = true;

var bars = myChart.addSeries('bars', dimple.plot.bar, [xAxis,yAxis]);
myChart.assignColor('bars', '#D3D3D3', '#D3D3D3');

var lines = myChart.addSeries('index2', dimple.plot.line, [xAxis2,yAxis]);

yAxis.addOrderRule('index1', false);
myChart.draw();

Answer 1

That data structure is not ideal for your data requirement within dimple. The way dimple would like that data is with your index names as dimension values:

var data = [
    { "Index" : "Index 1", "Country" : "UK", "Index Value": 0.2 },
    { "Index" : "Index 1", "Country" : "Spain", "Index Value": 0.7 },
    { "Index" : "Index 2", "Country" : "UK", "Index Value": 0.5 },
    { "Index" : "Index 2", "Country" : "Spain", "Index Value": 0.6 },
    { "Index" : "Index 3", "Country" : "UK", "Index Value": 0.4 },
    { "Index" : "Index 3", "Country" : "Spain", "Index Value": 0.3 },
    ...
];

Then in order to draw index 1 as a bar and the rest as lines you would need to split your data set into 2:

var barData = [],
    lineData = [],
    i,
    keyIndex = "Index 1";

for (i = 0; i < data.length; i += 1) {
    if (data[i]["Index"] === keyIndex) {
        barData.push(data[i]);
    } else {
        lineData.push(data[i]);
    }
}

You could then just define your chart as follows:

var chart = new dimple.chart(svg),
    bars,
    lines;

chart.addMeasureAxis("x", "Index Value");
chart.addCategoryAxis("y", "Country");

bars = chart.addSeries("Index", dimple.plot.bar);
bars.data = barData;

lines = chart.addSeries("Index", dimple.plot.line);
lines.data = lineData;

chart.draw();

I haven't tested this code but it ought to do what you want (minus the formatting etc).

If you want to continue on the road you have started in your code above (which is still possible) you will find composite axes very helpful to avoid hidden secondary axes and potential problems with differing max/min values. See the relevant section in the version 2 release notes for an example of these.

I don't understand why you don't want to tag the indices with something which appears in the tooltip, there must be some difference between them which you can communicate, but if you want to remove the index name from the tooltip you can define custom tooltips as shown here.

Edit: I should add if you just want to change the set of colours which dimple will arbitrarily ascribe to your data points you can override the default colours in the chart object as discussed here.