Evgeny Malafeev

Members
  • Content count

    9
  • Joined

  • Last visited

Everything posted by Evgeny Malafeev

  1. Animation for value AngularGauge

    Hello, I'm using AngularGauge and I need add animation for value, when it more then current value. Have a FusionChart this option ? Addition animation some part of chart. Thank, you.
  2. 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 ?
  3. Angular Gauge transparent background color

    Seems I understood. Need to pass containerBackgroundOpacity: "0" like a prop in fusioncharts vue-component. And it's works! Thanks!
  4. Angular Gauge transparent background color

    Hi. So strange. Why this is don't work with vue-fusioncharts component ? CodeSandBox Example
  5. AngularGauge don't change dynamic height on resize

    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!
  6. 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 ?
  7. AngularGauge don't change dynamic height on resize

    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?
  8. AngularGauge don't change dynamic height on resize

    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?
  9. AngularGauge don't change dynamic height on resize

    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.