Fusionchart using react not displaying complete chart

[frustratedlearner]

Hello,

I am a reactjs user. I am trying to render zoomline chart. Even though I see all the values on the console log, the complete chart data is not being displayed. 

I also see a weird behavior on the X axis. This is more like a timeseries data. Have around 100 data points. the counter seem to be off. If you see the attached image, the category, is not increasing. 

Appreciate someone chiming in to see that could be wrong.

Here is the data 

 {
     "type": "zoomline",
     "width": "65%",
     "height": "400",
     "renderAt": "chart-container",
     "dataFormat": "json",
     "dataSource": {
         "chart": {
             "caption": "test",
             "yaxisname": "Distance",
             "xaxisname": "time (milliseconds)",
             "compactdatamode": "1",
             "linethickness": "1",
             "dataseparator": "|",
             "pixelsPerPoint": "40",
             "theme": "fusion"
         },
         "annotations": {
             "groups": []
         },
         "categories": [{
             "category": "0|499|1000|1499|1999|2500|3000|3500|4000|4500|4999|5499|5999|6499|6999|7499|7999|8499|8999|9499|10000|10500|11000|11500|12000|12500|13000|13500|14000|14500|15000|15500|16000|16500|17000|17500|18000|18500|19000|19500|19999|20499|20999|21499|21999|22499|22999|23499|23999|24499|24999|25499|25999|26499|0|466|966|1966|2466|2966|3466|3966|4466|4966|5466|5966|6466|6966|7466|7966|8466|8966|9466|9966|10466|10966|11966|12466|17133|17466|17633|17966|18133|18466|18633|18966|19133|19466|19633|19966|20133|20633|21133|21633|22133|22633|23133|23633|24133|24633|27133|27633|28133|28633|29133|30133|30633|31133|31633|32133|32633|33133|33333|33633|33800|34133|34300|34633|34800|35133|35300|35633|35800|36133|36300|36633|36800|37133|37300|37633|37800|38133|38300|38633|38800|39133|39300|39633|41300|41800|42300|43300|43800|44300|44800|45300|45800|46300|46800|47300|47800|48300|48800|51800|0|466|966|1466|1966|2466|2966|3466|3966|4466|4966|4966|5466|5466|5966|6466|6466|6966|6966|7466|7966|8466|8966|9466|9966|10466|10966|11466|11966|11966|12466|12466|12966|13466|13966|14467|14467|14967|14967|15467|15967|16467|16467|16967|16967|17467|17467|17967|17967|18467|18467|18967|19467|19467|19967|19967|20467|20467|20967|21467|21967|22467|22967|23467|23967|24467|24967|25467|25967|26467|26967"
         }],
         "dataset": [{
             "seriesname": "Left",
             "data": "0.5104953050613403|0.5109076499938965|0.5218817591667175|0.494259774684906|0.4870876967906952|0.493447870016098|0.49510473012924194|0.5067327618598938|0.517367422580719|0.5186366438865662|0.5171878337860107|0.4655151069164276|0.5110040903091431|0.46559253334999084|0.5015982985496521|0.5015348196029663|0.3967580199241638|0.5114503502845764|0.39506906270980835|0.5128310322761536|0.5142257809638977|0.5248924493789673|0.5255659222602844|0.5362786054611206|0.5069510340690613|0.5050864219665527|0.537865161895752|0.5467922687530518|0.5462315082550049|0.5155147314071655|0.5818623900413513|0.5070918798446655|0.608193039894104|0.6309418678283691|0.6011539101600647|0.5957391262054443|0.48022139072418213|0.593639612197876|0.47338154911994934|0.5983350276947021|0.6040423512458801|0.6128160357475281|0.4814011752605438|0.6145380139350891|0.4829571843147278|0.6153458952903748|0.4776323735713959|0.6103111505508423|0.4926036596298218|0.6161202192306519|0.4838270843029022|0.6209113001823425|0.6152071952819824|0.4821721017360687|0.6169739961624146|0.4722222089767456|0.6243098974227905|0.4786856472492218|0.6177969574928284|0.6248062252998352|0.6271686553955078|0.6264920830726624|0.6279566287994385|0.6172358989715576|0.6274224519729614|0.6282520890235901|0.6243022084236145|0.6310877203941345|0.6262569427490234|0.629167377948761|0.6348291039466858"
         }, {
             "seriesname": "Right",
             "data": "0.5195684432983398|0.5319844484329224|0.5331531763076782|0.5038981437683105|0.4962214529514313|0.50296550989151|0.5045709013938904|0.5149251818656921|0.5239440202713013|0.5236392021179199|0.522319495677948|0.4655810594558716|0.5163400173187256|0.46305936574935913|0.507636308670044|0.5097091794013977|0.39844509959220886|0.5201183557510376|0.3897542357444763|0.5212022662162781|0.5234954357147217|0.533073902130127|0.5230565071105957|0.5358974933624268|0.5047615170478821|0.5030989646911621|0.535716712474823|0.545482873916626|0.5451497435569763|0.5237038731575012|0.5741243958473206|0.5196055173873901|0.6234520077705383|0.638012707233429|0.6052994728088379|0.6007309556007385|0.49467018246650696|0.5996771454811096|0.48378756642341614|0.6049549579620361|0.6112551093101501|0.6206474900245667|0.4835713803768158|0.6224745512008667|0.49296367168426514|0.6245874166488647|0.509536862373352|0.6208853721618652|0.4890725910663605|0.6274436116218567|0.4829174280166626|0.6318084597587585|0.6268883347511292|0.48970893025398254|0.6286619901657104|0.4907556474208832|0.6367518305778503|0.4811948835849762|0.6301906704902649|0.6377986669540405|0.6416488885879517|0.640739917755127|0.6422138810157776|0.6322091221809387|0.643447756767273|0.6439794301986694|0.6391440629959106|0.6463945508003235|0.6420060992240906|0.6457970142364502|0.6519283652305603"
         }]
     }
 }

[Akash Biswas]

Hi,

 

In your shared dataSource, you have set 225 category labels, and you have set 71 data for each of the dataset series. All the 71 data plots are plotted for each of the series on the Zoomline chart.

You need to zoom in to see the data plots on the zoom line chart. Check the below sample with an initial spread to view the plots.

http://jsfiddle.net/Lh3ej8mo/

Please note : Zoomline charts does not support timeseries data.

 

Thanks,

Akash.