Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
api:chart [2019/12/30 14:52] – [Chart URL for tomorrow] knutkohlapi:chart [2020/04/27 08:52] – external edit 127.0.0.1
Line 10: Line 10:
 So the process of drawing a chart consists of 3 parts: So the process of drawing a chart consists of 3 parts:
  
-  - Request a unique token for your plane(s), combine up to 3 (You can [[http://forecast.solar/build.html#ec1|build the URL]] with the helper page and get the script tag directly with the Test button.)+  - Request a unique token for your plane(s), combine up to 3 (you can [[http://forecast.solar/build.html#ec1|build the URL]] with the helper page and get the script tag directly with the Test button)
   - Init JavaScript chart functions, once per page   - Init JavaScript chart functions, once per page
   - Draw concrete chart by placing the JavaScript snippet exact at the place, where the chart should be shown.   - Draw concrete chart by placing the JavaScript snippet exact at the place, where the chart should be shown.
Line 48: Line 48:
  
 ==== Chart URL for tomorrow  ==== ==== Chart URL for tomorrow  ====
-<code> + 
-https://api.forecast.solar/chart/1/pDvJw75F.js +  https://api.forecast.solar/chart/1/pDvJw75F.js
-</code>+
  
 You can draw the chart **up to 6 days** in advance! You can draw the chart **up to 6 days** in advance!
 +
 +Please load the scripts **always** defered to not block the page loading!
  
 <code> <code>
 <-- ---------------------------------------------------------------------- <-- ----------------------------------------------------------------------
- -- Init chart functions, required only once per page+ -- Init chart functions, required only ONCE per page 
 + -- Put this always BEFORE the chart scripts!
  -- ------------------------------------------------------------------ -->  -- ------------------------------------------------------------------ -->
 <script defer src="https://api.forecast.solar/chart/init.js"></script> <script defer src="https://api.forecast.solar/chart/init.js"></script>
  
 <div style="text-align:center"> <div style="text-align:center">
- 
     <-- ------------------------------------------------------------------     <-- ------------------------------------------------------------------
      -- Custom header      -- Custom header
Line 69: Line 70:
     <-- ------------------------------------------------------------------     <-- ------------------------------------------------------------------
      -- Wrap script with a DIV with dimensions to define chart size      -- Wrap script with a DIV with dimensions to define chart size
-     -- The chart works perfect with deferred loading! 
      -- -------------------------------------------------------------- -->      -- -------------------------------------------------------------- -->
     <div style="width:400px;height:200px;margin:auto">     <div style="width:400px;height:200px;margin:auto">
         <script defer src="https://api.forecast.solar/chart/pDvJw75F.js"></script>         <script defer src="https://api.forecast.solar/chart/pDvJw75F.js"></script>
     </div>     </div>
- 
 </div> </div>
 </code> </code>
  
 +==== Parameters ====
 +
 +You can provide 2 parameters to the script:
 +  * ''title'' - Chart title
 +  * ''subtitle'' - Chart subtitle
 +
 +You can in both parameters use the follwing placeholders:
 +  * ''{place}'' - Location of the plant
 +  * ''{date}'' - Chart date
 +
 +If nothing is provided, no tilte is drawn and the subtitle becomes the date.
 +
 +If the title contains the ''{date}'' placeholder, the subtitle will **not** show the date.
 +
 +Full example
 +  https://api.forecast.solar/chart/1/pDvJw75F.js?title=Chart+for+{date}&subtitle={place}
 ===== 3. Result ===== ===== 3. Result =====
  
 {{ :2016-02-08_21_23_09-chart_example.png?nolink |}} {{ :2016-02-08_21_23_09-chart_example.png?nolink |}}