Evgeny Malafeev

Members
 View Profile  See their activity

  • Content count

    9

  • Joined

  • Last visited

Posts posted by Evgeny Malafeev

  4. Posted · Report reply

    Hi, Akash.

    I carefully studied your working example on jsfiddle, and here's what I noticed.

    You use native javascript and the following html markup is created for the chart: 

    div.class="chart-container" > span.class="fusioncharts-container" > svg(with chart).

     And this example works fine when changing width / height.

    But I use Vue.js and vue-fusioncharts. And in my case I get next html-markup: 

    div.class="chart-container" > div#id="fc-'number'" > span.class="fusioncharts-container" > svg(with chart).

    I have one div element after chart-container. Maybe it is feature vue-fusioncharts ?

    This div has no sizes. And when I dynamically change dimensions my chart, It no change your height. It was my problem.

    How can I fix this?

    I added next CSS code for my vue-component:  

    #chart-container > div {
  width: 100%;
  height: 100%;
}

    And it work great!

    Maybe this post can someone else solve a similar problem.

    Thank you so much, Akash for your help!

  5. Posted · Report reply

    Hello.

    How can I set transparent background color for angular gauge chart ?

    I set containerBackgroundOpacity: "0", but it isn't work.

    I remove bgColor for chart, but that doesn't help either. 

    type: "angulargauge",
renderAt: "chart-container",
width: "100%",
height: "100%",
containerBackgroundOpacity: "0",

    Background color always stay white color.

    How can I fix that ?

  6. Posted · Report reply

    Hi, Akash.

    I carefully studied the materials you attached.

    Since I set the height of the graph container as a percentage, I need to explicitly specify the height of all parents, up to the html tag. In my sandbox example, I explicitly set the height for all the parent elements. 

    html {
  height: 100vh;
}
body {
  height: 100vh;
  margin: 0;
}
#app {
  width: 100%;
  height: 100vh;
}

#chart-container {
  width: 100%;
  height: 100%;
  background-color: pink;
}

    But the chart when resizing the window still does not change its height. :(

    Maybe the problem is in some other property?
    Maybe you have a working example of codeSandbox or something similar, where the Angular Gauge dynamically changes its size in width and height when resizing a window?

     

  7. Posted · Report reply

    I added minimum working example on CodeSandbox.

    In this example, it is seen that when resizing the window with the container, the chart will change only in the width of the container. The height value does not change and remains the same. I added a pink background color for the container to make it more visual.

    What is wrong with this code and how can I fix it?

    Please need your help.

    How to make the chart dynamically change according to the height of its container?

  8. Posted · Report reply

    Hi, Akash.

    Thanks, for your answer.

    In your sample, where container dimension change dynamically, height for container has static value: 350px.

    In my case, I need dynamically change width and height for container with AngularGauge. Because when I open page on wide screen 55" 3840x2160 px container will grow and I need the chart increased in width and height, respectively.

    And I can't set static value for width/height chart-container.

  9. Posted · Report reply

    Hello.

     

    I have a AngularGauge chart with Vue.js.

    I configure gauge for dynamic resizing, like in manual.

    Code of my component: 

    ```

    <template>
      <div id="chart-container">
        <fusioncharts
          :type="type"
          :width="width"
          :height="height"
          :data-format="dataFormat"
          :data-source="chartData"
        >
        </fusioncharts>
      </div>
    </template>
     
    <script>
    import { mapState } from "vuex";
     
    export default {
      name: "AngularGauge",
      props: {
        dataValue: String,
        title: String,
        colorRange: Object
      },
      computed: {
        ...mapState({
          switchedTheme: state => state.switchedTheme
        }),
        chartData() {
          return {
            chart: {
              manageResize: "1",
              captionFont: "Roboto-Light",
              captionFontColor: this.switchedTheme ? "#262626" : "#ffffff",
              captionFontSize: "20",
              captionFontBold: "0",
              bgColor: this.switchedTheme ? "#ffffff" : "#262626",
              usePlotGradientColor: "1",
              pivotFillAlpha: "0",
              pivotBorderAlpha: "0",
              valueFont: "Roboto-Regular",
              valueFontSize: "40rem",
              valueFontColor: "#3F903E",
              valueBorderRadius: "3",
              valuePadding: "10",
              lowerLimit: this.colorRange.minRangeValue,
              upperLimit: this.colorRange.maxRangeValue,
              lowerLimitDisplay: this.colorRange.minRangeValue,
              upperLimitDisplay: this.colorRange.maxRangeValue,
              showValue: this.dataValue,
              valueBelowPivot: "1",
              theme: "fusion"
            },
            colorRange: {
              color: [
                {
                  minvalue: this.colorRange.low.minvalue,
                  maxvalue: this.colorRange.low.maxvalue,
                  code: "#3B953A"
                },
                {
                  minValue: this.colorRange.middle.minvalue,
                  maxValue: this.colorRange.middle.maxvalue,
                  code: "#E3A402"
                },
                {
                  minValue: this.colorRange.max.minvalue,
                  maxValue: this.colorRange.max.maxvalue,
                  code: "#C22424"
                }
              ]
            },
            dials: {
              dial: [
                {
                  radius: 165,
                  baseWidth: 145,
                  baseRadius: 25,
                  topWidth: 1,
                  rearExtension: 0,
                  value: this.dataValue,
                  valueY: 213,
                  bgColor: this.switchedTheme ? "#006FBA" : "#793DC0"
                },
                {
                  radius: 132,
                  baseWidth: 148,
                  bgColor: this.switchedTheme ? "#ffffff" : "#262626",
                  borderAlpha: 0,
                  baseRadius: 25,
                  topWidth: 40,
                  rearExtension: 2,
                  value: this.dataValue,
                  showValue: "0"
                }
              ]
            },
            annotations: {
              origw: 500,
              origh: 272,
              autoscale: "1"
            }
          };
        }
      },
      data() {
        return {
          type: "angulargauge",
          renderAt: "chart-container",
          width: "100%",
          height: "100%",
          dataFormat: "json"
        };
      }
    };
    </script>
     
    <style>
    #chart-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    </style>

    ```

     

    I added width and height for component in percents. And added menageResize: "1", autoScale: "1".

    But when I resize a page, AngularGauge only change your width. Height didn't change at all.

    In console I have this errors: 

    ```

    fusioncharts.js?8f68:13 Error: <path> attribute d: Expected number, "MNaN,NaNQ0,0,NaN,…".
    e._setFillAndStroke @ fusioncharts.js?8f68:13

    ```

    How can I fix this problem ?