Z-scaling when changing values – Not working

• July 4, 2018 at 8:33 pm #21372
  
  slotmachine

  Hi,
  Im using a bubble chart and the scaling from the Z-axis is totaly wrong. I’m using React and I’m changing the data a lot and everything works but the Z-scaling. These are the functions that is probably interesting for you. I can’t display all info and will not be able to showcase a jsfiddle because of nda.

    componentWillReceiveProps (nextProps) {
      if (!this.chart) return
  
      if (this.props.title !== nextProps.title) {
        this.chart.options.title.text = nextProps.title
      }
  
      if(!deepEqual(this.props.data , nextProps.data)){
        this.chart.options.data = nextProps.data    
      }
  
      if(!deepEqual(this.props.xAxis, nextProps.xAxis)){
        this.chart.options.axisX = nextProps.xAxis
      }
  
      if(!deepEqual(this.props.yAxis, nextProps.yAxis)){
        this.chart.options.axisY = nextProps.yAxis
      }
  
      if((this.props.title !== nextProps.title)){
        this.chart.options.title = nextProps.title
      }
      console.log("options right now:",this.chart.options)
      this.chart.render()    
    }
  
  componentDidMount(){
       this.chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        zoomEnabled: true,
        theme: "light",
        title: this.props.title,
        axisX: this.props.xAxis,
        axisY:this.props.yAxis,
        data:this.props.data,
      });
      this.chart.render();
      }
    render() ....
  
    const data =   [{
        type: "bubble",
        showInLegend: true,
        legendText:legendText,  ---- a text that is changed
        legendMarkerType: "circle",
        legendColor:"gray",
       // indexLabelOrientation: "horizontal",
        toolTipContent: toolTip, ---- changes
        dataPoints: dataPoints  --- changes 
      }]
    

  The example data

  {x: 10, y: 960, z: 12300, } 
  {x: 10, y: 880, z: 12300, }
  {x: 21, y: 1880, z: 16500,}

  How this data is displayed in the chart. Also notible is that each {} comes from when a uses selects a item so they are added separatly.

  https://ibb.co/k8CCGd

  July 5, 2018 at 2:17 pm #21381
  
  Priyanka M S

  @slotmachine,

  The z-scaling of the largest bubble, depends on the z-scaling of the smallest bubble. If you have a reference dataPoint, which is considerably small compared to the remaining dataPoints, you can notice the actual difference in size among the dataPoints.

  You can add a dummy/reference dataPoint and setting the color: "transparent", toolTipContent: null, will make the dummy dataPoint invisible/ inactive. Please take a look at this jsfiddle, which has a reference dataPoint and reads user’s data from external JSON.

  __
  Priyanka M S
  Team CanvasJS

  July 5, 2018 at 8:33 pm #21388
  
  slotmachine

  Perfect you solved my problem :)

  
      const referenceZscaling = {x:xMin , y: yMin, z: zdiff, name: "referenceZ", color: "transparent", toolTipContent: null}
      const data =   [{
        type: "bubble",
        showInLegend: true,
        legendText:legendText,
        legendMarkerType: "circle",
        legendColor:"gray",
        toolTipContent: toolTip,
        dataPoints: [referenceZscaling,...dataPoints]
      }]