Spc Charting / Toggle Trendlines / Matching Colors

[achilles]

Hi,

 

I am building a small SPC Charting tool. I use the Multiline chart and XML to load multiple lines on the chart canvas.

 

Each line has:

• The line itself
• Upper Limits (I use the trendline tag in XML to create this) horizontal line(s)
• Lower Limits (I use the trendline tag in XML to create this) horizontal line(s)

 

I want to

1. Match the color of the line and its respective trendlines. For example if a line is yellow, I want its tendlines to be yellow. I currently do not choose the color of each line so the FusionCharts library assigns them. What is the best way to pick the color (I like the ones fusion charts is automatically assigning) for each chart? I don't want to use a loop to increment some color variable because that doesn't result in nice colors.
2. Toggle the trendlines on or off depending if the line they belong to was toggled off/on using the legend

Thank you,

 

Achilles

[Guest Sumedh]

Hi,

 

Welcome to FusionCharts Forum!

 

FusionCharts automatically provides colors to the line plots depending on the data. Providing colors to trendLines as per the line plots is not possible.

 

You would need to provide colors to trendLine manually. 

 

Toggling (enable/disable) of trendLines on legend click is not possible.

 

You would need to create custom JavaScript function to enable/disable the trendLines according to the data.

 

Hope this helps!

[Guest Sumedh]

Hi,

 

Apologies for the miscommunication and delayed response.

 

You can try using "legendClickedItemEvent" with addEventListener function.

 

You would need to specify the datasetName in the if condition parameter to identify the particular dataset.

 

Ref. Code:

 

 FusionCharts.addEventListener('LegendItemClicked', function (e,a) {

  

if(a.datasetName=='2005' && a.visible == true)

     { 

 

 var chartRef= FusionCharts("myChartId");

chartRef.setXMLUrl("updated_data.xml");

 //update the XML to render when data set series 2006 has been clicked.   }

    else    

     {    }

  });

  

}

    });

 

After identifying the dataset, you would need to provide the updated chart XML, which contains the trendLine element.

 

Here, you can make use of visible attribute to enable/disable data-plot. This will work with JavaScript chart only.

 

Ref. Code:

<dataset seriesName='2005' visible='1' >

 

For more information, please refer the following link:

http://docs.fusioncharts.com/charts/contents/JavaScript/API/Events.html

 

Please find attached illustration for your reference.

 

Hope this helps!

MSLine_TrendLine_Demo.zip