{"product_id":"period-comparison-chart","title":"Period Comparison Chart","description":"\u003c!-- START: Product Page for Period Comparison Chart+ --\u003e\u003c!-- 1. HERO SECTION --\u003e\n\u003csection class=\"product-hero-section\"\u003e\n\u003cdiv class=\"product-hero-container\" style=\"text-align: center;\"\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/alarm-table_240x240.png?v=1782728616\" style=\"margin-bottom: 16px; float: none;\"\u003e\u003cbr\u003e\n\u003cp class=\"product-subtitle-tag\"\u003ePI Vision Custom Symbol • Vision Library+\u003c\/p\u003e\n\u003ch1\u003eCompare Today, Yesterday, Last Month, and Last Year in One Chart\u003c\/h1\u003e\n\u003cp class=\"product-description\"\u003ePeriod Comparison Chart+ lets you compare the same PI Vision datasource across multiple time periods on a shared comparison axis. Analyze shift-over-shift, day-over-day, month-over-month, and year-over-year performance directly inside AVEVA PI Vision without duplicating trends or manually rebuilding historical views.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 2. FEATURES SECTION --\u003e\n\u003csection class=\"product-features-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePeriod-Based Comparison Built for Operations and Reporting\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-grid-three-col\"\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eDynamic Period Layers\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDisplay Time or Calendar Periods:\u003c\/strong\u003e Compare exact display windows such as the current shift, or snap to calendar periods such as days, weeks, months, and years.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eAutomatic Layer Generation:\u003c\/strong\u003e Build comparisons like today versus yesterday, this month versus prior months, or this year versus previous years with a few simple settings.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eManual Reference Periods:\u003c\/strong\u003e Add custom comparison layers for known good runs, abnormal windows, campaign periods, or hand-picked troubleshooting intervals.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eBaseline and KPI Comparison\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eDelta and Percent Delta:\u003c\/strong\u003e Transform historical layers into direct difference views so users can see how far the current period is above or below a selected reference.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eBand Between Series:\u003c\/strong\u003e Keep the original trend shape visible while shading the distance between a layer and its baseline period.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSummary Retrieval:\u003c\/strong\u003e Turn raw time-series data into interval-based totals, averages, minimums, maximums, counts, standard deviations, or percent-good values.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"features-column\"\u003e\n\u003ch3\u003eInteractive Runtime Analysis\u003c\/h3\u003e\n\u003cul class=\"feature-list\"\u003e\n\u003cli\u003e\n\u003cstrong\u003eIntegrated Summary Table:\u003c\/strong\u003e Review exact values and statistics while using the table as a working control surface for visibility, focus, and reference periods.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eHide, Isolate, and Pin Layers:\u003c\/strong\u003e Temporarily hide noisy series, click a row to isolate one layer, or pin important reference periods so they remain visible as dynamic layers update.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFullscreen Chart Review:\u003c\/strong\u003e Double-click the chart to open a larger analysis view while preserving useful state such as legend selections and zoom position.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 3. USE CASES SECTION --\u003e\n\u003csection class=\"use-cases-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eFrom Repeated Time Windows to Clear Operational Insight\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-cases-grid\"\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eDaily and Shift Performance\u003c\/h3\u003e\n\u003cp\u003eCompare the current shift against previous shifts or today against yesterday to spot drift, delays, abnormal ramps, or performance gaps while the period is still in progress.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M3.5 18.49l6-6.01 4 4L22 6.92 20.59 5.5l-7.09 7.97-4-4L2 16.99z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eMonth-over-Month Trends\u003c\/h3\u003e\n\u003cp\u003eOverlay calendar months or weeks to see whether production, energy, quality, or utilization is tracking ahead of or behind previous periods.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eYear-over-Year Benchmarking\u003c\/h3\u003e\n\u003cp\u003eCompare the same day, month, or year across prior years to understand seasonality, benchmark against historical best performance, and detect long-term changes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"use-case-card\"\u003e\n\u003csvg fill=\"currentColor\" viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"icon\"\u003e\u003cpath d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1 16l-4-4 1.41-1.41L11 14.17l5.59-5.59L18 10l-7 7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\n\u003ch3\u003eReference Period Comparison\u003c\/h3\u003e\n\u003cp\u003ePin a known good or known bad historical period and keep it visible as a stable reference while the current display time and dynamic layers continue to change.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 4. SCREENSHOTS SECTION --\u003e\n\u003csection class=\"screenshots-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003ePeriod Comparison Built for Dashboards, Reviews, and Troubleshooting\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"screenshots-grid\"\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"Period Comparison Chart showing today versus yesterday.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-period-comparison-chart-day.png?v=1782728671\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eToday vs Yesterday\u003c\/h4\u003e\n\u003cp\u003eUse calendar day layers to compare the current day against yesterday on the same relative timeline. Operators can quickly see whether today's values are tracking normally or diverging from the previous day.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"Period Comparison Chart showing monthly year-over-year comparison.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-period-comparison-year-over-year.png?v=1782728670\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eMonthly and Year-over-Year Comparison\u003c\/h4\u003e\n\u003cp\u003eSnap layers to calendar months or years to compare equivalent business periods. This is ideal for seasonal processes, energy consumption, production totals, and reporting views where calendar alignment matters.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"Period Comparison Chart showing baseline delta and percent delta.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-period-comparison-pin-layers.png?v=1782728671\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003ePin Periods\u003c\/h4\u003e\n\u003cp\u003ePin important time periods for comparison, so they are fixed on the chart even when the display time changes.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"text-align: start;\" class=\"screenshot-card\"\u003e\n\u003cimg style=\"margin-bottom: 16px; float: none;\" alt=\"Period Comparison Chart summary table with visibility and pin controls.\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/pi-vision-period-comparison-week.png?v=1782728671\"\u003e\n\u003cdiv class=\"screenshot-card-content\"\u003e\n\u003ch4\u003eInteractive Summary Table\u003c\/h4\u003e\n\u003cp\u003eThe built-in table is more than a legend. Hide or show individual series, click rows to isolate a layer, pin important reference periods, and review value, average, min, max, count, sum, and other statistics in one place.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c!-- 5. DEMO VIDEO SECTION --\u003e\n\u003csection class=\"demo-video-section\"\u003e\n\u003cdiv class=\"section-header\"\u003e\n\u003ch2\u003eSee Period Comparison Chart+ in Action\u003c\/h2\u003e\n\u003cp\u003eWatch a quick demo to see how easy it is to build period layers, compare current performance against historical references, and use the summary table for runtime analysis inside AVEVA PI Vision.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"video-card\"\u003e\n\u003cdiv class=\"video-wrapper\"\u003e\u003cvideo poster=\"https:\/\/via.placeholder.com\/1000x562.png?text=Play+PCC%2B+Demo+Video\" preload=\"metadata\" controls=\"controls\"\u003e\n\u003csource type=\"video\/mp4\" src=\"https:\/\/via.placeholder.com\/video-placeholder.mp4\"\u003e\nYour browser does not support the video tag.\n\u003c\/source\u003e\u003c\/video\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cstyle\u003e\n  \/* --- GENERAL SECTION STYLES --- *\/\n  .section-header {\n    display: flex; flex-direction: column; align-items: center; text-align: center;\n    max-width: 800px; margin: 0 auto 3.5rem auto;\n  }\n  .section-header h2 {\n    color: #111; margin-bottom: 1rem; font-size: 1.8rem;\n  }\n  .section-header p {\n    color: #333; line-height: 1.7; font-size: 1rem;\n  }\n  .feature-list {\n    list-style: none; padding: 0; margin: 0;\n  }\n  .feature-list li {\n    position: relative; padding-left: 30px; margin-bottom: 1.25rem;\n    line-height: 1.6; color: #333;\n  }\n  .feature-list li::before {\n    content: '✔'; position: absolute; left: 0; top: 2px;\n    color: #3F72E5; font-size: 1.2rem;\n  }\n  .feature-list li strong {\n    color: #111; font-weight: 600;\n  }\n\n  \/* --- 1. HERO SECTION --- *\/\n  .product-hero-section {\n    padding: 5rem 1rem; text-align: center;\n  }\n  .product-hero-container {\n      max-width: 700px; margin: 0 auto;\n  }\n  .product-hero-icon {\n      width: 80px; height: auto; margin-bottom: 2rem;\n  }\n  .product-subtitle-tag {\n    color: #3F72E5; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px;\n  }\n  h1 {\n    font-size: 2.5rem; margin-bottom: 1.5rem;\n  }\n  .product-description {\n    line-height: 1.7; font-size: 1.1rem; color: #333;\n  }\n\n  \/* --- 2. FEATURES SECTION --- *\/\n  .product-features-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .features-grid-three-col {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 2.5rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .features-column h3 {\n    font-size: 1.3rem; margin-bottom: 1.5rem; color: #111;\n  }\n \n  \/* --- 3. USE CASES SECTION --- *\/\n  .use-cases-section {\n    padding: 4rem 1rem;\n  }\n  .use-cases-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 2rem;\n    max-width: 1200px; margin: 0 auto;\n  }\n  .use-case-card {\n    background: white; border-radius: 20px; padding: 2rem; text-align: center;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n  }\n  .use-case-card .icon {\n    width: 40px; height: 40px; color: #3F72E5; margin-bottom: 1rem;\n  }\n  .use-case-card h3 {\n    font-size: 1.2rem; color: #111; margin-bottom: 0.5rem;\n  }\n  .use-case-card p {\n    color: #333; font-size: 0.9rem; line-height: 1.6;\n  }\n\n  \/* --- 4. SCREENSHOTS SECTION --- *\/\n  .screenshots-section {\n    padding: 4rem 1rem; background-color: #f9fafb;\n  }\n  .screenshots-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 3rem;\n    max-width: 900px;\n    margin: 0 auto;\n  }\n  .screenshot-card {\n    background: white; border-radius: 20px;\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);\n    overflow: hidden;\n  }\n  .screenshot-card img {\n    width: 100%; height: auto; display: block; background-color: #f9fafb;\n  }\n  .screenshot-card-content {\n    padding: 2rem;\n  }\n  .screenshot-card-content h4 {\n    font-size: 1.3rem; margin: 0 0 0.5rem 0; color: #111;\n  }\n  .screenshot-card-content p {\n    font-size: 1.05rem; line-height: 1.6; color: #333; margin: 0;\n  }\n \n \/* --- 5. DEMO VIDEO SECTION --- *\/\n  .demo-video-section {\n    padding: 4rem 1rem;\n  }\n  .video-card {\n    max-width: 1000px;\n    margin: 0 auto;\n    border-radius: 20px;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n    background-color: #000;\n  }\n  .video-wrapper {\n    position: relative;\n    padding-bottom: 56.25%;\n    height: 0;\n  }\n  .video-wrapper video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 20px;\n  }\n\n  \/* --- RESPONSIVE STYLES --- *\/\n  @media (max-width: 900px) {\n    .features-grid-three-col {\n      grid-template-columns: 1fr;\n    }\n  }\n\u003c\/style\u003e\n\u003c!-- END: Product Page --\u003e\n\u003cp\u003e```\u003c\/p\u003e","brand":"Software Athlete","offers":[{"title":"Default Title","offer_id":56870307430726,"sku":null,"price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0673\/2260\/9955\/files\/periodcomparisonchart.png?v=1782722541","url":"https:\/\/www.software-athlete.com\/products\/period-comparison-chart","provider":"Software Athlete","version":"1.0","type":"link"}