Home forums Using CanvasJS Z-scaling when changing values – Not working

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  slotmachine 2 weeks, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21372

    slotmachine
    Member

    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

    #21381

    Priyanka M S
    Member

    @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

    #21388

    slotmachine
    Member

    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]
        }]
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.