CODEWITHSUNDEEP
d3.jsnvd3.js
ihsansat
ihsansat

Reputation: 503

how i can put more lines in Line Plus Bar Chart using nvd3.js?

i'm newbie in javascript and i want to try to visualize data using javascript especially d3.js. I found example graph what i want to build in nvd3.js (http://nvd3.org/examples/linePlusBar.html) this is line and bar chart combine in one place,,i try to modified it to same like (http://www.highcharts.com/demo/combo-multi-axes), but i still can not do that.

My question is, how i can put more lines in in Line Plus Bar Chart using nvd3.js ?

Thanks :)

Upvotes: 1

Views: 3631

Answers (1)

shabeer90
shabeer90

Reputation: 5151

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

Upvotes: 3

Related Questions