[Vineet Deodhar]

@indranil Deo
Tested the code.
There are 2 issues.
1) My chart is ‘click-and drag’. After clicking for dragging, it creates unnecessary input field.
2) The input fields added are not (of course) persistent. Therefore let me consider your first suggested solution in this jsfiddle .

Help requested for one addition —
the extra info typed by user needs to be added programatically in the json input data. The data file is stored as sampleFilename.json on local drive. I have a button to select the file and the same is passed to a script for parsing into json object and further passed to CanvasJS.Chart.
This jsfiddle for file load code shows how I load file data.
(although in this jsfiddle, I could not include canvasjs.min.js. Do not know how do I include it in jsfiddle).

Any idea as to how do I add it programatically in the data (after user inputting the same)?
Thanks.

• This reply was modified 4 years, 7 months ago by Vineet Deodhar.
• This reply was modified 4 years, 7 months ago by Vineet Deodhar.

[Vineet Deodhar]

@Indranil Deo Thank you very much for your code.
Let me test it on my setup.

• This reply was modified 4 years, 7 months ago by Vineet Deodhar.

[Vineet Deodhar]

Thanks for your reply (& sorry for my late reply).
I got your solution.
But for this, the user needs to enter ‘Extra Information’ in the source data itself.
Would it be possible to add the information ‘on the fly’ somewhere in chart window itself?
Tool-tip was just an example. Maybe you can suggest any alternate way to display the extra information.
Thanks.

• This reply was modified 4 years, 7 months ago by Vineet Deodhar.

[Vineet Deodhar]

@Vishwas R , sorry for my late reply.
Got it.
Now it is working.
Thank you.

[Vineet Deodhar]

@Vishwas, thanks for your code on jsfiddle.
I simply copy-pasted the additional javascript and css and button element to relevant portions.
The button is rendered.
After clicking it, the the chart page is blank.

I think I need to tweak it somewhere.

[Vineet Deodhar]

Since EDIT is disabled in above post, creating a new reply.
multiple dates jsfiddle can be viewed here.

[Vineet Deodhar]

Now, almost done.
I have set valueFormatString: "DD-MMM-YYYY HH-mm", for axisX.

1) If there are a few records,date time are displayed twice on x-axis.
2) As the no. of records increases in the same day, X-axis labels are not displayed for in-between records. Displayed after every 10 records.
3) If there is data for different dates, obviously there is no data during off-market hours. But X-axis space is reserved for these empty slots. You can view it in the jsfiddle below.
What should be corrected?
This jsfiddle shows the result.

Thanks.

• This reply was modified 6 years ago by Vineet Deodhar.

[Vineet Deodhar]

I gave it a try.

var rawData = [
		{"y": [10714.7, 10717.95, 10714.3, 10717.5], "x": "2018/01/16 14:26:00"},
		{"y": [10718.0, 10718.0, 10713.45, 10716.2], "x": "2018/01/16 14:27:00"},
		{"y": [10716.6, 10722.0, 10716.1, 10719.15], "x": "2018/01/16 14:28:00"}
		]
for (i = 0; i < 3; i++){rawData[i]["x"]=new Date(rawData[i]["x"]);}

Mostly, it is ok.
But the it gives Date, not DateTime.

I tried new Date(rawData[i]["x"]).format("isoDateTime")
But error.

What I maybe missing?
Thanks.

[Vineet Deodhar]

Great. It is working OK using the latest release.
Thanks.

[Vineet Deodhar]

Regarding zoom and pan feature–

I am able to do zoom and scroll, but except one functionality.
The Y axis doesn’t re-scale as I move the chart after zooming (in your example in docs, it is behaving correctly).
I have added the following code:-
animationEnabled: true,
zoomEnabled: true,

To my surprise, when I created jsfiddle for zomm and pane with the same code, resizing of Y axis is working in the fiddle.
But not in a separate browser window.

What may be the reason? Pl. help.
Thanks.

• This reply was modified 6 years ago by Vineet Deodhar.
• This reply was modified 6 years ago by Vineet Deodhar.

[Vineet Deodhar]

QDOS.
That’s what I required.
Suggestion:- You may think of including this “changeBorderColor” function into the library of canvasjs so that others can also get benefited.

I really appreciate your service support quality.
You surpass my expectation levels.
Pl. keep it up and wish you and your team all the best.

Thanks.

• This reply was modified 6 years ago by Vineet Deodhar.

[Vineet Deodhar]

I have tried as you advised.
Now Up-candle and down-candle colors are done.
The only issue remaining is border color of candlestick.
Pl. refer to this jsfiddle.

Since I have specified color: “red”(to get down-candle color), down-candle as well as border color have now become red.
Any suggestion on this (to get rid of border-color)?

Thanks.

• This reply was modified 6 years ago by Vineet Deodhar.
• This reply was modified 6 years ago by Vineet Deodhar.

[Vineet Deodhar]

I could set the risingColor now.

1) Regarding fallingColor, the documentation says that “fallingColor property can only be used with waterfall chart.”.
Is there any workaround for this?

2) How do I set the border color for candles? I searched the docs, but could not find it. So request you for help.

• This reply was modified 6 years ago by Vineet Deodhar. Reason: added details

[Vineet Deodhar]

In this candlestick chart, How do I change the colours of candles (e.g. blue for up-candles, red for down candles).
Thanks.

[Vineet Deodhar]

Thank you very much for your support.