Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.0.0-b1
    • Component/s: None
    • Labels:
      None

      Description

      Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

      This includes:

      • System Overview widget
      • Billing Overview widget
      • System Status widget

      An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

      For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.

      Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

      I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

      OR this super simple gauge that similar to what we have now: http://bl.ocks.org/ameyms/9184728

      Known issues:

      • There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].
      • Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option) (Fixed with v1.8.2)
        https://github.com/novus/nvd3/issues/1093

        Activity

        cody Cody Phillips (Inactive) created issue -
        cody Cody Phillips (Inactive) made changes -
        Field Original Value New Value
        Epic Link CORE-1841 [ 12716 ]
        cody Cody Phillips (Inactive) made changes -
        Rank Ranked higher
        cody Cody Phillips (Inactive) made changes -
        Fix Version/s 4.0.0 [ 10603 ]
        Assignee Cody Phillips [ cody ]
        cody Cody Phillips (Inactive) made changes -
        Story Points 8
        cody Cody Phillips (Inactive) made changes -
        Story Points 8 5
        cody Cody Phillips (Inactive) made changes -
        Story Points 5 8
        cody Cody Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain that until at least 4.2 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget
        Blesta currently uses jqplot, and should maintain that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget
        cody Cody Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget
        admin Paul Phillips made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.
        admin Paul Phillips made changes -
        Sprint 4.0.0 Sprint 3 [ 21 ]
        admin Paul Phillips made changes -
        Rank Ranked lower
        admin Paul Phillips made changes -
        Rank Ranked higher
        admin Paul Phillips made changes -
        Sprint 4.0.0 Sprint 3 [ 21 ] 4.0.0 Sprint 3, 4.0.0 Sprint 4 [ 21, 22 ]
        admin Paul Phillips made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.
        admin Paul Phillips made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now: http://bl.ocks.org/ameyms/9184728*
        admin Paul Phillips made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now: http://bl.ocks.org/ameyms/9184728*
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728
        Hide
        tyson Tyson Phillips (Inactive) added a comment -

        Are we going to create a helper for interfacing with nvd3 to generate these graphs?

        Show
        tyson Tyson Phillips (Inactive) added a comment - Are we going to create a helper for interfacing with nvd3 to generate these graphs?
        Hide
        cody Cody Phillips (Inactive) added a comment -

        Might make sense to have some sort of interface to format raw data into d3 compatible data. We should look into what sort of format we need data in.

        Show
        cody Cody Phillips (Inactive) added a comment - Might make sense to have some sort of interface to format raw data into d3 compatible data. We should look into what sort of format we need data in.
        Hide
        tyson Tyson Phillips (Inactive) added a comment -

        It looks like the format of data depends on the graph, such as x/y coordinates, values (e.g. array of values [time, value] or just a single value). And of course there is a multitude of configurable options that could be set. So there may not be much we can do to make it easier to work with the chart system.

        Show
        tyson Tyson Phillips (Inactive) added a comment - It looks like the format of data depends on the graph, such as x/y coordinates, values (e.g. array of values [time, value] or just a single value). And of course there is a multitude of configurable options that could be set. So there may not be much we can do to make it easier to work with the chart system.
        Hide
        cody Cody Phillips (Inactive) added a comment -

        One thing we can do, however, is utilize Closures to format the data accordingly, so we don't have to create additional classes/methods to do so.

        Show
        cody Cody Phillips (Inactive) added a comment - One thing we can do, however, is utilize Closures to format the data accordingly, so we don't have to create additional classes/methods to do so.
        tyson Tyson Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].
        tyson Tyson Phillips (Inactive) made changes -
        Link This issue is blocked by CORE-2051 [ CORE-2051 ]
        tyson Tyson Phillips (Inactive) made changes -
        Link This issue is blocked by CORE-2051 [ CORE-2051 ]
        tyson Tyson Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        Known issues:
        - There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].

        - Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option)
        https://github.com/novus/nvd3/issues/1093
        tyson Tyson Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        Known issues:
        - There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].

        - Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option)
        https://github.com/novus/nvd3/issues/1093
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        Known issues:
        - There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].

        - -Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option)-
        https://github.com/novus/nvd3/issues/1093
        tyson Tyson Phillips (Inactive) made changes -
        Description Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        Known issues:
        - There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].

        - -Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option)-
        https://github.com/novus/nvd3/issues/1093
        Blesta currently uses jqplot, and should maintain (inclusion of) that until at least 5.0 for backwards compatibility, however, all existing graphs (that we control) should be updated to use the new library: nvd3

        This includes:

        - System Overview widget
        - Billing Overview widget
        - System Status widget

        An example area graph is in the office share, Blesta Dev > nvd3 > examples > stackedAreaChart-TEST.html

        -For the system status widget see the donutChart.html example in the same directory. The example on the right, containing half a donut could be a good replacement. The text in the middle could represent the health %. The profile on this chart is fairly high though, and a bulletChart (bulletChart.html) may be more appropriate depending on how flexible it is.-

        Look at implementing a direct D3 (not using nvd3) fill gauge from http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

        I suggest using something similar to the pink gauge on the left (but obviously a different color) and making it square instead of round. I was able to accomplish this by editing the markup.

        *OR this super simple gauge that similar to what we have now:* http://bl.ocks.org/ameyms/9184728

        Known issues:
        - There appears to be an nvd3 bug preventing stacked graphs from starting their Y axis at 0, which is useful for displaying only unsigned values:
        https://github.com/novus/nvd3/issues/602
        A graph with only 0 values (such as on the System Overview) will show a Y-Axis range of [-1, 0, 1] rather than [0, 1].

        - -Toggling a graph line off can cause a JS error and keep showing the graph line. You will need to have the graph regenerated before it will fix itself (e.g. resizing the page or re-toggling the option)- (Fixed with v1.8.2)
        https://github.com/novus/nvd3/issues/1093
        cody Cody Phillips (Inactive) made changes -
        Status Open [ 1 ] Closed [ 6 ]
        Resolution Fixed [ 1 ]

          People

          • Assignee:
            Unassigned
            Reporter:
            cody Cody Phillips (Inactive)
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:
              Fix Release Date:
              15/Sep/16

              Agile