score:3
Accepted answer
UPDATE
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
Source: stackoverflow.com
Related Query
- how i can put more lines in Line Plus Bar Chart using nvd3.js?
- How can I put a space between the lines of a line chart using d3.js
- How to draw line plus bar chart using highcharts/d3.js or any other chart library?
- NVD3 Stacked Bar Chart Plus Line Overlapped
- How can I resize my d3.js script? is there a way to put this into a div tag where I can resize my bar chart smaller?
- how can i get a label on my lines in a line graph using d3.js
- How to create a % difference arrow line with value in a bar chart using D3.js
- How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?
- NVD3 Line Plus Bar With Focus Chart only displaying half width of first and last bar
- NVD3 Line Plus Bar Chart timeline
- How to toggle lines in a line chart using a legend
- How Can I display dates on the x-axis using nvd3 line charts
- NVD3 line chart - how can I add on-graph series labels?
- How do I set a different range for line chart embedded in a bar chart using d3.js
- How can I add columns as categories in a bar chart using Dimple.js?
- How can I make a triple bar chart using D3?
- Dashed line in Line plus bar chart NVD3
- How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js
- how to frame data in a Matrixreport for nvd3 line plus Barchart using salesforce analaytics api
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?
- How can I use d3.layout.stack with this code to draw a line chart using D3.js?
- How can I position rotated x-axis labels on column chart using nvd3?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- NVD3 - line chart NaN on safari using latest versions
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- d3.js How to add lines to a bar chart
- How to make curved lines to straight lines for Hierarchy Chart using d3.js
- How to add a line on x-axis on a horizontal bar chart in d3
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- How to add space between bars in a grouped bar chart in a nvd3 grouped multibar chart?
More Query from same tag
- D3.js Line chart not updating properly when applying the general update pattern
- d3.js : Differentiate between drag/start/end and click event
- D3 Zoomable Treemap changing the children accessor
- d3 - Can you sort by categorical variables?
- Is it possible to apply the class changes to an element of selection.classed() in d3.js, or to set a CSS property value relative to its currentValue
- D3.js data() method with json data
- Loading in a CSV file as a Map (D3 and JavaScript)
- Suggestions for data mash-up development platform
- D3 append div with id
- how to highlight over lap beetween rectangles in d3 js
- Adding keyboard event listener to svg div container
- d3 javascript change range of the y axis
- Get the object with the max value with D3
- chain transition of array in d3.js
- How to calculate a modified Path for different size circle in Force directed arrow graph?
- D3 updates every path only when select() is running instead of selectAll()
- How to do thIs diagram with force-directed graph in D3.js?
- How to switch csv dataset of d3.js graph to another csv by clicking on button
- How to fill the area between the x-segments of two lines in d3.js?
- d3.js Force Directed Graph - Using Images instead of Circles for the Nodes
- difference between d3.v3.js and entire D3 repository
- How can I render a d3.arc with different colors for different percentage?
- SVG: drawing inside a child element
- D3.js tree - Very long text on first node
- How to sort a D3 bar chart (based on an array of objects) by value or key?
- Quantize Integers into discrete buckets
- d3 handle data in multiple arrays
- Billboardjs chart update visibility of y axis after chart generation
- Line chart from external csv-file
- d3.js v4 minimap or how to have shared zoom on two elements?