0

I am using ZK Framework in a project and i need to build this chart and export it as an image.

This is my chart: https://i.imgur.com/c1VlWcT.png

And this is the image that is being generated: https://i.imgur.com/v941aAI.png

As you can see, whenever the image is generated the numbers on the Y axis disappear and its range also changes. Does anyone knows why this is happening?

zul

<charts id="chrtConsumoFaturado" type="line" title="Gráfico dos últimos 12 meses" />

controller

this.chrtConsumoFaturado.setHeight(222);
this.chrtConsumoFaturado.getYAxis().setTitle("Valores");
this.chrtConsumoFaturado.getYAxis().getLabels().setFormat("R$ {value},00");
this.chrtConsumoFaturado.getExporting().getButtons().setEnabled(true);

this.chrtConsumoFaturado.getTooltip().setValuePrefix("R$ ");
this.chrtConsumoFaturado.getTooltip().setValueSuffix(",00");

this.chrtConsumoFaturado.setModel(new DefaultCategoryModel());

Some observations: the exporting button is enabled; the other values are correct and I am using zk 7.0.0

Malte Hartwig
  • 4,477
  • 2
  • 14
  • 30
Aimée
  • 49
  • 6
  • Have you tried making the diagram higher? Maybe the renderer and the image exporter decide which lines to show on a different scale. – Malte Hartwig Dec 06 '17 at 20:14
  • @MalteHartwig but thats what i want. if the scale changes, the values should change too. In the demos on zk's official site, you can add other lines in the chart and change the scale, but when the image is generated, it generate exactly the image we are seeing, witch is not happening in my code :/ – Aimée Dec 07 '17 at 11:01
  • Can you add more of your code, for example how you configure your diagram? Waht type is returned by `getYAxis()`? Can you specify there what values to show? You can see in the pictures that not just the steps change, but also the total range (-20 to 40 -> -10 to 30). x-axis labels and title and legend size also change... – Malte Hartwig Dec 07 '17 at 12:37
  • Possible duplicate of the question having [this answer](https://stackoverflow.com/a/10263152/230513). – trashgod Dec 07 '17 at 14:42
  • @trashgod i do not want to adopt an explicit range – Aimée Dec 07 '17 at 16:01
  • @GabrielaAimée: I agree; query the model for the desired range bounds. – trashgod Dec 07 '17 at 20:06

1 Answers1

0

Since you don't specify the axis tick interval, zkcharts exports the axis tick according to its size. But the exporting image size is not as the same as what you see on a browser screen. It's 600px width * 400px height, if you don't specify a chart's width/height.

Since you don't specify the width, so zk charts export the chart by default width (600px) with default scale. Therefore, the result image is 1200 * 444. The height 444 is from the specified height multiplying the default scale which is 222 * 2.

If you try to shrink your chart's size to 600px in your browser, you will see the y axis tick changes, too. And this changed result matches your current exporting image. For example:

original on the browser screen, wider enter image description here

narrower enter image description here

Because the rotated x axis label consumes more space of height, the height shrinks, so the number of y axis label becomes fewer.

I think there are at least 2 solutions:

  1. enlarge exporting source width set exporting source width as close as your screen width e.g.

chart.getExporting().setSourceWidth(1200);

https://api.highcharts.com/highcharts/exporting.sourceWidth

  1. specify y axis tick interval enforce tick interval

chart.getYAxis().setTickInterval(20);

Hawk
  • 897
  • 7
  • 14