Multiple Series In Single Y-Axis

[gowthamsd]

Hi,

 

 

We are currently developing javascript charts without flash using jquery-plugins.

 

 

The library files are downloaded from "http://www.fusioncha...ownload/trials/".

 

We are struck with the below issues:

 

1. Adding multiple series on candle-stick chart. The requirement is that we need to add indicators on this chart. We are not able to even a single line chart on this candle-stick chart.

We were trying the example provided in the below URL without any difference. But we were not able to get the demonstrated output as shown in the link. It just displays candle-sticks (first series) alone.

http://docs.fusionch...om/powercharts/ -Candlestick specification sheet.

 

2. Another issue is that, the dates in the x-axis remain static. Say, if 50 data points exist, all the dates were plotted in the x-axis instead of grouping them day-wise/ week-wise.

 

3. Performance - It takes around 3 mins to load candle-sticks with 50 data-points.

 

Thanks in advance for your support!

 

Thanks

Gowtham

[Guest Sumedh]

Hi,

 

Can you please provide some information on following points?

 

> What PowerCharts version are you using?

 

> Can you please paste your Sample HTML Code and chart XML here?

 

It would be helpful for us to investigate further on this issue.

[gowthamsd]

Hi,

 

Thanks for your quick reply.

 

I am using the same example code which you are given in documentation.

 

The following libraries are used for this.

 

i) FusionCharts –3.2.4.js

 

ii) FusionCharts.HC.Charts.js

 

iii) FusionCharts.HC.js

 

iv) FusionCharts.HC.PowerCharts.js

 

v) FusionCharts.jqueryplugin.js

 

 

 

{

"chart":{

"numpdivlines":"5",

"caption":"XYZ - 3 Months",

"numberprefix":"$",

"bearbordercolor":"E33C3C",

"bearfillcolor":"E33C3C",

"bullbordercolor":"1F3165",

"pyaxisname":"Price",

"vyaxisname":"Volume (In Millions)",

"volumeheightpercent":"20"

},

"categories":[{

"category":[{

"label":"2006",

"x":"1",

"showline":"1"

}

]

}

],

"dataset":[{

"data":[{

"open":"24.6",

"high":"25.24",

"low":"24.58",

"close":"25.19",

"x":"1",

"volume":"17856350"

},

{

"open":"24.36",

"high":"24.58",

"low":"24.18",

"close":"24.41",

"x":"2",

"volume":"3599252"

},

{

"open":"24.63",

"high":"24.66",

"low":"24.11",

"close":"24.95",

"x":"3",

"volume":"74685351"

},

{

"open":"24.53",

"high":"24.84",

"low":"24.01",

"close":"24.95",

"x":"4",

"volume":"49236987"

},

{

"open":"24.84",

"high":"24.94",

"low":"24.56",

"close":"24.93",

"x":"5",

"volume":"18247006"

},

{

"open":"24.96",

"high":"25.03",

"low":"24.58",

"close":"24.89",

"x":"6",

"volume":"67419690"

},

{

"open":"25.25",

"high":"25.46",

"low":"25.11",

"close":"25.13",

"x":"7",

"volume":"95517555"

},

{

"open":"25.27",

"high":"25.37",

"low":"25.0999",

"close":"25.18",

"x":"8",

"volume":"83656552"

},

{

"open":"25.33",

"high":"25.43",

"low":"25.06",

"close":"25.16",

"x":"9",

"volume":"42177624"

},

{

"open":"25.38",

"high":"25.51",

"low":"25.23",

"close":"25.38",

"x":"10",

"volume":"40668662"

},

{

"open":"25.2",

"high":"25.78",

"low":"25.07",

"close":"25.09",

"x":"11",

"volume":"78602232"

},

{

"open":"25.66",

"high":"25.8",

"low":"25.35",

"close":"25.37",

"x":"12",

"volume":"10338104"

},

{

"open":"25.77",

"high":"25.97",

"low":"25.54",

"close":"25.72",

"x":"13",

"volume":"38067037"

},

{

"open":"26.31",

"high":"26.35",

"low":"25.81",

"close":"25.83",

"x":"14",

"volume":"52104215"

},

{

"open":"26.23",

"high":"26.6",

"low":"26.2",

"close":"26.35",

"x":"15",

"volume":"46274157"

}

]

}

],

"trendset":{

"name":"Simple Moving Average",

"color":"0099FF",

"thickness":"0",

"alpha":"100",

"includeinlegend":"1",

"data":[{

"x":"1",

"value":"24.6"

},

{

"x":"2",

"value":"24.69"

},

{

"x":"3",

"value":"24.89"

},

{

"x":"4",

"value":"24.92"

},

{

"x":"5",

"value":"25.2"

},

{

"x":"6",

"value":"25.1"

},

{

"x":"7",

"value":"25.17"

},

{

"x":"8",

"value":"25.2"

},

{

"x":"9",

"value":"25.2"

},

{

"x":"10",

"value":"25.31"

},

{

"x":"11",

"value":"25.28"

},

{

"x":"12",

"value":"25.52"

},

{

"x":"13",

"value":"25.7"

},

{

"x":"14",

"value":"25.9"

},

{

"x":"15",

"value":"26"

}

]

},

"trendlines":[{

"line":[{

"startvalue":"24.2",

"color":"0372AB",

"displayvalue":"S1",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"23.35",

"color":"0372AB",

"displayvalue":"S2",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"28.2",

"color":"0372AB",

"displayvalue":"R2",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"27.65",

"color":"0372AB",

"displayvalue":"R1",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

}

]

}

],

"vtrendlines":[{

"line":[{

"startvalue":"10",

"endvalue":"13",

"color":"FF5904",

"displayvalue":"Results Impact",

"istrendzone":"1",

"alpha":"10"

}

]

}

]

}

[Guest Sumedh]

Hi,

 

We are looking into this issue.

 

We will update you on this, shortly.

 

Thanks for your time and support.

[gowthamsd]

Instead of CandleStick.swf, I am using Javascript chart alias.

 

FusionCharts.setCurrentRenderer("javascript");

var fusionChart = new FusionCharts( "CandleStick","fusionCandleChartId","400", "400");

 

Thanks,

Gowtham

Edited August 31, 2012 by gowthamsd

[gowthamsd]

Hi,

 

Can you please provide some information on following points?

 

> What PowerCharts version are you using?

 

> Can you please paste your Sample HTML Code and chart XML here?

 

It would be helpful for us to investigate further on this issue.

[gowthamsd]

Hi,

 

Can I add different types of series in single y-axis using the trail version of fusion charts?.

 

For example, one line series with two columns, Area with 2 line series, etc.

 

Will "rederas" property work on trail version?

 

I am using the following libraries,

 

i)FusionCharts –3.2.4.js

ii)FusionCharts.HC.Charts.js

iii)FusionCharts.HC.js

iv)FusionCharts.HC.PowerCharts.js

v)FusionCharts.jqueryplugin.js

 

please do the needful.

 

With regards,

Gowtham.

Edited September 3, 2012 by gowthamsd

[Guest Sumedh]

Hi Gowtham,

 

You can use Combination charts with single y axis to plot multiple charts in a single chart.

 

A combination chart is a chart that combines two or more charts types in a single charts e.g., a column charts series and a line charts series, but both having the same units and magnitude.

 

For more information, please refer the following links:

http://www.fusioncharts.com/demos/gallery/#combination-single-y

 

http://docs.fusioncharts.com/charts/contents/?ChartSS/Combi3D.html

 

Also, can you please paste a screen-shot of Candlestick chart issue here?

[FusionCharts Support]

Yes of-course,

 

try Combination 2D chart. For more on this chart read: http://docs.fusioncharts.com/charts/?ChartSS/Combi2D.html

[gowthamsd]

Hi,

 

we are tried out the sample given in the below url:

http://docs.fusioncharts.com/charts/?ChartSS/Combi2D.html

 

The same problem persist even in this case.

 

on top of the code given in that url we have added the below code to instantiate fusion charts.

 

Even here we find "renderas" property not to be working and only column chart loading.

 

Please refer the screen shot attached.

 

With regards,

Gowtham.

[gowthamsd]

Hi,

 

we are tried out the sample given in the below url:

http://docs.fusionch...SS/Combi2D.html

 

The same problem persist even in this case.

 

on top of the code given in that url we have added the below code to instantiate fusion charts.

 

chartConfig = {

"chartId": "fusionColumnLineChartId",

"chartType": "MSCombi2D"

};

 

 

Even here we find "renderas" property not to be working and only column chart loading.

 

Please refer the screen shot attached.

 

With regards,

Gowtham.

 

 

Edited September 3, 2012 by gowthamsd

[gowthamsd]

Sorry i missed this.

 

 

var fusionChart = new FusionCharts(

"MSColumn2D",

chartConfig.chartId,

chartConfig.width,

chartConfig.height

);

[FusionCharts Support]

Hey,

 

You have not rendered a combination chart at all, as the code shows you asked to render "MSColumn2D".

 

Use "MSCombi2D" instead.

[gowthamsd]

Thanks a lot for your support! This worked fine.

 

Coming back to my original issue with Candlestick charts:

 

1. We are planning to render a candle stick chart and a line chart with two different data sets in single Y axis. Is it possible? If then, what would be the chart type?

We are not considering trendlines here.

Will it fall under combination/ multi series charts?

 

2. As per the documentation, when there are N number of data points, there must N x-labels as well. We are currently developing timeline based charts only with a total of 50 data points.

Having 8 data points per day, the chart is displaying all the corresponding 50 x-labels. Is it possible to show the day-wise on x-labels instead of showing all the x-labels.

 

Thanks in advance for your kind support.

 

 

 

 

[FusionCharts Support]

Hi,

 

The best option is of course to use the CandleStick chart itself and consider the trendsets. The candlestick chart is ideal to show open, high, low, and close values as well as volume amount.

 

The other option where you use a combination chart, would be cumbersome,as it requires the mapping with data points with labels. But, here you can skip the data labels either setting showLabels='0' in <chart> and using showLabel='1' in <category> where needed. or using labelStep attribute.

[gowthamsd]

Thank You very much!

 

We just understood that trendsets should be used to add technical indicators.

As such, our requirement is to add an indicator, Simple Moving Average in the candlestick chart.

 

We tried out the same example given in your documentation.

But we are not able to get the trendset displayed. Is there any pre-requisite to get trendsets displayed? The below sample code doesn't show even trendlines and vtrendline. We are trying this on Google Chrome browser.

 

The code is as follows:

 

var fusionChart = new FusionCharts( <br style="color: rgb(107, 107, 107); font-family: verdana, arial, tahoma, sans-serif; line-height: 18px; background-color: rgb(247, 247, 247); ">"CandleStick", <br style="color: rgb(107, 107, 107); font-family: verdana, arial, tahoma, sans-serif; line-height: 18px; background-color: rgb(247, 247, 247); ">chartConfig.chartId, <br style="color: rgb(107, 107, 107); font-family: verdana, arial, tahoma, sans-serif; line-height: 18px; background-color: rgb(247, 247, 247); ">chartConfig.width, <br style="color: rgb(107, 107, 107); font-family: verdana, arial, tahoma, sans-serif; line-height: 18px; background-color: rgb(247, 247, 247); ">chartConfig.height <br style="color: rgb(107, 107, 107); font-family: verdana, arial, tahoma, sans-serif; line-height: 18px; background-color: rgb(247, 247, 247); ">);

 

 

var chartJSONData = {

"chart":{

"numpdivlines":"5",

"caption":"XYZ - 3 Months",

"numberprefix":"$",

"bearbordercolor":"E33C3C",

"bearfillcolor":"E33C3C",

"bullbordercolor":"1F3165",

"pyaxisname":"Price",

"vyaxisname":"Volume (In Millions)",

"volumeheightpercent":"20"

},

"categories":[{

"category":[{

"label":"2006",

"x":"1",

"showline":"1"

}

]

}

],

"dataset":[{

"data":[{

"open":"24.6",

"high":"25.24",

"low":"24.58",

"close":"25.19",

"x":"1",

"volume":"17856350"

},

{

"open":"24.36",

"high":"24.58",

"low":"24.18",

"close":"24.41",

"x":"2",

"volume":"3599252"

},

{

"open":"24.63",

"high":"24.66",

"low":"24.11",

"close":"24.95",

"x":"3",

"volume":"74685351"

},

{

"open":"24.53",

"high":"24.84",

"low":"24.01",

"close":"24.95",

"x":"4",

"volume":"49236987"

},

{

"open":"24.84",

"high":"24.94",

"low":"24.56",

"close":"24.93",

"x":"5",

"volume":"18247006"

},

{

"open":"24.96",

"high":"25.03",

"low":"24.58",

"close":"24.89",

"x":"6",

"volume":"67419690"

},

{

"open":"25.25",

"high":"25.46",

"low":"25.11",

"close":"25.13",

"x":"7",

"volume":"95517555"

},

{

"open":"25.27",

"high":"25.37",

"low":"25.0999",

"close":"25.18",

"x":"8",

"volume":"83656552"

},

{

"open":"25.33",

"high":"25.43",

"low":"25.06",

"close":"25.16",

"x":"9",

"volume":"42177624"

},

{

"open":"25.38",

"high":"25.51",

"low":"25.23",

"close":"25.38",

"x":"10",

"volume":"40668662"

},

{

"open":"25.2",

"high":"25.78",

"low":"25.07",

"close":"25.09",

"x":"11",

"volume":"78602232"

},

{

"open":"25.66",

"high":"25.8",

"low":"25.35",

"close":"25.37",

"x":"12",

"volume":"10338104"

},

{

"open":"25.77",

"high":"25.97",

"low":"25.54",

"close":"25.72",

"x":"13",

"volume":"38067037"

},

{

"open":"26.31",

"high":"26.35",

"low":"25.81",

"close":"25.83",

"x":"14",

"volume":"52104215"

},

{

"open":"26.23",

"high":"26.6",

"low":"26.2",

"close":"26.35",

"x":"15",

"volume":"46274157"

}

]

}

],

"trendset":{

"name":"Simple Moving Average",

"color":"0099FF",

"thickness":"0",

"alpha":"100",

"includeinlegend":"1",

"data":[{

"x":"1",

"value":"24.6"

},

{

"x":"2",

"value":"24.69"

},

{

"x":"3",

"value":"24.89"

},

{

"x":"4",

"value":"24.92"

},

{

"x":"5",

"value":"25.2"

},

{

"x":"6",

"value":"25.1"

},

{

"x":"7",

"value":"25.17"

},

{

"x":"8",

"value":"25.2"

},

{

"x":"9",

"value":"25.2"

},

{

"x":"10",

"value":"25.31"

},

{

"x":"11",

"value":"25.28"

},

{

"x":"12",

"value":"25.52"

},

{

"x":"13",

"value":"25.7"

},

{

"x":"14",

"value":"25.9"

},

{

"x":"15",

"value":"26"

}

]

},

"trendlines":[{

"line":[{

"startvalue":"24.2",

"color":"0372AB",

"displayvalue":"S1",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"23.35",

"color":"0372AB",

"displayvalue":"S2",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"28.2",

"color":"0372AB",

"displayvalue":"R2",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

},

{

"startvalue":"27.65",

"color":"0372AB",

"displayvalue":"R1",

"thickness":"0",

"dashed":"1",

"dashlen":"2",

"dashgap":"2"

}

]

}

],

"vtrendlines":[{

"line":[{

"startvalue":"10",

"endvalue":"13",

"color":"FF5904",

"displayvalue":"Results Impact",

"istrendzone":"1",

"alpha":"10"

}

]

}

]

};

 

 

 

 

 

[gowthamsd]

Hi,

 

We have got this issue resolved by changing the value of thichness as 3. Initially, in the example thickness was set as "0". Trendset is displaying now.

But there is another issue now.

 

We have a requirement to show Bollinger band which has an upper and lower band.

We were trying to implement this using two trendsets but its displaying only one band and not the other.

 

Y-axis values were limited to 300 whereas the value of other band starts from 500. Pls clarify on the below:

 

1. Is it the issue with Y-axis plots? Are they remaining static?

2. If we provide some static data (values < 300), the other trendset is getting displayed provided the code for first trendset is commented out, which means only one trendset is getting displayed at a time. Is it a limitation?

 

 

Thanks in advance for your support

 

Thanks

Gowtham

[gowthamsd]

Hi,

 

We have got the above issues resolved by adding multiple data within trendset Array object.

And got the Y-axis values plots changed by using PYAxisMaxValue.

 

Thanks

Gowtham

 

 

 

[Guest Sumedh]

Its glad to know that, you have managed to resolve the issues.