score:3

Accepted answer

When you draw a Line Plus Bar Chart using nvd3.js, in the JSON you pass into the chart make sure, you add an attribute "bar" : true , to represent that particular data in Bars, the rest will load as line charts.

A sample JSON that's passed into the chart will look this :

[{
    "key" : "Bar Chart",
    "bar" : true,
    "color" : "#ccf",
    "values" : [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0]]
}, {
    "key" : "Line Chart1",
    "color" : "#c2f",
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39]]
}, {
    "key" : "Line Chart2",
    "color" : "#cff",
    "values" : [[1136005200000, 89], [1138683600000, 51], [1141102800000, 49], [1143781200000, 72], [1146369600000, 39]]
}]


UPDATE

By looking at your fiddle here , I found the following in the console

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/lib/d3.v3.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/nv.d3.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/src/models/linePlusBarChart.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 

Basically it had difficulty loading the d3.js and nvd3.js, I updated the fiddle here with new links to the js files and it seems to work fine.

Hope it helps


Related Query

More Query from same tag