One TimeRangePicker for all charts - modules

[Ant1D]

Hey,

The answer to this question will be very useful to know 🙂

I have an advanced dashboard with a few charts (1 column, 2 pie) and each chart contains its own distinct timerangepicker to run its own saved search for a chosen time period. I want to put more charts onto this dashboard and each addition will also have its own timerangepicker. However, it would be easier and more practical to have one timerangepicker that when a time period is chosen (say last 7 days), every chart on this dash board will execute the search it owns to produce results for the last 7 days. This would be better than having to change several timerangepickers.

Here is the code I currently have for my dashboard:

view template="dashboard.html">

<label>Errors by time</label>

<module name="AccountBar" layoutPanel="navigationHeader"/>

<module name="AppBar" layoutPanel="navigationHeader"/>

<module name="Message" layoutPanel="messaging">

<param name="filter">*</param>

<param name="clearOnJobDispatch">False</param>

<param name="maxSize">1</param>

</module>

<module name="HiddenSavedSearch" layoutPanel="panel_row1_col1" group="Errors by category over a given time" autoRun="True">

<param name="savedSearch">20.1 Errors by category</param>

 <module name="TimeRangePicker">

         <param name="searchWhenChanged">True</param>

         <param name="default">Last 24 hours</param>

          <module name="HiddenChartFormatter">

                 <param name="charting.chart">column</param>

                 <param name="chart.stackMode">stacked</param>

                 <param name="secondaryAxisTitle.text">count</param>

                 <module name="JobProgressIndicator"></module>

                    <module name="FlashChart">

                           <param name="width">100%</param>

                           <param name="height">400px</param>

                    </module>

          </module>



          <module name="ViewRedirectorLink">

                 <param name="viewTarget">flashtimeline</param>

                 <param name="popup">True</param>      

          </module> 




 </module>

</module>

<module name="HiddenSavedSearch" layoutPanel="panel_row2_col1" group="Errors by name over a given time" autoRun="True">

<param name="savedSearch">20.2 Errors by name</param>

 <module name="TimeRangePicker">

         <param name="searchWhenChanged">True</param>

         <param name="default">Last 24 hours</param>

          <module name="HiddenChartFormatter">

                 <param name="charting.chart">pie</param>

                 <module name="JobProgressIndicator"></module>

                    <module name="FlashChart">

                           <param name="width">100%</param>

                           <param name="height">400px</param>

                    </module>

          </module>



          <module name="ViewRedirectorLink">

                 <param name="viewTarget">flashtimeline</param>

                 <param name="popup">True</param>      

          </module> 




 </module>

</module>

<module name="HiddenSavedSearch" layoutPanel="panel_row2_col2" group="Errors by type" autoRun="True">

<param name="savedSearch">20.3 Errors by severity</param>

 <module name="TimeRangePicker">

         <param name="searchWhenChanged">True</param>

         <param name="default">Last 24 hours</param>

          <module name="HiddenChartFormatter">

                 <param name="charting.chart">pie</param>

                 <module name="JobProgressIndicator"></module>

                    <module name="FlashChart">

                           <param name="width">100%</param>

                           <param name="height">400px</param>

                    </module>

          </module>



          <module name="ViewRedirectorLink">

                 <param name="viewTarget">flashtimeline</param>

                 <param name="popup">True</param>      

          </module> 




 </module>

</module> </view>

I just want to know how I can make the 3 timerangepicker modules that I have here become just 1 timerangepicker that controls all charts.

Thanks in advance for your help

[Brian_Osburn · Accepted solution]

It's done easy enough - move the time range picker module up to the top and have everything else be a child of it.

<view template="dashboard.html">
  <label>Errors by time</label>
  <module name="AccountBar" layoutPanel="navigationHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>

  <module name="TimeRangePicker" layoutPanel="panel_row1_col1">
    <param name="searchWhenChanged">True</param>
    <param name="default">Last 24 hours</param>
      <module name="HiddenSavedSearch" layoutPanel="panel_row2_col1" group="Errors by category over a given time" autoRun="True">
        <param name="savedSearch">20.1 Errors by category</param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">column</param>
          <param name="chart.stackMode">stacked</param>
          <param name="secondaryAxisTitle.text">count</param>
          <module name="JobProgressIndicator"></module>
            <module name="FlashChart">
              <param name="width">100%</param>
              <param name="height">400px</param>
            </module>
          </module>
          <module name="ViewRedirectorLink">
            <param name="viewTarget">flashtimeline</param>
            <param name="popup">True</param>      
          </module> 
      </module>
      <module name="HiddenSavedSearch" layoutPanel="panel_row3_col1" group="Errors by name over a given time" autoRun="True">
        <param name="savedSearch">20.2 Errors by name</param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">pie</param>
          <module name="JobProgressIndicator">
            <module name="FlashChart">
              <param name="width">100%</param>
              <param name="height">400px</param>
             </module>
          </module>
          <module name="ViewRedirectorLink">
            <param name="viewTarget">flashtimeline</param>
            <param name="popup">True</param>      
          </module> 
        </module>
     </module>
     <module name="HiddenSavedSearch" layoutPanel="panel_row4_col2" group="Farm errors by book" autoRun="True">
       <param name="savedSearch">20.3 Errors by severity</param>
       <module name="HiddenChartFormatter">
         <param name="charting.chart">pie</param>
         <module name="JobProgressIndicator"></module>
           <module name="FlashChart">
             <param name="width">100%</param>
             <param name="height">400px</param>
           </module>
         </module>
       <module name="ViewRedirectorLink">
         <param name="viewTarget">flashtimeline</param>
         <param name="popup">True</param>      
       </module> 
    </module>
  </module> 
</view>

[Ant1D]

Thanks for the update Brian. It works. I did everything you did but forgot to specify a layoutPanel attribute for the TimeRangePicker

[Brian_Osburn]

Updated the xml to include the whole thing.. Another good resource is the UI examples application which cover this specific topic..

[Ant1D]

this does not work. I tried it and my dashboard disappeared from my navigation menu