I am trying to create image on every xaxis in my highchart like the one in the attached image , but couldn't find the way for it
here is my code for the xaxis
chart.getXAxis(1).setOpposite(true).setLinkedTo(0).setType(Type.DATE_TIME)
.setTickInterval(6 * 3600 *1000).setGridLineWidth(1)
any idea how can i set some image to every xaxis in my chart
You will want to use the AxisLabelsFormatter. The content you "return" from this call should be the appropriate html you want to have rendered. So something like this work for the top axis:
chart.getXAxis().setLabels(
new XAxisLabels()
.setFormatter(new AxisLabelsFormatter() {
public String format(AxisLabelsData axisLabelsData) {
return '<img src="/path/to/image.gif" />';
}
})
);
Related
We have multiple charts with zoom. Is there a way to link all this charts so they always have the same zoom factor when the user zoom in one of the charts?
When having multiple grids in the same chart is not a possibility, I use this trick to do the job:
myChart.on('datazoom', function (evt) {
var zoom = myChart.getOption().dataZoom[0];
myOtherChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: zoom.startValue,
endValue: zoom.endValue
});
});
Both charts have dataZoom, in my case I hide the one in myOtherChart.
If you've got more events to track, creating the action can be simplified by letting echarts create it:
["datazoom", "legendselectchanged", /* more events*/].forEach((eventType: string) => {
this.chartInstance1.on(eventType, (event) => {
// Automatically create an action from the event
let newEvent = this.chartInstance1.makeActionFromEvent(event);
// Dispatch it directly
this.chartInstance2.dispatchAction(newEvent);
});
})
For everyone who wants to go further, also synchronizing mouse, legend and magic events, its easier to use the connect function.
Template:
// chart 1
<div echarts (chartInit)="onChartInit($event)"></div>
// chart 2
<div echarts (chartInit)="onChartInit($event)"></div>
Typescript:
import { connect, ECharts } from "echarts";
// ...
onChartInit(chart: ECharts) {
this.charts.push(chart);
if (this.charts.length === 2)
// This will do the magic out of the box
connect([charts[0], charts[1]]);
}
I am using google charts and have a page of mixed charts, some pie, a column chart and a gauge chart
The page has an option to generate a pdf, so I am converting the charts to PNG to use in the pdf..
all the charts are generated in the same manner, using a div to display the google chart and a hidden div to store the png image
var chart = new google.visualization.Gauge(document.getElementById('gauge'));
var hidden = new google.visualization.Gauge(document.getElementById('gauge_hidden'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
gauge_hidden.innerHTML = '<img src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
this code works fin on he pie and column charts, but on the gauge chart I am seeing
chart.getImageURI is not a function
any ideas how I can get the png?
CHeers
I was facing this same issue, but after some reading i've come to this solution:
I'm using jQuery to make this a little easier.
First, use XMLSerializer to convert the SVG chart to a string and then use btoa to convert that to base64.
You can use this string this way:
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var base64String = "data:image/svg+xml;base64," + window.btoa(s);
In my case i needed to draw the gauge chart to a PDF and DOMPDF doesn't support this format, so if you need a "data:image/png;base64," string, you can continue with this solution.
You need to set the "svg+xml;base64" as src of a new Image and then draw that image to a Canvas. After that you can use toDataURL method from canvas to get the content as base64 png.
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var image = new Image();
image.width = 640;
image.height = 480;
image.src = 'data:image/svg+xml;base64,' + window.btoa(s);
var myCanvas = document.createElement('canvas');
myCanvas.width = 640;
myCanvas.height = 480;
var myCanvasContext = myCanvas.getContext('2d');
myCanvasContext.drawImage(image,0,0);
// get google chart gague to base64, yey!
var base64String = myCanvas.toDataURL();
Thanks to the author of this answer and this post
I have made a Google column chart.
It displays ok. but the vertical axis label is showing an unit that I never set myself.
here is the screen shot.
I don't understand why it displays "1 td" instead of 1000 , "1,2 td" instead of 1200.
Here is my code:
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
….
….
]);
var options = {
title: 'My Test',
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
my code has nothing special part for the vertical axis and I used from google chart gallery. why it gets 'td' unit for vertical axis even I didn't set myself?
Is it Google column chart default option?
I try to manipulate the vertical axis value with vAxis:. but no luck.
Any advices?
Apparently, when using material bar charts, the y-axis (vAxis) default format is short, meaning showing td for thousands and so on. To reset this set format to '' :
var options = {
axes : {
y : {
all : {
format : {
pattern : ''
}
}
}
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
demo -> http://jsfiddle.net/sfc9aLd4/
But the material charts are still in beta, and a lot of the options are yet not documented or documented poorly. Luckily we can use the google visualization options object layout and convert it with convertOptions(options) :
var options = {
vAxis : {
format : '' //or #####
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
Will result in the same as above axes : { ... }
demo -> http://jsfiddle.net/3aq7gucd/
With material charts there seems to be some differences for format. 'none' is now ''. decimal should be changed to ####.## or likewise. scientific, currency and percent works as before.
I've added a nvd3 chart to my sencha touch app.
Apparently though the size of the box where the chart will be inserted is undefined at the time the chart is created. This turns out in a graph with standard dimensions (960x350 approx), way too large!
How can I modify the widht and height of the chart? The visual error I get is that the chart has a larger width, the component containing it are smaller and the chart is not completely
visible (it's like it misses a resize effect to adapt its size to the containing box).
My code, which is inside a sencha component goes like this:
nv.addGraph(Ext.bind(function(){
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label; })
.y(function(d) { return d.value; })
.staggerLabels(true)
.tooltips(false)
.showValues(true);
var w = 550;
var h = 280;
var svg = d3.select(this.innerElement.dom).append('svg');
// setting axis property doesn't work:
var x = d3.scale.ordinal()
.domain(d3.range(10))
.rangeRoundBands([0, w], 1);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.xAxis.scale(x);
chart.yAxis
.tickFormat(d3.format(',f'));
//setting svg properties doesn't work:
svg.attr("width", w)
.attr("height", h);
svg.datum(this.getChartData()).transition().duration(500).call(chart);
//if I comment this, nothing changes, what is this method for?
nv.utils.windowResize(chart.update);
i test the android-graphview library and i find this behavior:
I use the latest GraphViewDemos and the first SimpleGraph example. It shows a linegraph with the correct data. (The y-axis values are 1,2,3)
GraphViewSeries exampleSeries = new GraphViewSeries(new GraphViewData[] {
new GraphViewData(1, 2.0d)
, new GraphViewData(2, 1.5d)
, new GraphViewData(2.5, 3.0d) // another frequency
, new GraphViewData(3, 2.5d)
, new GraphViewData(4, 1.0d)
, new GraphViewData(5, 3.0d)
});
The max value is three (Sorry i can't post an image) and all other coordinates are correct.
If i add these lines
graphView.getGraphViewStyle().setNumVerticalLabels(5);
graphView.setVerticalLabels( new String[]{"4","3","2","1","0"});
before
LinearLayout layout = (LinearLayout) findViewById(R.id.graph1);
layout.addView(graphView);
in the code to change the y-axis, i get a graph where the max-value is not still three, it's four. And all the other coordinates are wrong in the y-values.
Why does the complete graph change and not only the y-axis?
with the line:
graphView.setVerticalLabels( new String[]{"4","3","2","1","0"});
you set static labels to the graph. So the vertical labels (y-values) have no link to the data anymore.
This line is for dynamic labels. You can modify the count of the labels that will be generated.
graphView.getGraphViewStyle().setNumVerticalLabels(5);
But you are using static labels, so the line doesn't make sense.
http://android-graphview.org/
Visit this page and scroll to the Custom Label Formatter part of the tutorial.
GraphView graphView = new LineGraphView(this, "example");
graphView.setCustomLabelFormatter(new CustomLabelFormatter() {
#Override
public String formatLabel(double value, boolean isValueX) {
if (isValueX) {
if (value < 5) {
return "small";
} else if (value < 15) {
return "middle";
} else {
return "big";
}
}
return null; // let graphview generate Y-axis label for us
}
});
Basically you will have to map the actual y value with the static Vertical Label you have provided