trendlines with "steps"

[Matt]

I am using a scatter chart to show the results for some tests that a student has taken.  I have added horizontal trendlines so that I can color in the graph to visibly display the proficiency range.  Additionally I have added vertical lines between each point, which represents the result of a given test.

The result is that I show a point for each test, with a label at the bottom for the test name.  There are vertical lines between each point, added for clarity.  The bottom to the top of the graph is 0% - 100%.  0% to 60% is bound by a trendline, 60% - 80% is bound by a trendline, and 80% -100% is bound by a trendline so that each zone (0% - 100%, 60% - 80%, 80% -100%) is colored differently.  The whole goal is to provide a quick snapshot to the instructor to see how the student is performing.

I understand that I am not truly creating a graph, but I am leveraging the available features to show something else, which brings me to my question.

The final test that I want to show has different zones than I stated above. It would visually make it look like a "step" is in the final column on the graph.  I want to use 0% - 100%, 60% - 85%, 85% -100%.  Here is an example of what I want to achieve:

Here is an exapmle of what I have been able to do:

  sChart = "<graph palette='2' canvasBorderThickness='0' chartRightMargin='0' yAxisName='Percent Correct'  xAxisMaxValue='100' xAxisMinValue='0' yAxisMinValue='0' yAxisMaxValue='100' numberSuffix='%25' showLegend='0' bgColor='FFFFFF' showBorder='0' showAlternateHGridColor='0' >";

 

  sChart += "<categories verticalLineColor='666666' verticalLineThickness='1'>";

  sChart += "<category x='10' label='Step 1 Word Study'/>";

  sChart += "<category x='20' showVerticalLine='1'  />";

  sChart += "<category x='30' label='Step 3 Vocabulary'/>";

  sChart += "<category x='40' showVerticalLine='1'/>";

  sChart += "<category x='50' label='Step 3 Word Relationship'/>";

  sChart += "<category x='60' showVerticalLine='1'/>";

  sChart += "<category x='70' label='Step 3 Morphology'/>";

  sChart += "<category x='80' showVerticalLine='1'/>";

  sChart += "<category x='90' label='Step 4 Grammar'/>";

  sChart += "<category x='100' showVerticalLine='1'/>";

  sChart += "<category x='110' label='Step 4 Sentence Structure'/>";

  sChart += "<category x='120' showVerticalLine='1'/>";

  sChart += "<category x='130' label='Steps 1, 3 and 4 Total Score'/>";

  sChart += "<category x='140' showVerticalLine='1'/>";

  sChart += "</categories>";

  sChart += "<dataset seriesName='Server 1' color='0000FF' anchorSides='4' anchorRadius='4' anchorBgColor='C6C6FF' anchorBorderColor='0000FF' showValues='1'  >";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step1Score"].ToString() + "' x='10'/>";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step3AScore"].ToString() + "' x='30'/>";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step3BScore"].ToString() + "' x='50'/>";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step3CScore"].ToString() + "' x='70'/>";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step4AScore"].ToString() + "' x='90'  />";

  sChart += "<set y='" + ds.Tables[0].Rows[0]["Step4BScore"].ToString() + "' x='110'  />";

  sChart += "<set y='" + Average.ToString() + "' x='130'  />";

  sChart += "</dataset>";

  sChart += "<trendlines  >";

  sChart += "<line startValue='0' endValue='60.0' isTrendZone='1' valueOnRight='0' color='" + Reteach_Color.ToString() + "' displayValue=' ' />";

  sChart += "<line startValue='60' endValue='80.0' isTrendZone='1' valueOnRight='0' color='" + Reinforce_Color.ToString() + "' displayValue=' ' />";

  sChart += "<line startValue='80.0' endValue='100.0' isTrendZone='1' valueOnRight='0' color='" + Mastery_Color.ToString() + "' displayValue=' ' />";

  sChart += "</trendlines>";

  sChart += "</graph>";

Is there a way to do what I want to do?  If so, how?

Thanks

[Rahul Kumar]

Hi,

I am afraid, It is not possible as of now.

[Pallav]

Not sure if applicable- but wouldn't a step chart work for this purpose? Pls see http://www.fusioncharts.com/PowerCharts.asp#Kagi

[Guest Angie]

Dear User,

 

We are delighted to announce that PowerCharts is now ready for your iPads and iPhones too. We have just released PowerCharts v3.2. Starting v3.2, PowerCharts has HighCharts embedded within it, and offers both Flash and JavaScript (HTML5) charting . The Flash charts are displayed on a majority of devices and the JavaScript charts on devices that do not support Flash, all of it without writing a line of code.

 

Automatic rendering of JavaScript charts on devices (like iPad and iPhone) where Flash player is not supported.

 

5 new chart types:

 

Heat Map Chart

 

Box and Whisker Chart

 

Step Line Chart

 

Error Line Chart

 

Error Scatter Chart

 

 

* Support for JSON data format.

 

* Support for LinkedCharts, where a single data source controls multiple charts.

 

* Interactive legends in charts allow selective showing/hiding of data series.

 

* Legends now support icons for each data series.

 

* Better management of labels on charts.

 

* Labels now have an auto rendering mode to prevent them from overlapping, the chart selects the best display mode depending on the length of the labels and the width of the chart.

 

* Long labels are truncated, with ellipses appended to the truncated end of each label, and a tooltip bearing the completed label text is displayed when the user hovers over a truncated label.

 

* Support for line breaks and wrapping in all text elements including: caption, sub caption, X-axis title, Y-axis title, Labels and tooltips.

 

* In Line charts, data values can now be positioned either above or below the dataplots. Automatic positioning of data values is also supported.

 

* In Step-line charts dataplots can be joined using vertical lines.

 

* Custom alignment of caption and sub caption using STYLES.

 

* Advanced print management using JavaScript.

 

* Additional options for efficient event handling using JavaScript.

 

* Support for dynamic update of chart properties using JavaScript(barring select scatter and drag charts).

 

* Charts now support % based sizes along with dynamic resizing (barring select scatter and drag charts).

 

 

Learn more about everything new in PowerCharts v3.2 at : http:/ www.fusioncharts.com/PowerCharts/

 

We would love to hear from you at: http://www.fusioncharts.com/contact/