Closed janarthan35 closed 5 years ago
It is hard to find out why it is not working without seeing the output data, but I assume it has to do with the calculation of the start and end times or some other differences in the format.
Does the output match the WaterfallDocs
interface?
The output ( svg element ) of live demo matches with my above output ( I have given same data ) . Svg element of live demo and my chart are same . is there is any problem with css ?? i need to import any additional css ?
Sorry, I did not meant the structure of the SVG, but the JSON object that is passed to the PerfCascade
constructor (e.g. here).
But right, there is also the perf-cascade.css
CSS file.
Data is available before passing it to PerfCascade constructor.
I have copied css from "perf-cascade.css " and pasted in my component but still it didn't work .
The data before passing to PerfCascade constructor :
{
docIsTLS:true,
durationMs:11929,
entries:[
{
end:2388,
responseDetails:{
icon:{
…
},
indicators:Array(2),
requestType:"html",
rowClass:"row-item",
statusCode:200
} segments:(4) [
{
end:1652,
start:966,
total:686,
type:"connect"
},
{
end:1727,
start:1652,
total:75,
type:"send"
},
{
end:1953,
start:1727,
total:226,
type:"wait"
},
{
end:2386,
start:1953,
total:433,
type:"receive"
}
],
start:966,
tabs:[
{
content:"
], title:"googleHomePage" }
Thanks for your support. I got waterfall chart by passing json data.
Trying to pass json instead of har files. I have add a method called "fromJson" instead of "fromHar" and a separate parser instead of har.js . I dont get chart properly